/*------------------------------------------------------------------
    File Name: new_frontend.css
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
    IMPORT FILES
-------------------------------------------------------------------*/
@import url('../fonts/fonts-local.css');


/*----- Basic css -----*/

/* Variables Style */
:root {
	--white: #fff;
	--black: #000;
	--font-style-nunito: 'Inter', sans-serif;
	--font-style: 'Inter', sans-serif;
	/** theme color primary */
	--primary-25: #F7FAFF;
	--primary-50: #eff4ff;
	--primary-100: #dce7fd;
	--primary-200: #c0d5fd;
	--primary-300: #95bbfb;
	--primary-400: #6396f7;
	--primary-base: #4a79f3;
	--primary-600: #2951e7;
	--primary-700: #213ed4;
	--primary-800: #2134ac;
	--primary-900: #203088;
	--primary-950: #182053;
	--bs-pagination-active-bg: #4a79f3;
	--bs-pagination-active-border-color: #4a79f3;
	/** theme color grey */
	/** grey **/
    --grey-25: #FCFCFD;
	--grey-50: #F9FAFB;
	--grey-100: #F2F5F7;
	--grey-200: #EAECF0;
	--grey-300: #D0D5DD;
	--grey-400: #98A2B3;
	--grey-base: #667085;
	--grey-600: #475467;
	--grey-700: #344054;
	--grey-800: #1D2939;
	--grey-900: #101828;
    /** error red */
	--error-25: #FFFBFA;
	--error-50: #FEF3F2;
	--error-100: #FEE4E2;
	--error-200: #FECDCA;
	--error-300: #FDA29B;
	--error-400: #F97066;
	--error-base: #F04438;
	--error-600: #D92D20;
	--error-700: #B42318;
	--error-800: #912018;
	--error-900: #7A271A;
	/** error warning yellow */
	--warning-25: #FFFCF5;
	--warning-50: #FFFAEB;
	--warning-100: #FEF0C7;
	--warning-200: #FEDF89;
	--warning-300: #FEC84B;
	--warning-400: #FDB022;
	--warning-base: #F79009;
	--warning-600: #DC6803;
	--warning-700: #B54708;
	--warning-800: #93370D;
	--warning-900: #7A2E0E;
	/** error warning yellow */
	--success-25: #F6FEF9;
	--success-50: #ECFDF3;
	--success-100: #DCFAE6;
	--success-200: #ABEFC6;
	--success-300: #75E0A7;
	--success-400: #47CD89;
	--success-base: #17B26A;
	--success-600: #079455;
	--success-700: #067647;
	--success-800: #085D3A;
	--success-900: #074D31;
	/** shadow **/
	--box-shadow-extra-small: 0px 0.8404255509376526px 1.6808511018753052px 0px rgba(16, 24, 40, 0.05);
	--box-shadow-small: 0px 0.8404255509376526px 1.6808511018753052px 0px rgba(16, 24, 40, 0.06), 0px 0.8404255509376526px 2.5212767124176025px 0px rgba(16, 24, 40, 0.10);
	--box-shadow-medium: 0px 1.6808511018753052px 3.3617022037506104px -1.6808511018753052px rgba(16, 24, 40, 0.06), 0px 3.3617022037506104px 6.723404407501221px -1.6808511018753052px rgba(16, 24, 40, 0.10);
	--box-shadow-large: 0px 3.3617022037506104px 5.042553424835205px -1.6808511018753052px rgba(16, 24, 40, 0.03), 0px 10.08510684967041px 13.446808815002441px -3.3617022037506104px rgba(16, 24, 40, 0.08);
	--box-shadow-extra-large: 0px 6.723404407501221px 6.723404407501221px -3.3617022037506104px rgba(16, 24, 40, 0.03), 0px 16.80851173400879px 20.17021369934082px -3.3617022037506104px rgba(16, 24, 40, 0.08);
	--box-shadow-large-2x: 0px 20.17021369934082px 40.34042739868164px -10.08510684967041px rgba(16, 24, 40, 0.18);
	--box-shadow-large-3x: 0px 26.893617630004883px 53.787235260009766px -10.08510684967041px rgba(16, 24, 40, 0.14);
	/** border radius **/
	--radius-global-lg: 16px;
	--radius-global-md: 12px;
	--radius-global-sm: 8px;
	--radius-global: 8px;
	--bs-accordion-inner-border-radius: 8px;
	--bs-form-switch-bg-white: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
	--bs-modal-width: 520px;
}

/* End Variables Style */

/* boostrap css */

.pb-4 {
    padding-bottom: 24px!important;
}
.px-4 {
    padding-right: 24px!important;
    padding-left: 24px!important;
}
/* boostrap css */

* {
	margin: 0;
	padding: 0;
	outline: none;
	box-sizing: border-box;
	font-family: var(--font-style);
}

.grey-400 {
	color: var(--grey-400);
}


html, body {
    margin: 0;
    padding: 0;
    line-height: 1.5;
    color: var(--grey-700);
    font-weight: normal;
    font-size: 14px;
    min-height: 100%;
}

body {
	background-color: var(--grey-100);
}
svg { flex-shrink: 0; }
/* Button */
.btn-check:checked+.btn:focus-visible,
.btn.active:focus-visible,
.btn.show:focus-visible,
.btn:first-child:active:focus-visible,
:not(.btn-check)+.btn:active:focus-visible {
	box-shadow: none;
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    background-color: var(--grey-200);
    border-color: var(--grey-300);
}

.success-base {
    color: #079455;
    background: #ECFDF3;
    padding: 3px 8px;
    border-radius: 6px;
    border: solid #A9EFC5 1px;
    line-height: normal;
    font-weight: 500;
}

.error-base {
	color: #D92D20;
    background: #FEF3F2;
    padding: 3px 8px;
    border-radius: 6px;
    border: solid #FECDCA 1px;
    line-height: normal;
    font-weight: 500;
}

/* table section */

td {
	vertical-align: middle;
}

.responsive-table {
    width: 100%;
    position: relative;
    overflow-y: auto;
}

.responsive-table thead {
	position: sticky;
	top: 0;
	left: 0;
}

.responsive-table table {
	margin-bottom: 0;
}

.responsive-table table th {
    color: var(--grey-400);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0.2px;
}

.responsive-table thead,
.responsive-table thead tr,
.responsive-table thead tr th {
	border-bottom: none;
}

.responsive-table table td {
    color: var(--grey-700);
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
}

.table>:not(caption)>*>* {
	padding: 1rem 1.5rem;
}

svg.horizontal {
	transform: rotate(180deg);
}

.mt-4 {
    margin-top: 24px !important;
}

div#accordion-default {
    position: relative;
    top: 1px;
}

/* end table section */

/* global pagination start */

ul.pagination {
    padding: 1.5rem 1.5rem;
}

ul.pagination li {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0.2px;
    transition: ease all 0.25s;
    overflow: hidden;
}

ul.pagination li a {
	border-radius: 4px;
}

li#kt_table_connection_data_ellipsis, li#kt_table_connection_data_ellipsis a {
    background: transparent;
    opacity: 1;
}

ul.pagination li:hover,
ul.pagination li:focus {
	background-color: transparent;
}

.page-link:hover,
.page-link:focus {
	background-color: transparent;
	color: var(--grey-base);
}

ul.pagination li.disable svg {
	opacity: 0.35;
}

ul.pagination li+li {
	margin: 0 4px;
}

ul.pagination li:last-child {
    margin-right: 0;
    margin-left: 0;
}

ul.pagination li a {
    color: var(--grey-base);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
}

ul.pagination li.active a {
	color: var(--white);
}

.arrow-pagination {
	background-color: var(--grey-100);
}

ul.pagination li.active {
	background-color: var(--primary-base);
}

.page-link:focus {
	box-shadow: none;
}

/* global pagination end */

/** toolip **/

a[data-bs-toggle="tooltip"] svg, a[data-bs-toggle="tooltip"] path {
    stroke: var(--grey-400);
	position: relative;
	top: 0;
}

a[data-bs-toggle="tooltip"]:hover svg, a[data-bs-toggle="tooltip"]:hover path,
a[data-bs-toggle="tooltip"]:focus svg, a[data-bs-toggle="tooltip"]:focus path {
	stroke: var(--primary-base);
}

.tooltip-inner {
    background-color: var(--grey-700);
    color: var(--white);
    font-size: 12px;
    padding: 7px 12px;
    border-radius: 8px;
    line-height: 18px;
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before {
    border-top-color:  var(--grey-700) !important;
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before {
    border-bottom-color:  var(--grey-700) !important;
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before {
    border-right-color:  var(--grey-700);
}

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before {
    border-left-color:  var(--grey-700);
}


/* input style */

label {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    color: var(--grey-700);
    margin-bottom: 6px;
}

label.light-label {
	color: var(--grey-400);
}

.ml-12 {
	margin-left: 12px;
}

.me-12 {
	margin-right: 12px;
}

input[type="text"], input[type="password"], input[type="email"], input[type="url"],
input[type="date"], input[type="tel"], select, select.form-select {
    width: 100%;
    background-color: var(--white);
    border: solid 1px var(--grey-300);
    padding: 5px 14px;
    height: 36px;
    border-radius: var(--radius-global-sm);
    font-size: 14px;
    line-height: normal;
    color: var(--grey-700);
    font-weight: normal;
    transition: ease all 0.25s;
    font-weight: 400;
}
input:-webkit-autofill {
    background-color: var(--white) !important; /* Override autofill background */
    color: var(--grey-700) !important; /* Ensure text remains visible */
    -webkit-text-fill-color: var(--grey-700) !important; /* Ensures text color stays white */
    transition: background-color 5000s ease-in-out 0s; /* Prevents autofill override */
  }

select.form-select option {
	padding: 8px 14px;
}

textarea {
	width: 100%;
	background-color: var(--white);
	border: solid 1px var(--grey-300);
	padding: 10px 14px;
	min-height: 90px;
	border-radius: var(--radius-global-sm);
	font-size: 14px;
	line-height: normal;
	color: var(--grey-700);
	font-weight: normal;
	transition: ease all 0.25s;
	font-weight: 400;
}

/* Read-only form controls — mirror of the canonical rule in new_ui_light_frontend.css.
   Kept here so legacy pages that only pull new_frontend.css (admin/employee,
   billing/plans, crm-integrations, linkprofile, privacy/header, settings, vcard_customizer)
   still get the same readonly styling. Update both files together. */
textarea[readonly],
input.input-copy-readonly[type="text"],
input[readonly] {
	background-color: var(--grey-100);
	border-color: var(--grey-300);
	color: var(--grey-600);
	box-shadow: none;
	pointer-events: none;
	cursor: not-allowed;
}
textarea[readonly]:hover, textarea[readonly]:focus,
input.input-copy-readonly[type="text"]:hover, input.input-copy-readonly[type="text"]:focus,
input[readonly]:hover, input[readonly]:focus {
    background-color: var(--grey-100);
	border-color: var(--grey-300);
	box-shadow: none;
}

select:hover,
select.form-select:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="url"]:hover,
input[type="tel"]:hover,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="password"]:hover,
input[type="password"]:focus,
textarea:hover,
textarea:focus {
	border-color: var(--primary-400);
	box-shadow: 0px 0.84043px 1.68085px 0px rgba(16, 24, 40, 0.06), 0px 0.84043px 2.52128px 0px rgba(16, 24, 40, 0.10);
}

textarea.disable,
textarea.disable:hover,
textarea.disable:focus {
	background: var(--grey-100);
	color: var(--grey-300);
	border-color: var(--grey-300);
	box-shadow: 0px 0.84043px 1.68085px 0px rgba(16, 24, 40, 0.06), 0px 0.84043px 2.52128px 0px rgba(16, 24, 40, 0.10);
	pointer-events: none;
	cursor: none;
}

.form-control:focus {
	border-color: var(--primary-400);
	box-shadow: 0px 0.84043px 1.68085px 0px rgba(16, 24, 40, 0.06), 0px 0.84043px 2.52128px 0px rgba(16, 24, 40, 0.10);
}

.grey-column-b {
	background-color: var(--grey-50);
	border: solid 1px var(--grey-100);
	border-radius: var(--radius-global-md);
	overflow: hidden;
}

button {
	cursor: pointer;
}

/* phone number field */

body .separate-dial-code .flag-container .selected-flag .selected-dial-code {
    margin: 12px 0 11px !important;
}

.intl-tel-input.separate-dial-code .selected-flag {
	background-color: transparent !important;
}

body .intl-tel-input.separate-dial-code .selected-dial-code {
    font-weight: 500 !important;
    color: var(--grey-700) !important;
    font-size: 14px !important;
}

.p-4 {
    padding: 24px !important;
}

/* input style end */


/* Typography */

h1 {
	font-size: 40px;
	font-style: normal;
	line-height: 100%;
	/* 40px */
	letter-spacing: -0.5px;
	font-weight: 600;
}

h2 {
	font-size: 32px;
	font-style: normal;
	line-height: 100%;
	/* 32px */
	letter-spacing: -0.2px;
	font-weight: 600;
}

h3 {
	font-size: 24px;
	font-style: normal;
	line-height: 100%;
	/* 24px */
	letter-spacing: 0.2px;
	font-weight: 600;
}

h4 {
	font-size: 22px;
	font-style: normal;
	line-height: 135%;
	/* 29.7px */
	letter-spacing: -0.22px;
}

h5 {
    font-size: 18px;
    font-style: normal;
    line-height: 25px;
    letter-spacing: 0.2px;
    font-weight: 600;
}

h6 {
	font-size: 14px;
	font-style: normal;
	line-height: 100%;
	/* 16px */
	letter-spacing: 0.2px;
	font-weight: 600;
}

.text-small {
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 160%;
	/* 19.2px */
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--grey-700);
}

p.ex-large {
	font-size: 20px;
	font-style: normal;
	line-height: 150%;
	/* 30px */
	letter-spacing: 0.2px;
}

p.large {
	font-size: 16px;
	font-style: normal;
	line-height: 150%;
	font-weight: 400;
	letter-spacing: 0;
}

p {
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	word-wrap: break-word;
	/* 21px */
}

p.small {
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 140%;
	/* 16.8px */
}

.basic-text {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    text-transform: capitalize;
    margin-top: 10px !important;
    line-height: 1.25;
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* preserve user-entered casing on social link titles (e.g. "egomonk" should not render as "Egomonk") */
.basic-text.title_section {
    text-transform: none;
}

ul.link-profile-list {
    margin-top: 20px;
}

.basic-text + .basic-text.title_jobtitle {
    font-size: 12px;
    color: #667085 !important;
    font-weight: 400;
    margin-top: 4px !important;
    line-height: normal;
    padding-top: 0;
}

.modal-body p {
	line-height: 150%;
}

.grey-500 {
	color: var(--grey-base);
}

.navbar-top li.active svg path {
    stroke: #fff;
}

button {
	background: none;
	border: none;
	cursor: pointer;
}

.simple-content-link {
	color: var(--primary-base);
	display: flex;
	align-items: center;
	justify-content: center;
}

.dropdown-item.active,
.dropdown-item:active {
	color: var(--grey-700);
}

ul.dropdown-menu {
	box-shadow: 0px 0.78358px 3.9179px 0px rgba(0, 0, 0, 0.05);
	border: none;
	border: solid 1px var(--grey-200);
	padding: 4px 0;
	border-radius: var(--radius-global-sm);
}

.dropdown-item {
	color: var(--grey-700);
	border-radius: var(--radius-global);
	min-width: 153px;
}

.dropdown-menu li a {
	display: flex;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 20px;
	padding: 11px 16px 11px 16px;
	align-items: center;
	border-radius: 0;
	margin: 0;
	color: var(--grey-700);
}

.dropdown-menu li a.danger {
	color: var(--error-base);
}

.dropdown-menu li a:hover,
.dropdown-menu li a:focus {
	background: var(--grey-100);
}

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

.width-212 {
	max-width: 212px;
}

.social-info-content > span + h5 {
    margin-top: 16px;
}

.cr-viewport.cr-vp-square {
    border: solid var(--grey-300) 1px !important;
}

/* box shadow style */

.extra-small-shadow {
	box-shadow: var(--box-shadow-extra-small);
}

.small-shadow {
	box-shadow: var(--box-shadow-small);
}

.medium-shadow {
	box-shadow: var(--box-shadow-medium);
}

.large-shadow {
	box-shadow: var(--box-shadow-large);
}

.ex-large-shadow {
	box-shadow: var(--box-shadow-extra-large);
}

.large-2x-shadow {
	box-shadow: var(--box-shadow-large-2x);
}

.large-3x-shadow {
	box-shadow: var(--box-shadow-large-3);
}

a {
	color: var(--primary-base);
	text-decoration: none;
}

p a {
	color: var(--grey-700);
}

a:hover,
a:focus,
a:active {
	color: var(--dark);
}

p:hover a,
p:focus a {
	color: var(--primary-base);
}

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

.heading-off>span,
.heading-off {
	pointer-events: none;
}

.heading-off>span,
.heading-off,
.heading-off svg,
.heading-off path {
	color: var(--grey-300);
	stroke: var(--grey-300);
}

.heading-off>span svg {
	opacity: 0.20;
}

.preview-show .heading-off {
	display: none !important;
}

/* primary button */

.primary-btn, .btn-primary {
    background-color: var(--primary-base);
    border: solid 1px var(--primary-base);
    color: var(--white);
    font-size: 14px !important;
    padding: 7px 12px !important;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    font-weight: 600 !important;
    transition: ease-in-out all 0.125s;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 20px;
    border-radius: var(--radius-global-sm);
}

button.cancelBtn.btn.btn-sm.btn-default {
	background-color: var(--white);
    border: solid 1px var(--grey-300);
    color: var(--grey-700);
    font-size: 14px !important;
    padding: 7px 12px !important;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    font-weight: 600 !important;
    transition: ease-in-out all 0.125s;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 20px;
    border-radius: var(--radius-global-sm);
}

button.cancelBtn.btn.btn-sm.btn-default:hover,
button.cancelBtn.btn.btn-sm.btn-default:focus {
	background-color: var(--grey-50);
}

.primary-btn.small {
	font-size: 14px;
	padding: 8px 14px;
	line-height: 20px;
}

.primary-btn.large {
	font-size: 18px;
	padding: 16px 28px;
	line-height: 28px;
}

.primary-btn:hover,.btn-primary:hover,.btn:hover,
.primary-btn:focus,.btn-primary:focus,.btn:focus,
.primary-btn:active,.btn-primary:active,.btn:active {
	background-color: var(--primary-600);
	border-color: var(--primary-600);
	color: var(--white);
}

.primary-btn.white-btn {
	background-color: var(--white);
	border-color: var(--white);
	color: var(--primary-base);
}

.primary-btn.white-btn.grey-txt {
	color: var(--grey-700);
}

.primary-btn .disable {
	opacity: 0.2;
	cursor: none;
	pointer-events: none;
}

.primary-btn:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* grey button */

.grey-btn {
	background-color: var(--grey-100);
	border: solid 1px var(--grey-100);
	color: var(--grey-700);
	font-size: 14px;
	padding: 7px 12px;
	box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
	font-weight: 600;
	transition: ease-in-out all 0.125s;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 20px;
	border-radius: var(--radius-global-sm);
}

.grey-btn.small {
	font-size: 14px;
	padding: 8px 14px;
	line-height: 20px;
}

.grey-btn.large {
	font-size: 18px;
	padding: 16px 28px;
	line-height: 28px;
}

.grey-btn:hover,
.grey-btn:focus,
.grey-btn:active {
	background-color: var(--grey-200);
	border-color: var(--grey-200);
	color: var(--grey-700);
}

.grey-btn.white-btn {
	background-color: var(--white);
	border-color: var(--white);
	color: var(--primary-base);
}

.grey-btn.white-btn.grey-txt {
	color: var(--grey-700);
}

.grey-btn .disable {
	opacity: 0.2;
	cursor: none;
	pointer-events: none;
}

/* danger button */

.danger-btn {
	background-color: var(--error-50);
	border: solid 1px var(--error-50);
	color: var(--error-600);
	font-size: 14px;
	padding: 7px 12px;
	box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
	font-weight: 600;
	transition: ease-in-out all 0.125s;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 20px;
	border-radius: var(--radius-global-sm);
}

.danger-btn:hover svg,
.danger-btn:hover path,
.danger-btn:focus svg,
.danger-btn:focus path {
	stroke: var(--white);
	transition: ease-in-out all 0.125s;
}

.danger-btn:hover,
.danger-btn:focus {
    background-color: var(--error-700);
    border-color: var(--error-700);
}

.danger-btn.small {
	font-size: 14px;
	padding: 8px 14px;
	line-height: 20px;
}

.danger-btn.large {
	font-size: 18px;
	padding: 16px 28px;
	line-height: 28px;
}

.danger-btn:hover,
.danger-btn:focus,
.danger-btn:active {
	background-color: var(--error-base);
	border-color: var(--error-base);
	color: var(--white);
}

.danger-btn .disable {
	opacity: 0.2;
	cursor: none;
	pointer-events: none;
}

/* danger button dark */

.danger-dark-btn {
	background-color: var(--error-base);
	border: solid 1px var(--error-base);
	color: var(--white);
	font-size: 14px;
	padding: 7px 12px;
	box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
	font-weight: 600;
	transition: ease-in-out all 0.125s;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 20px;
	border-radius: var(--radius-global-sm);
}

.danger-dark-btn svg,
.danger-dark-btn path,
.danger-dark-btn:hover svg,
.danger-dark-btn:hover path,
.danger-dark-btn:focus svg,
.danger-dark-btn:focus path {
	stroke: var(--white);
	transition: ease-in-out all 0.125s;
}

.danger-dark-btn.small {
	font-size: 14px;
	padding: 8px 14px;
	line-height: 20px;
}

.danger-dark-btn.large {
	font-size: 18px;
	padding: 16px 28px;
	line-height: 28px;
}

.danger-dark-btn:hover,
.danger-dark-btn:focus,
.danger-dark-btn:active {
	background-color: var(--error-600);
	border-color: var(--error-600);
	color: var(--white);
}

.danger-dark-btn .disable {
	opacity: 0.2;
	cursor: none;
	pointer-events: none;
}

/* warning button */

.warning-btn {
	background-color: var(--warning-base);
	border: solid 1px var(--warning-base);
	color: var(--white);
	font-size: 14px;
	padding: 7px 12px;
	box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
	font-weight: 600;
	transition: ease-in-out all 0.125s;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 20px;
	border-radius: var(--radius-global-sm);
}

.warning-btn.small {
	font-size: 14px;
	padding: 8px 14px;
	line-height: 20px;
}

.warning-btn.large {
	font-size: 18px;
	padding: 16px 28px;
	line-height: 28px;
}

.warning-btn:hover,
.warning-btn:focus,
.warning-btn:active {
	background-color: var(--warning-600);
	border-color: var(--warning-600);
	color: var(--white);
}

.warning-btn .disable {
	opacity: 0.2;
	cursor: none;
	pointer-events: none;
}

/* secondary button */
.secondary-btn {
	background-color: var(--white);
	border: solid 1px var(--primary-base);
	color: var(--primary-base);
	font-size: 14px;
	padding: 7px 12px;
	box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
	font-weight: 600;
	transition: ease-in-out all 0.125s;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 20px;
	border-radius: var(--radius-global-sm);
}

.secondary-btn.small {
	font-size: 14px;
	padding: 8px 14px;
	line-height: 20px;
}

.secondary-btn.large {
	font-size: 18px;
	padding: 16px 28px;
	line-height: 28px;
}

.secondary-btn:hover,
.secondary-btn:focus {
	color: var(--primary-base);
	background-color: #F5F8FF;
	border-color: var(--primary-600);
}

.secondary-btn .disable {
	opacity: 0.2;
	cursor: none;
	pointer-events: none;
}

.secondary-btn:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}


/* secondary grey btn */

a.secondary-btn.grey,
button.secondary-btn.grey {
	border-color: var(--grey-300);
	color: var(--grey-700);
}

button.secondary-btn.grey:hover,a.secondary-btn.grey:hover,
button.secondary-btn.grey:focus,a.secondary-btn.grey:focus {
	background-color: var(--grey-50);
	color: var(--grey-800);
}

/** secondary btn small */

.secondary-btn.grey-small {
    border-color: var(--grey-300);
    color: var(--grey-700);
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    height: 36px;
    min-width: 98px;
}

.secondary-btn.grey-small:hover {
	background-color: var(--white);
}

.content-section {
	margin: 0 auto;
	max-width: 1096px;
	width: 100%;
	padding: 0 12px 0;
}

.content-box {
    background: var(--white);
    display: block;
    border-radius: var(--radius-global-md);
    /* margin-top: 24px; */
    position: relative;
    left: 0;
}

.content-box.with-border {
	border: solid 1px var(--grey-200);
	box-shadow: none;
}

.chart-blog {
    display: flex;
    flex-flow: column;
}

.content-section.with-top-header {
	padding-top: 64px;
}

.sticky-sidebar.sticky-section .content-box {
	/*  margin-top: 0; */
}

/* border-button */

.border-button {
    background-color: var(--white);
    border: solid 1px var(--grey-200);
    padding: 9px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: var(--primary-base);
    font-weight: 600;
    line-height: 24px;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    border-radius: var(--radius-global-sm);
	transition: ease all 0.25s;
}

.border-button:hover, .border-button:focus {
    color: var(--primary-base);
    border-color: var(--grey-300);
    background: var(--grey-50);
}

.sticky-sidebar {
	position: relative;
	top: 0;
	padding-top: 1px;
	height: calc(100vh - 65px);
	padding-bottom: 72px;
	width: 100%;
}

.sticky-sidebar.sticky-section {
	height: 100vh;
}

/* End Basic css */

/* sidebar css **/

body.has-sidebar .main {
	padding-left: 80px;
	position: relative;
    display: contents;
}

.sidebar-nav {
	background: var(--white);
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	border-right: 2px solid #EEF2F6;
	border: none;
	transition: ease all 0.125s;
}

.has-sidebar .sidebar-nav {
    opacity: 1;
    width: 80px;
    visibility: visible;
    z-index: 1;
}

/* tabbar css **/

.tabbar-menu {
	background: var(--white);
	padding: 12px 0;
	border-radius: var(--radius-global);
	margin-top: 24px;
}

.tabbar-menu ul {
	display: flex;
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
	line-height: 150%;
	letter-spacing: 0.2px;
}

.tabbar-menu ul li {
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.tabbar-menu ul li button {
	width: 100%;
	text-align: center;
	padding: 10px 10px;
	color: var(--primary-600);
	border-radius: var(--radius-global);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 12px;
}

.tabbar-menu ul li button svg {
	margin-right: 6px;
}

.tabbar-menu ul li button.active {
	background: var(--primary-50)
}

/** profile page css **/

.profile-content-section>div.row {
	justify-content: center;
}

.left-profile-section {
	max-width: 448px;
}

span.page-lable {
	background-color: var(--primary-25);
	border: solid 1px var(--primary-100);
	border-radius: var(--radius-global-sm);
	font-size: 14px;
	font-weight: 500;
	line-height: 28px;
	padding: 0 10px;
	color: var(--primary-base);
	height: 28px;
	display: flex;
	align-items: center;
}

.profile-cover-image {
    /** min-height: 174px; **/
    width: 100%;
    border-radius: 12px 12px 0 0;
    background-size: cover;
    background-position: center center;
    /* background-color: var(--primary-base); */
    background-color: var(--white);
    overflow: hidden;
}


.profile-info {
	padding: 24px;
	display: flex;
	flex-flow: column;
}

.profile-image {
	position: relative;
	margin-bottom: 4px;
}

.profile-cover-image+.profile-info {
    margin-top: -100px;
}

.profile-image img {
    border: solid #fff 0px;
}

.profile-image img {
	width: 150px;
	height: 150px;
	object-fit: cover;
	border-radius: 150px;
	margin-top: 0;
}

.profile-image::before {
    width: 152px;
    height: 152px;
    content: "";
    position: absolute;
    left: -1px;
    top: -1px;
    border-radius: 150px;
    border: solid #fff 2px;
    display: block;
}

/** .no-cover .profile-image img {
	width: 150px;
	height: 150px;
	border-radius: 150px;
} **/

.profile-image img.icon {
    width: 72px;
    height: 72px;
    position: absolute;
    left: calc(150px - 36px);
    border-radius: 72px;
    object-fit: cover;
    bottom: 0px;
    z-index: 1;
}

.profile-image::after {
    width: 74px;
    height: 74px;
    content: "";
    position: absolute;
    left: calc(150px - 37px);
    bottom: -1px;
    border-radius: 74px;
    border: solid #fff 2px;
    display: block;
    z-index: 1;
}

.profile-image.no_company_pic::after {
  display: none;
}

/** .no-cover .profile-image img.icon {
    width: 72px;
    height: 72px;
	border-radius: 72px;
    position: absolute;
    left: 104px;
    object-fit: cover;
    bottom: 0px;
} **/

/* CHANGED 2026-05-04: dropped max-height/overflow scrollbar. Long bios now show one line + inline "See more" link that opens the #view_more_bio modal (handled in new_ui_connect.blade.php). */
p.bio-content {
    color: var(--grey-600);
    /* overflow: auto;       === removed — caused the ugly inner scrollbar === */
    /* max-height: 95px;     === removed — caused the ugly inner scrollbar === */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ADDED: blue inline "See more" link inside the bio paragraph. */
p.bio-content .bio-see-more {
    color: #4a79f3;
    text-decoration: none;
    cursor: pointer;
}
p.bio-content .bio-see-more:hover {
    text-decoration: none;
}

/* ADDED: full-bio modal body — preserves wrapping for long words / URLs. */
#view_more_bio .bio-full {
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.6;
}

a.profile-edit,button.profile-edit {
	/* width: 40px; */
	/* height: 36px; */
    width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 8px;
	position: absolute;
	right: 0;
	color: var(--grey-700);
	bottom: 0;
	border: solid var(--grey-300) 1px;
	font-size: 14px;
	font-weight: 600;
	background: var(--white);
	line-height: normal;
	box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
	transition: ease all 0.25s;
}

.profile-image a.profile-edit,
.profile-image button.profile-edit {
	min-width: auto;
	padding: 0 12px;
    /* width: 80px; */
	min-width: 80px;
	width: auto;
    height: 40px;
	white-space: nowrap;
	gap: 4px;
}

.profile-image a.profile-edit svg,
.profile-image button.profile-edit svg {
	flex-shrink: 0;
}

a.profile-edit:hover,
a.profile-edit:focus,
button.profile-edit:hover,
button.profile-edit:focus {
	background-color: var(--grey-50);
	color: var(--grey-800);
}

.login-register-btn>a {
	width: calc(50% - 12px);
	display: flex;
	justify-content: center;
	align-items: center;
}

.bottom-edit-bottom .primary-btn,
.bottom-edit-bottom .secondary-btn {
	padding-left: 8px;
	padding-right: 8px;
}

.color-pick-box {
	display: none;
}

.color-pick-box.show {
	display: block;
}

.color-picker input#favcolor {
	position: absolute;
	border: none;
	box-shadow: none;
	outline: none;
	height: 45px;
    width: 50px;
	transform: 0;
	left: -1px;
	top: -1px;
    border-radius: 0 !important;
}

input#favcolor + span {
    background: #fff;
    width: calc(100% - 48px);
    right: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    font-size: 15px;
    font-weight: 400;
}

.color-picker {
	width: 143px;
	height: 44px;
	background-color: var(--white);
	border: solid 1px var(--grey-300);
	border-radius: var(--radius-global);
	overflow: hidden;
	display: flex;
	position: relative;
	padding-left: 48px;
	display: flex;
	align-items: center;
}

input#colorCode, input#colorCode:focus, input#colorCode:hover {
    border: none;
    background: #fff;
    width: 100%;
    position: relative;
    border-radius: 0;
    height: 45px;
}

/* profile details */

.profile-details li span {
	display: flex;
	align-items: center;
	min-width: 105px;
}

.profile-details ul li {
	display: flex;
	align-items: center;
	padding-top: 20px;
}

.profile-details ul li+li {
	padding-top: 20px;
}

.profile-details ul li+li {
	padding-top: 8px;
	overflow: hidden;
}

.profile-details p {
    color: var(--grey-600);
}

.profile-details svg + p {
    color: var(--grey-400);
}

.button-section-bottom {
	display: flex;
	justify-content: space-between;
}

.button-section-bottom a.primary-btn {
	width: calc(50% - 12px);
}

.login-register-btn ul {
	width: 100%;
	display: flex;
	align-items: center;
}

.login-register-btn ul li a {
	width: 100%;
}

.login-register-btn {
	position: absolute;
	width: 100%;
	bottom: 24px;
}

.login-register-btn>a {
	display: flex;
	justify-content: center;
	align-items: center;
}

.sticky-sidebar.sticky-section {
	height: 100vh;
	top: 64px;
	position: sticky;
}

@media (min-width: 992px) {
	#profile-page .sticky-sidebar.sticky-section {
		height: calc(100vh - 64px);
	}
}

.login-register-btn p {
	font-size: 14px;
}

.responsive-login-info p + p::before {
    content: "";
    background: var(--grey-300);
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 10px;
    position: absolute;
    top: calc(50% - 2px);
    left: 0;
}

.responsive-login-info p + p {
    position: relative;
    padding-left: 12px;
    margin-left: -4px !important;
}

.login-register-btn p a {
	color: var(--grey-600);
	display: flex;
	align-items: center;
}

p.power-logo {
    display: flex;
    align-items: center;
    color: var(--grey-400);
}

p.power-logo span {
	margin-top: -2px;
}

p.power-logo svg,
p.power-logo a svg {
    position: relative;
    top: -3px;
    left: 0;
}

.new-power-logo p, .new-power-logo p a { color: var(--grey-400); font-weight: 600; }
.responsive-new-power-logo p, .responsive-new-power-logo p a { color: var(--grey-400); font-weight: 600; }
.login-register-btn .responsive-new-power-logo p a { display: inline; }

.responsive-login-info .login-register-btn {
    max-width: 718px;
    margin: 0 auto 24px;
    position: relative;
    top: 0;
}

.responsive-login-info .login-register-btn {
    display: none;
    justify-content: center;
}

.responsive-login-info .col-12.d-flex.justify-content-center + .col-12.d-flex.justify-content-center {
    margin-top: 16px;
}

.responsive-login-info {
    margin-top: 24px;
}

.responsive-login-info p {
    margin: 0 !important;
}

/* profile conntect btn section */

.connect-btn a.profile-edit,
.connect-btn button.profile-edit {
    position: relative;
    top: 0;
    height: 40px;
}

.connect-btn {
	display: flex;
	margin-top: 4px;
	margin-bottom: 20px;
	display: none;
    gap: 10px;
}

.profile-conntect-page .connect-btn {
	display: flex;
	margin-bottom: 0px;
}

.profile-conntect-page .connect-btn+div.profile-details {
	border-top: none;
}

.profile-conntect-page .connect-btn+div.profile-details {
	border-top: none;
	margin-top: 0;
}

.preview-show .connect-btn {
	display: flex;
	margin-bottom: 0;
	margin-top: 20px;
}

.preview-show .connect-btn+.profile-details {
	border-top: none;
	margin-top: 0;
}

.connect-btn a.primary-btn {
    /* width: calc(100% - 54px); */
    height: 40px;
    position: relative;
    left: 0;
}
.connect-btn >* { /* height: 40px; */ flex: 1 1 50%; min-width: 0; }
.connect-btn div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.connect-btn-new svg { flex-shrink: 0; }
.connect-btn-new .btn-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.primary-btn-styling .btn-heading, .secondary-btn-styling .btn-heading { font-size: 16px; font-weight: 500; }

.back-to-edit {
	display: none;
}

.preview-show .preview-section {
	display: none;
}

.preview-show .back-to-edit {
	display: flex;
}

.profile-details {
	border-top: solid var(--grey-200) 1px;
	margin-top: 20px;
}

/** accordian style **/

a.drag-toggle-button {
	width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-global-sm);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    border: solid var(--grey-300) 1px;
    background-color: var(--white);
    padding: 0;
	transition: ease all 0.25;
}

a.drag-toggle-button:hover, a.drag-toggle-button:focus {
	background-color: var(--grey-50);
	box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
	border-color: var(--grey-300);
}

.accordion-button::after {
	display: none;
}

.accordion-header {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

.preview-show .accordion-header {
	margin-bottom: 0;
}

div#Accordion-app.accordion-header {
	margin-bottom: 0;
}

.accordion-header>span {
    align-items: flex-start;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    position: relative;
    padding-top: 6px;
}

.accordion-header>span>span {
    display: flex;
    align-items: center;
    max-width: 90%;
    word-break: break-word;
}

.accordion-header button.accordion-button {
	display: flex;
	justify-content: space-between;
	background: var(--white);
	border-bottom: 1px solid #E3E8EF;
	box-shadow: none;
	border-radius: 8px 8px 0 0;
	align-items: center;
	min-height: 67px;
	cursor: inherit;
}

.accordion-header button.accordion-button span {
	display: flex;
	align-items: center;
}

.accordion-header button.accordion-button span.disable-heading {
	pointer-events: none;
	cursor: inherit;
	opacity: 0.25;
}

.accordion-item {
	border: none;
	background: rgba(255, 255, 255, 0.50);
	padding: 24px;
	border-radius: var(--radius-global-md) !important;
}

.preview-show .accordion-item {
	background: transparent;
	padding: 0;
}

div#accordion-default .accordion-body {
	padding: 0;
}

button.accordion-button[aria-expanded="false"] {
	border-color: transparent;
}

.preview-show .on-preivew-hide {
	display: none !important;
}

.profile-conntect-page .on-preivew-hide {
    display: none;
}

.heading-hide .heading-hide-icon {
	display: none;
}

.heading-hide .heading-show-icon {
	display: block;
}

.button-100 {
	width: 100%;
}

a.grey-link {
	color: var(--grey-400);
}

.profile-conntect-page .accordion-item {
	background: transparent;
	padding: 0;
}

.profile-conntect-page div#accordion-default .accordion-body ul.social-icon-list {
	padding-top: 0;
	margin-top: -12px;
}

/* add social media section css **/

ul.social-icon-list {
	display: inline-block;
	width: calc(100% + 14px);
	margin: -12px -7px -6px;
}

div#accordion-default .accordion-body ul.social-icon-list {
	margin-top: 8px;
}

ul.social-icon-list ul.social-icon-list {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
	margin-top: 0 !important;
}

.preview-show div#accordion-default .accordion-body ul.social-icon-list {
	margin-top: -12px;
	position: relative;
}

ul.social-icon-list li {
	display: flex;
	float: left;
	flex-flow: column;
	align-items: flex-start;
	justify-content: center;
	width: calc(25% - 12px);
	margin: 12px 6px 0;
	height: auto;
	padding: 0;
	background-color: var(--white);
	border: solid 1px var(--grey-200);
	transition: ease all 0.25s;
	border-radius: var(--radius-global-md);
	min-height: 100px;
	position: relative;
	overflow: hidden;
}

ul.social-icon-list li:hover, ul.social-icon-list li:focus {
    background: var(--grey-50);
    border-color: var(--grey-300);
}

ul.social-icon-list li>a {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    padding: 19px 20px;
    justify-content: center;
    color: var(--grey-700);
    border-radius: var(--radius-global-md);
}

ul.social-icon-list a span+span {
    color: var(--grey-700);
    padding: 0;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    word-wrap: break-word;
    overflow: hidden;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0;
    padding-top: 4px;
    position: relative;
    top: 0;
}

ul.social-icon-list a span.website-url {
	font-size: 10px;
	font-style: normal;
	font-weight: 400;
	line-height: 100%;
	color: var(--grey-400);
	margin-top: 2px;
	margin-bottom: 0;
	display: none;
}

span.social-icon {
	display: flex;
	margin-bottom: 0;
	justify-content: flex-start;
	text-align: left;
	align-items: center;
	min-height: 32px;
	margin-right: 12px;
}

span.social-icon svg {
	height: 32px;
	width: 32px;
}

span.social-icon.plus-add {
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	margin-top: 0;
	margin-right: 0;
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
}

span.social-icon.plus-add a {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

span.social-icon.plus-add svg {
	width: auto;
	height: auto;
}


/* website link section css  */

.website-link-column img.img-fluid {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

#Website-links>.accordion-body>button {
	padding: 0;
	width: 100%;
}

.website-link-column .col-md-12 {
	position: relative;
	align-items: center;
}

.link-thumb-icon {
	width: 32px;
	/** background-color: var(--white); **/
	overflow: hidden;
	/** border: solid var(--grey-200) 1px; **/
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 6px;
}

.link-thumb-icon svg {
	width: 42px;
}

.link-thumb-icon img {
	border-radius: var(--radius-global);
}

div#reorder-links-modal .link-thumb-icon {
	width: auto;
}

div#reorder-links-modal .link-thumb-icon img {
	width: 44px;
	height: 44px;
	object-fit: cover;
}

.link-content {
	width: calc(100% - 32px);
	min-height: auto;
	display: flex;
	align-items: flex-start;
	flex-flow: column;
	justify-content: center;
}

.link-content h6+p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: left;
    width: 100%;
    font-size: 10px;
    color: var(--grey-400);
    margin-top: 0;
    position: relative;
    padding-top: 2px;
}

.link-content p.small a {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	display: block;
}

.website-link-column {
	transition: ease all 0.25s;
}

div#Website-links {
	padding-top: 0;
}

.website-link-column .global_links {
    margin-top: 0 !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 18px 20px;
}

div#Website-links .website-link-column {
    background: var(--white);
    border-radius: var(--radius-global-md);
    border: solid var(--grey-200) 1px;
    padding: 18px 20px !important;
    position: relative;
    min-height: 72px;
	display: flex;
    align-items: center;
}

div#Website-links .website-link-column:hover,
div#Website-links .website-link-column:focus {
	background: var(--grey-50);
    border-color: var(--grey-300);
}

#Website-links>.accordion-body>button+button {
    margin-top: 12px;
}

ul.website-link-list {
    margin-top: 12px;
}

/* video section */
.video-player iframe {
    width: 100%;
    border-radius: 12px;
    margin-bottom: -5px;
}
@media (max-width: 767px) {
    .video-player iframe { height: 250px; }
}

.calendar-section iframe {
	width: 100%;
    /* height: 600px; */
	/* bumped from 600px so Calendly's desktop (side-by-side) layout isn't clipped */
	/* bumped from 750px -> 1000px: booking pages with long intake forms were requiring inner scroll */
	height: 800px;
	border-radius: 12px;
	box-shadow: 0px 0.84043px 1.68085px 0px rgba(16, 24, 40, 0.06), 0px 0.84043px 2.52128px 0px rgba(16, 24, 40, 0.10);
	border: solid var(--grey-100) 1px;
}


/** drag dropdown **/
.drag-toggle-button::after {
	display: none;
}

/* floating button */
.flotter-btn {
    position: fixed;
    right: 20px;
    bottom: 85px;
    /* bottom: 90px; */
    /* bottom: 20px; */
    z-index: 11;
}

/* gleap button css start */
div.bb-feedback-button {
    right: 31px !important;
    z-index: 1054;
}
/* gleap button css end */

button.floatting-toggle-btn {
    border: none;
    width: 70px;
    height: 70px;
    background: radial-gradient(146.14% 146.14% at 0% 14.61%, #4A79F3 27.06%, #1348D3 100%);
    border-radius: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: ease-in-out all 0.125s;
    overflow: hidden;
}
button.floatting-toggle-btn svg {
    width: 21px;
}

/** .flotter-btn button.floatting-toggle-btn.active,
.flotter-btn:hover button.floatting-toggle-btn,
.flotter-btn:focus button.floatting-toggle-btn {
	transform: rotate(-45deg);
} **/

.flotter-btn button.floatting-toggle-btn.active {
	transform: rotate(-45deg);
}

.hover-btn {
	position: absolute;
	right: 0;
	width: 207px;
	top: -124px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	transition: ease-in-out all 0.125s;
}

.flotter-btn a.primary-btn {
	width: 100%;
}

.flotter-btn a.primary-btn+a.primary-btn {
	margin-top: 12px;
}

.flotter-btn .hover-btn.active {
	opacity: 1;
	visibility: visible;
	display: block;
}

/** .flotter-btn:hover .hover-btn,
.flotter-btn:focus .hover-btn,
.flotter-btn .hover-btn.active {
	opacity: 1;
	visibility: visible;
	display: block;
} */

/* end floating button */


/** modal style start */
.modal-backdrop {
    background: rgba(0, 0, 0, 0.75);
}

.modal-backdrop + .modal-backdrop {
    display: none;
}

.modal-dialog-centered {
	min-height: 100%;
	max-width: 520px;
}

.modal-backdrop.show {
	opacity: 1;
}

.modal-header {
	justify-content: center;
	position: relative;
}

.modal-title {
	text-align: center;
	line-height: normal;
	font-weight: 600;
	color: var(--grey-700);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
}

.modal-content {
	border: none;
}

.modal-dialog {
	width: 90%;
	border-radius: var(--radius-global);
	border: none;
	box-shadow: none;
	overflow: hidden;
	margin: 0 auto;
}

.modal-header .btn-close {
	position: absolute;
	right: 0;
	top: 0;
	background-image: none;
	width: 40px;
	height: 40px;
	padding: 12px;
	margin: 0;
	opacity: 1;
}

.modal-header {
	justify-content: flex-start;
	position: relative;
	min-height: 64px;
	border-bottom: solid var(--grey-200) 1px;
	padding: 0 65px 0 24px;
}

.modal-body {
	padding: 24px;
}

div#add-social-icon-modal .modal-body {
	padding-top: 2px;
}

.modal-header .btn-close,
.modal-header .btn-close:hover,
.modal-header .btn-close:focus {
	box-shadow: none;
}

.modal ul.social-icon-list {
	margin-top: 0;
	display: flex;
	flex-flow: wrap;
	justify-content: left;
}

#delete-social .modal-header {
	display: flex;
	justify-content: center;
}

/* modal social icon */

#add-social-icon-modal .modal-dialog {
    max-width: 640px;
}

/** modal style end */

/* single add social icon */

.social-info-content {
	max-width: 100%;
	margin: 0 auto;
}

#add-social-info .modal-dialog {
	max-width: 460px;
}


/* add section popup */

div#add-section .modal-dialog {
	max-width: 972px;
}

div#add-text .modal-dialog,
div#edit-text .modal-dialog {
	max-width: 616px;
}

ul.add-section-list {
	margin: 0 -12px;
}

.profile-section-add-column {
	border-radius: var(--radius-global);
	border: solid 1px var(--grey-100);
	display: flex;
	justify-content: space-between;
	min-height: 64px;
	align-items: center;
}

.profile-section-add-column p {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--grey-400);
    line-height: 100%;
    margin-top: 8px;
}

div#add-section .profile-section-add-column span.section-icon svg path {
    /* stroke: var(--grey-400); */
}

span.section-icon {
	width: 64px;
	border-right: solid 1px var(--grey-100);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: ease all 0.125s;
	min-height: 62px;
}

span.add-section-btn button {
	background: var(--grey-50);
	min-height: 62px;
	width: 64px;
	display: flex;
	justify-content: center;
	align-items: center;
}

span.add-section-btn button:hover,
span.add-section-btn button:focus {
	background: var(--grey-100);
}

span.lock-section-btn button {
	background: var(--grey-50);
	min-height: 62px;
	width: 64px;
	display: flex;
	justify-content: center;
	align-items: center;
}

span.lock-section-btn button:hover,
span.lock-section-btn button:focus {
	background: var(--grey-100);
}

span.section-info {
	width: calc(100% - 128px);
	padding: 0 12px;
}

span.section-info h6 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    letter-spacing: 0;
	line-height: normal;
}

/* add multiple section on first signup css start */
div#add-multiple-section .modal-dialog {
	max-width: 972px;
}

div#add-multiple-section .profile-section-add-column span.section-multiple-icon svg path {
    /* stroke: var(--grey-400); */
}

span.section-multiple-icon {
	width: 64px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: ease all 0.125s;
	min-height: 62px;
}

span.section-multiple-info {
	width: calc(100% - 128px);
}

span.section-multiple-info h6 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    letter-spacing: 0;
	line-height: normal;
}

span.section-multiple-info h6.section_title_disable {
    color: var(--grey-400);
}

span.select-section {
    border-right: solid 1px var(--grey-100);
}

span.select-section div {
	min-height: 62px;
	width: 64px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.form-check-custom {
    display: flex;
    align-items: center;
    padding-left: 0;
    margin: 0;
}

.form-check-custom .form-check-input {
    margin: 0;
    float: none;
    flex-shrink: 0
}

.form-check-custom .form-check-input {
    margin: 0;
    float: none;
    flex-shrink: 0
}

.form-check-input:checked:disabled {
    background-color: var(--grey-400);
    border-color: var(--grey-400);
}

input.section-select {
    height: 18px;
    width: 18px;
    background-color: var(--bs-modal-bg);
	border-color: var(--grey-300);
}

span.lock-multiple-section button {
	min-height: 62px;
	width: 64px;
	display: flex;
	justify-content: center;
	align-items: center;
}

span.lock-multiple-section button svg path{
    fill: var(--grey-400);
}
/* add multiple section on first signup css end */

/* manage section **/
div#manage-section .modal-dialog {
	max-width: 456px;
}

.manage-section-column {
	display: flex;
	background: var(--grey-50);
	border: solid 1px var(--grey-100);
	align-items: center;
	border-radius: var(--radius-global);
	overflow: hidden;
}

.manage-section-column span.section-icon {
	background: #fff;
	width: 42px;
}

/** switch button **/

.form-check-input {
	background-color: var(--grey-300);
	border-color: var(--grey-300);
}

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

.form-check-input {
	clear: left;
}

.form-switch.form-switch-sm {
	margin-bottom: 0.5rem;
	/* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-sm .form-check-input {
	height: 1rem;
	width: calc(1rem + 0.75rem);
	border-radius: 2rem;
}

.form-switch.form-switch-md .form-check-input {
	height: 1.5rem;
	width: calc(2rem + 0.75rem);
	border-radius: 3rem;
	margin-top: 0;
}

.form-switch.form-switch-lg {
	margin-bottom: 1.5rem;
	/* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-lg .form-check-input {
	height: 2rem;
	width: calc(3rem + 0.75rem);
	border-radius: 4rem;
}

.form-switch.form-switch-xl {
	margin-bottom: 2rem;
	/* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-xl .form-check-input {
	height: 2.5rem;
	width: calc(4rem + 0.75rem);
	border-radius: 5rem;
}

.form-switch .form-check-input {
	background-image: var(--bs-form-switch-bg-white);
}

.form-switch .form-check-input:hover,
.form-switch .form-check-input:focus {
	box-shadow: none;
	border-color: transparent;
}

#manage-section span.section-info {
	width: calc(100% - 102px);
	padding: 0 12px;
}

.color-picker {
	width: 143px;
	height: 44px;
	background-color: var(--white);
	border: solid 1px var(--grey-300);
	border-radius: var(--radius-global-sm);
	overflow: hidden;
	display: flex;
}

.color-column {
	background: #4A79F3;
	width: 44px;
	height: 44px;
	float: left;
}

span.color-code {
	width: calc(100% - 44px);
	padding: 5px 14px;
	display: flex;
	align-items: center;
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
}

.copy_id {
	position: relative;
}

.copy_id button {
    position: absolute;
    right: 12px;
    height: 100%;
    width: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    right: 1px;
}

.copy_id input {
    padding-right: 36px;
    pointer-events: none;
}

.copy-field input {
    pointer-events: none !important;
}


/** switch button end **/

/* connnect popup */
#connect-popup .modal-dialog {
	width: 458px;
}

div#connect-popup {
    z-index: 9999;
}

p i {
	transition: ease all 0.25s;
}

p[aria-expanded="true"] i {
	transform: rotate(180deg);
}

[data-bs-toggle="collapse"] {
	cursor: pointer;
}

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

.input-holder {
	position: relative;
	width: 100%;
}

input.input {
	padding: 0 14px;
	background: var(--white);
}

/* .input:not(:placeholder-shown).input:not(:focus)+.placeholder,
.input:empty+.placeholder {
	transform: scale(.815) translateY(-26px) translateX(-4px);
	color: var(--grey-400);
} */

.input:not(:placeholder-shown).input:not(:focus) + .placeholder,
.input:empty + .placeholder {
	transform: scale(.815) translateY(-26px) translateX(-4px);
	color: var(--grey-400);
}

.input:focus+.placeholder {
	transform: scale(.815) translateY(-26px) translateX(-4px);
	color: var(--primary-400);
	opacity: 1;
	font-weight: 600;
}

input.input:empty + .placeholder {
	transform: scale(.815) translateY(-26px) translateX(-4px);
}


.placeholder {
	position: absolute;
	top: 10px;
	left: 8px;
	padding: 0 8px;
	background-color: white;
	transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
	color: var(--grey-400);
	opacity: 1;
	font-size: 16px;
	pointer-events: none;
}

.checkbox-content p a {
	color: var(--primary-base);
}

.checkbox-content p a:hover {
	/* text-decoration: underline; */
}

.checkbox-content p a {
    font-weight: 500;
}


/* share profile css */

.copy-field {
    position: relative;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

.copy-field > a {
    flex: 1 1 auto;
    min-width: 0;          /* allow the URL field to shrink so a long URL ellipsises instead of running under the Copy button */
    width: auto;
    z-index: 2;
    position: relative;
    display: flex;
}

.copy-field > a input {
   border-radius: 8px 0 0 8px;
   flex: 1 1 auto;
   min-width: 0;
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.copy-field button {
	position: static;      /* keep the Copy button in flow so it never overlaps the URL field */
	flex: 0 0 auto;
	height: auto;
	width: auto;
	z-index: 1;
}

.qr_code-section {
	text-align: center;
	padding: 0;
}
.qr_code-section .qr_code_img { border-radius: 5px; }
.qr_code-section .qr_download { font-size: 15px; }
.share-list-popup ul li a {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

span.recent-thumb {
	display: flex;
	align-items: center;
}

span.recent-thumb .icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 36px;
	height: 36px;
	background-color: var(--grey-100);
	border-radius: 4px;
	margin-right: 1rem;
}

span.recent-thumb {
    display: flex;
    align-items: center;
    color: var(--grey-700);
    font-size: 14px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0.2px;
}

span.arrow-share-list {
	width: 24px;
	height: 24px;
	justify-content: center;
	align-items: center;
	display: flex;
}

/* user analysitic page css **/

.chart-content p {
	display: flex;
	align-items: center;
}

/* end user analysitic page css **/


/** profile edit page **/

.page-header-section {
    position: fixed;
    width: calc(100% - 80px);
    right: 0;
    background: rgba(255, 255, 255, 0.85);
    padding: 11px 24px;
    top: 0;
    z-index: 999;
    backdrop-filter: blur(4px);
}

/* When sidebar is visible, offset the fixed header */
/* body.has-sidebar .page-header-section {
	left: 80px;
	right: 0;
	width: auto;
} */

/* Prevent header actions from overlapping on mid-size screens */
/* .page-header-section .row {
	align-items: center;
	row-gap: 8px;
}

.page-header-section .share-view-profile-btn {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
}

.page-header-section .share-view-profile-btn > a {
	flex: 0 1 auto;
	max-width: 100%;
} */

ul.navigation-list {
    font-size: 20px;
    font-weight: 600;
    min-height: 42px;
    align-items: center;
    padding-left: 0;
    position: relative;
    top: 0;
}

ul.navigation-list li {
	color: var(--grey-400);
	display: flex;
	align-items: center;
}

.preview-mode {
	display: none !important;
}

.preview-show .edit-mode {
	display: none !important;
}

.preview-show .preview-mode {
	display: block !important;
}

ul.navigation-list li a {
	color: var(--grey-400);
}

ul.navigation-list li.active-page {
	color: var(--grey-700);
}

ul.navigation-list li + li {
    margin-left: 8px !important;
}

#profile-page ul.navigation-list li a,
.contact-view-page ul.navigation-list li a,
.setting-page ul.navigation-list li a,
.analytics_page ul.navigation-list li a {
    color: var(--grey-700);
}

.back-page {
    background-color: var(--primary-50);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-global-sm);
    display: flex;
    color: var(--primary-base);
    justify-content: center;
    align-items: center;
    position: relative;
    margin-right: 12px;
}

.back-page>a {
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.profile-edit-section {
	background-color: var(--white);
	border-radius: var(--radius-global-md);
}

img.profile-image-edit {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 60px;
}

img.cover-image-edit {
	width: 150px;
	height: 60px;
	border-radius: var(--radius-global-sm);
	object-fit: cover;
}

img.logo-image-edit {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 60px;
}

.upload-section {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column;
}

/* Keep profile edit tile labels stable across locales */
body#profile-edit-page .upload-section p a {
	display: block;
	max-width: 200px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
}

.profile-edit-section {
	max-width: 716px;
	margin: 0 auto;
	width: 100%;
	border-radius: var(--radius-global-md);
}

.edit-head-coloum p a {
	color: var(--primary-base);
}

.edit-head-coloum {
	border-bottom: solid var(--grey-200) 1px;
}

.upload-section > p + div + p {
    display: none;
}

.upload-section {
	padding: 16px 0;
}

.upload-image img {
	width: 100%;
	border-radius: var(--radius-global);
	object-fit: cover;
}

.upload-image.small-sqaure img {
    width: 160px;
    margin: 0 auto;
    border-radius: 100%;
    height: 160px;
}

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

.bottom-edit-bottom {
    background: rgba(255, 255, 255, 0.85);
    padding: 16px 16px;
    position: fixed;
    bottom: 0;
    width: 100%;
    backdrop-filter: blur(4px);
    z-index: 1;
}

button#edit_form_submit_btn {
	/* margin-top: 3px; */
	white-space: nowrap;
}

.disable p {
	opacity: 0.35;
	pointer-events: none;
	cursor: none;
}

/** profile edit page end **/

.link-content h6 {
    font-weight: 500;
    text-align: left;
}

/* only for edit section css */


/* only for edit section css end */


/* embed popup style */
.embed-popup ul li {
	display: flex;
	align-items: center;
	font-size: 16px;
}

.embed-popup ul li a {
	color: var(--grey-700);
}

.embed-popup ul li a:hover,
.embed-popup ul li a:focus {
	color: var(--primary-base);
}

span.recent-thumb img {
	width: 24px;
	height: 24px;
	border-radius: 4px;
}

/* end embed popup style */

/* connect popup style **/

p.option-field {
	cursor: pointer;
}

p.option-field + div {
    height: 0;
    overflow: hidden;
    transition: ease all 0.25s;
    opacity: 0;
}

p.option-field.show + div {
    height: auto;
    opacity: 1;
}

p.option-field + div .intl-tel-input {
    margin-bottom: 0 !important;
}

.option-field.show i {
    transform: rotate(-180deg);
    position: relative;
    top: 1px;
}

.modal.show {
    backdrop-filter: blur(0px);
}

.preview-section,.login-phone,.back-to-edit {
    margin-right: 12px !important;
}

.qr_code_loader{
    text-align: center;
    padding: 2rem;
}

a[disable] {
    opacity: 0.4;
	cursor: default;
}

a.grey-btn.back-btn {
    width: 36px;
    display: flex;
    height: 36px;
    padding: 0;
    justify-content: center;
    align-items: center;
    background: rgba(255,255,255,0.85);
    border-color: var(--grey-300);
    position: absolute;
    left: 16px;
    top: 16px;
    z-index: 1;
}

.no-cover a.grey-btn.back-btn {
    top: 0;
    left: 0;
    border: solid var(--grey-300) 1px;
}

a.grey-btn.back-btn svg,a.grey-btn.back-btn svg path {
	stroke: var(--grey-700);
}

.no-cover a.grey-btn.back-btn {
    top: 0;
    left: 0;
    border: solid var(--grey-300) 1px;
    background-color: var(--white);
}

/*
@media (min-width: 992px) {

	.modal-body button svg {
		width: 20px;
		height: 20px;
	}

	.modal-body button {
		width: auto;
	}

	.modal-body > form div.row + .row > .col-sm-6 {
		width: auto;
	}

	.modal-body > form div.row + .row {
		justify-content: flex-end;
	}
	.modal-body > form div.row + .row > .col-sm-6 + .col-sm-6 {
		margin-left: -4px;
	}

} */

/* modile */

@media (max-width: 767px) {

	.preview-section,.back-to-edit {
		margin-right: 0px !important;
	}

	ul.social-icon-list li {
		width: calc(50% - 12px);
		min-height: auto;
		flex-flow: inherit;
		justify-content: flex-start;
		align-items: center;
	}

	ul.social-icon-list li>a {
		display: flex;
		flex-flow: initial;
		align-items: center;
		width: 100%;
		justify-content: center;
		color: var(--grey-700);
		border-radius: var(--radius-global-sm);
		padding: 16px 16px;
	}

	ul.social-icon-list li.on-preivew-hide {
		padding-top: 12px;
		padding-bottom: 12px;
		min-height: 64px;
	}

	.content-section.with-top-header {
		padding-bottom: 0;
	}

	.content-section.with-top-header {
		padding-top: 65px;
	}

	img.profile-image-edit {
		width: 98px;
		height: 98px;
		border-radius: 98px;
	}


	img.logo-image-edit {
		width: 98px;
		height: 98px;
		border-radius: 98px;
	}

	img.cover-image-edit {
		width: 320px;
		height: 128px;
	}

	.upload-section {
		padding: 0;
	}

	.upload-section.cover {
		margin-top: 24px;
	}

	.website-link-column .global_links {
		padding-left: 16px;
		padding-right: 16px;
	}

	.sm-width-100 {
      width: 100%;
	}

	.edit-head-coloum p {
		line-height: 125%;
	}

}

/* mobile modules css */

@media (max-width: 767px) {

	.xs-order-1 {
		order: 1;
	}

    .xs-order-0 {
		order: 0;
        margin-right: 5px;
	}

	.profile-conntect-page {
		margin-bottom: 45px;
	}

	/* global css */

	.accordion-item {
		max-width: 448px;
		margin-left: auto;
		margin-right: auto;
		padding: 16px;
	}

	.tabbar-menu {
		max-width: 448px;
		margin-left: auto;
		margin-right: auto;
	}

	.modal-dialog-centered {
		align-items: flex-end;
	}

	.modal-dialog,
	.modal-content {
		max-width: 100% !important;
		width: 100%;
		border-radius: 8px 8px 0 0;
	}

	/* bumped from 600px -> 750px mobile to match the desktop bump and avoid inner scroll on long booking forms */
	.calendar-section iframe {
		height: 750px;
        /* height: 600px; */
	}

	button.floatting-toggle-btn {
		width: 60px;
		height: 60px;
	}

	button.floatting-toggle-btn svg {
		width: 24px;
		height: 24px;
	}

	.button-section-bottom a.primary-btn {
		width: 100%;
	}

	.grey-500 {
		color: var(--grey-base);
	}

	/* global css end */

	/* module responsive */

	/* website add section css **/

	.website-link-column .flex-column {
		padding-top: 0.75rem;
		padding-bottom: 0.5rem;
	}

	.website-link-column .flex-column>* {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.embed-popup .flex-column>* {
		padding-left: 0;
		padding-right: 0;
	}

	ul.social-icon-list a span+span {
		margin-top: 0px !important;
		padding: 0;
	}

	div#accordion-default .accordion-body ul.social-icon-list {
		margin-top: 4px;
	}

	span.social-icon.plus-add a {
		min-height: 64px;
	}

	span.social-icon.plus-add {
		justify-content: center;
		align-items: center;
		margin-right: auto;
		margin-left: auto;
		min-height: auto;
	}

	/* website add section css end **/

	.responsive-login-info .login-register-btn {
		max-width: 445px;
		margin: 0 auto 24px;
		position: relative;
		top: 0;
	}

	.profile-edit-section textarea {
		margin-bottom: 0;
	}


}

@media (min-width: 767px) {
	.show-more {
		display: none !important;
	}

}

/*##################
  Responsive CSS
####################*/

/*-- Tablet Responsive --*/
@media (min-width: 768px) and (max-width: 991px) {

	.page-header-section {
		width: 100%;
	}

	.tabbar-menu {
		max-width: 720px;
		margin-left: auto;
		margin-right: auto;
	}

	.left-profile-section {
		max-width: 720px;
		margin-left: auto;
		margin-right: auto;
	}

	.accordion-item {
		max-width: 720px;
		margin-left: auto;
		margin-right: auto;
	}

	.content-section {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.login-register-btn {
		display: none;
	}

	.sticky-sidebar.sticky-section {
		height: auto;
	}

	.sticky-sidebar {
		position: relative;
		height: auto;
		padding-bottom: 0;
	}

	.profile-cover-image {
		min-height: 288px;
	}


}

/*-- End Tablet Horizontal Responsive --*/


/* Global CSS Mobile */

@media (max-width: 575px) {

	/* analystic page */

	.chart-content {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: inherit;
	}

	.chart-content h2 {
		margin-bottom: 0 !important;
	}

	.content-box.with-border p {
		margin-bottom: 8px;
	}

	img.cover-image-edit {
		width: 275px;
		height: 110px;
	}

}



/* End Global CSS Mobile */


/*-- Mobile Horizontal Responsive --*/
@media (min-width: 576px) and (max-width: 767px) {}

/*-- End Mobile Horizontal Responsive --*/


/*-- Mobile Responsive --*/
@media (max-width: 575px) {

	span.page-lable {
		position: absolute;
		top: calc(50% - 14px);
		display: flex;
		white-space: nowrap;
	}

}

/*-- End Mobile Responsive --*/


/*  sidebar css */

/* icon sidebar width */
.sidebar-nav path {
    stroke-width: 2px;
}
/* icon sidebar width end */

.sidebar-nav {
	background: #1B1B1B;
}

.logo-sidebar {
	/* padding: 21px 14px; */
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
}

.logo-sidebar a img { max-height: 36px; min-height: 36px; max-width: 100px; object-fit: contain; object-position: center; }

.sidebar-content {
	padding: 0;
	height: calc(100% - 136px);
	display: flex;
	flex-flow: column;
	justify-content: space-between;
}

.sidebar-content ul li a {
	padding: 0;
	color: var(--grey-50);
	font-size: 12px;
	font-weight: 500;
	opacity: 0.65;
	line-height: 150%;
	transition: ease all 0.5s;
	display: flex;
	flex-flow: column;
	text-align: center;
	height: 70px;
	align-items: center;
	justify-content: center;
	position: relative;
}

.sidebar-content ul li.active a::before {
	content: "";
	display: block;
	width: 3.5px;
	height: 42px;
	position: absolute;
	left: 0;
	background: #ccc;
	top: calc(50% - 21px);
	border-radius: 0 4px 4px 0;
}

.sidebar-content ul li a:hover,
.sidebar-content ul li a:focus,
.sidebar-content ul li.active a {
	opacity: 1;
	background-color: #292929;
}

.sidebar-content ul li a span {
	margin-top: 8px;
}

.user-infor {
	position: absolute;
	bottom: 0;
}

.user-infor img {
	width: 40px;
	border-radius: 40px;
	height: 40px;
	object-fit: cover;
}

.user-infor {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 8px 10px 20px 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.user-infor .user {
	color: #fff;
	font-size: 0;
	font-weight: 400;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
	display: block;
	line-height: normal;
}


.user-infor ul.dropdown-menu {
	min-width: 188px;
}

li.logout {
	border-top: solid #EAECF0 1px;
	margin-top: 4px;
	padding-top: 4px;
}


.sidebar-nav.responsive-menu {
	display: none;
}

.sticky-sidebar {
    position: sticky;
}

ul.social-icon-list li.temp-app {
	background-color: #EAECF0;
	border-color: #EAECF0;
}

div#Website-links .website-link-column.temp-website-link {
	background-color: #EAECF0;
	border-color: #EAECF0;
}

.preview-show ul.social-icon-list li.temp-app {
	background-color: var(--white);
    border: solid 1px var(--grey-200);
}

.preview-show div#Website-links
.website-link-column.temp-website-link {
	background-color: var(--white);
    border: solid 1px var(--grey-200);
}

.preview-show ul.social-icon-list li.temp-app:hover,
.preview-show ul.social-icon-list li.temp-app:focus {
    background: var(--grey-50);
    border-color: var(--grey-300);
}


.preview-show div#Website-links
.website-link-column.temp-website-link:hover,
.preview-show div#Website-links
.website-link-column.temp-website-link:focus {
    background: var(--grey-50);
    border-color: var(--grey-300);
}

.preview-show button.tooltip,
.preview-show a.tooltip {
	display: none;
}

button.tooltip {
    position: absolute;
    right: 7px;
    top: 5px;
    opacity: 1;
    z-index: 1;
}

a.tooltip {
    position: absolute;
    right: 7px;
    top: 5px;
    opacity: 1;
    z-index: 1;
}

.width-auto-right {
    width: auto;
    float: right;
}

@media (max-width: 767px) {

	.page-header-section {
		width: 100%;
		padding: 13px 16px;
	}

	.m-hidden {
		display: none;
	}

	/* table mobile */

	.responsive-table {
		height: auto;
	}

	.responsive-table table {
		margin-bottom: 0;
		min-width: 720px;
	}

	/* table mobile end */

	.tabbar-menu {
		margin-top: 12px;
	}

	.content-section {
		padding-left: 16px;
		padding-right: 16px;
	}

	.profile-info {
		padding-top: 0;
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 20px;
	}

	.profile-cover-image+.profile-info {
		margin-top: -75px;
	}

	.login-register-btn {
		display: none;
	}

	.sticky-sidebar.sticky-section {
		height: auto;
	}

	.sticky-sidebar {
		position: relative;
		height: auto;
		padding-bottom: 0;
	}

	.content-toggle.hidden {
		transition: ease all 0.5s;
		display: block;
		min-height: 85px;
		opacity: 1;
		visibility: visible;
		height: auto;
	}

	.content-toggle {
		height: 70px;
		transition: ease all 0.5s;
		overflow: hidden;
	}

	.preview-show .profile-details.content-toggle {
		height: auto;
	}

	.show-more.main-btn {
		background-image: linear-gradient(180deg, rgba(2,0,36,0) -40%, rgba(255,255,255,1) 75%);
		position: absolute;
		bottom: 0;
		width: 100%;
		left: 0;
		padding-bottom: 24px;
		padding-top: 10px;
		border-radius: 8px;
	}

	.preview-show .show-more.main-btn {
		display: none !important;
	}

	.content-toggle.hidden + .show-more.main-btn {
		position: relative;
		padding-bottom: 0;
		padding-top: 16px;
	}

	span.show-less {
		display: none;
	}

	button.simple-content-link.hidden span.show-less {
		display: block;
	}

	button.simple-content-link.hidden span.show-more {
		display: none;
	}

	a.drag-toggle-button svg {
		width: 14px;
		height: 14px;
	}

	.form-switch.form-switch-md .form-check-input {
		height: 1.25rem;
		width: calc(1.5rem + 0.75rem);
		border-radius: 3rem;
	}

	.form-switch {
		position: relative;
		left: 0;
		margin-bottom: 0;
	}

	.appearance-tooltip {
		position: relative;
		/* left: 10px; */
	}

	ul.dropdown-menu {
		padding: 8px 0;
	}

	.dropdown-menu li a {
		padding: 8px 16px 8px 16px;
	}

	.link-thumb-icon {
		width: 32px;
		height: 32px;
	}

	.link-content {
		min-height: auto;
		width: calc(100% - 32px);
	}

	.border-button {
		padding: 7px 20px;
	}

	.link-content h6+p {
		-webkit-line-clamp: 3;
	}

	.simple-content-link {
		font-size: 16px;
		font-weight: 600;
		line-height: 24px;
	}

	ul.dropdown-menu {
		padding: 10px 0;
	}

	.share-view-profile-btn {
		display: flex;
		justify-content: center;
	}

	/* connect btn sticky */

	.connect-btn.scrolled {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		background: rgba(255, 255, 255, 0.75);
		margin-top: 0;
		padding: 20px 16px;
		z-index: 999;
		backdrop-filter: blur(10px);
	}

	.connect-btn.scrolled + .profile-details {
		padding-top: 45px;
	}

	/* connect btn sticky */

	.content-toggle+.show-more button.simple-content-link {
		margin-top: 12px;
	}

	.profile-details.content-toggle.hidden+.show-more button.simple-content-link {
		margin-top: 0;
	}

	button.simple-content-link.hidden > svg {
		transform: rotateX(180deg);
	}

	div#Website-links .website-link-column {
		padding: 15px 20px !important;
		min-height: 68px;
	}

	ul.navigation-list li {
		color: var(--grey-400);
		display: flex;
		align-items: center;
		font-size: 18px;
	}

	span.page-lable {
		font-size: 12px;
	}

	/* .share-view-profile-btn a.primary-btn {
		display: none;
	} */

	.qr_code-section svg {
		width: 200px;
		height: 200px;
	}

	.width-auto-right {
		width: 100%;
		float: right;
	}

	.width-auto-right button {
		width: 100%;
	}

}

@media (min-width: 992px) {

	body.has-sidebar {
		padding-left: 80px;
	}

	a.grey-btn.back-btn {
		display: none;
	}

}

.modal-body .row {
    justify-content: flex-end;
}

@media (min-width: 767px) {
	.bottom-edit-bottom .secondary-btn {
		height: 36px;
	}

	.modal-content .row .col-sm-6 {
		width: auto;
	}

	.modal-content .row .col-sm-6 + .col-sm-6 {
		margin-left: -8px;
	}

	.modal-content .row {
		justify-content: flex-end;
	}

	.modal-body button svg {
       width: 20px;
	   height: 20px;
	}
}

@media (max-width: 767px) {
	.primary-btn {
		padding: 7px 12px;
		height: 44px;
	}
	/* grey button */

	.grey-btn {
		padding: 7px 12px;
		height: 44px;
	}

	/* danger button */

	.danger-btn {
		padding: 7px 12px;
		height: 44px;
	}

	/* danger button dark */

	.danger-dark-btn {
		padding: 7px 12px;
		height: 44px;
	}

	/* warning button */
	.warning-btn {
		padding: 7px 12px;
		height: 44px;
	}

	/* secondary button */
	.secondary-btn {
		padding: 7px 12px;
		height: 44px;
	}
}

/* tablet responsive **/

@media (max-width: 991px) {

	.page-header-section .secondary-btn {
		height: auto;
	}

	.page-header-section .primary-btn  {
		height: auto;
	}

	/* button end **/

	.sidebar-nav {
		display: none;
	}

	.sidebar-nav.responsive-menu {
		display: block;
	}

	body.has-sidebar .main {
		padding-left: 0;
	}

	.left-profile-section {
		margin: 0 auto;
	}

	.profile-details ul li {
		display: flex;
		flex-flow: column;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.profile-details ul li+li {
		padding-top: 16px;
	}

	.profile-details ul li > span + p {
		margin-left: 0 !important;
		margin-top: 4px;
	}

	/* mobile menu style start **/

	.share-view-profile-btn a.primary-btn {
		display: none;
	}

    .share-view-profile-btn a.login-phone {
		display: none;
	}

	.sidebar-nav.responsive-menu {
		display: block;
		width: 100%;
		height: 72px;
		bottom: 0;
		z-index: 11;
	}

	.sidebar-content {
		padding: 0;
		height: 100%;
		display: flex;
		flex-flow: inherit;
		justify-content: center;
		width: 100%;
	}

	.navbar-top {
		width: 100%;
		height: 100%;
	}

	.navbar-top>ul {
		display: flex;
		height: 100%;
	}

	.navbar-top>ul>li {
		float: left;
		width: 20%;
	}

	.sidebar-nav.responsive-menu {
		display: block;
		width: 100%;
		height: 72px;
		bottom: 0;
		z-index: 11;
		top: inherit;
	}

	body#profile-page {
		padding-bottom: 72px;
	}

	.sidebar-content>ul>li>a {
		opacity: 0.5;
	}

	.sidebar-content>ul>li a:hover,
	.sidebar-content>ul>li a:focus,
	.sidebar-content>ul>li.active a {
		opacity: 1;
		background-color: transparent;
	}

	.sidebar-content ul li.active a::before {
		display: none;
	}

	.sidebar-content>ul>li>a {
		height: 100%;
	}

	.sidebar-content ul>li.share-button-active>a {
		background: linear-gradient(180deg, #6396F7 0%, #2951E7 100%);
		opacity: 1 !important;
		width: 60px;
		height: 60px;
		margin: 0 auto;
		border-radius: 60px;
		margin-top: -8px;
	}

	.sidebar-content ul li a:hover,
	.sidebar-content ul li a:focus,
	.sidebar-content ul li.active a {
		opacity: 1;
		background-color: transparent;
	}

	ul.mobile-menu-style {
		margin-top: 24px;
	}

	ul.mobile-menu-style li {
		width: 100%;
	}

	ul.mobile-menu-style li svg,
	ul.mobile-menu-style li svg path {
		stroke: var(--grey-400);
	}

	ul.mobile-menu-style li+li {
		margin-top: 12px;
	}

	ul.mobile-menu-style li a {
		padding: 10px 24px;
		margin: 0 -24px;
		color: var(--grey-700);
		font-size: 16px;
		font-weight: 500;
		line-height: 100%;
		letter-spacing: 0.2px;
		display: flex;
		align-items: center;
	}

	ul.mobile-menu-style li a:hover,
	ul.mobile-menu-style li a:focus,
	ul.mobile-menu-style li a.active {
		background-color: var(--grey-100);
	}

	/* mobile menu style end **/

	.responsive-login-info .login-register-btn {
		display: flex;
	}
    .new-power-logo { display: none !important; }

	.desktop-login-info {
		display: none;
	}

	.no-cover {
		margin-top: 20px;
	}

	.main.not-login .no-cover {
		margin-top: 0;
	}

	.main.not-login .no-cover .content-box {
		margin-top: 95px !important;
	}

	.no-cover .content-box {
		margin-top: 80px !important;
	}

	.profile-conntect-page .no-cover .content-box {
		margin-top: 90px !important;
	}

}

/* Mid-size screens: slightly tighter header buttons */
/* @media (min-width: 992px) and (max-width: 1199px) {
	.page-header-section .share-view-profile-btn .secondary-btn,
	.page-header-section .share-view-profile-btn .primary-btn {
		padding: 6px 10px !important;
		font-size: 13px !important;
	}
} */

@media (max-width: 991px) {

	body.has-sidebar {
		padding-bottom: 150px;
	}

	body#profile-edit-page.has-sidebar {
		padding-bottom: 70px;
	}

}


#profile-edit-page .sidebar-nav.responsive-menu {
    display: none;
}

.bottom-edit-bottom .secondary-btn {
    padding-top: 5px;
    padding-bottom: 5px;
    width: 100%;
}

.bottom-edit-bottom .secondary-btn svg {
    width: 22px;
    height: 22px;
}

/**  new ccss **/

.use-name-details span {
    color: var(--grey-base);
}

.use-list-block li + li {
    border-top: solid var(--grey-200) 1px;
}

.contact-list-profile .use-list-block li.border .contact_person_time {
    color: #777a89;
}

.contact-list-profile .use-list-block li.border .contact_person_company {
    color: #777a89;
}

.contact-list-profile .use-list-block li.border .contact_person_name {
    color: #212d44;
}

.user-profile-select span {
    color: #777a89;
}

.user-profile-select {
    background-color: #EDEDF1;
    outline: 1px solid #fff;
}


.analytics_box {
    text-align: center;
    padding: 24px;
    background-color: var(--grey-100);
    border-radius: 8px;
}
.analytics_box .info_box {
    display: inline-block;
    top: -10px;
    float: right;
    position: relative;
    right: -10px;
}
.analytics_box .info_box a.profile_info_icon {
    display: flex;
}
.analytics_box .total_views {
    font-size: 42px;
    text-align: left;
    font-weight: 800;
    line-height: normal;
}
.analytics_box .summary {
    text-align: left;
    line-height: normal;
    font-size: 16px;
    color: var(--grey-base);
}

.upgrade_box {
    text-align: left;
    padding: 24px;
    color: #fff;
    border-radius: 8px;
}

  .upgrade_box {
    background: var(--primary-base);
  }
  .upgrade_box h5 {
    margin-bottom: 0;
    font-weight: 700;
    width: auto;
    display: block;
    padding-left: 5px;
    font-size: 20px;
    color: #fff;
    margin-top: 0;
    padding-top: 0;
    line-height: normal;
}

.analytics_box.upgrade_box svg {
    float: left;
    margin-right: 10px;
}

.upgrade_box .upgrade_list {
    display: inline-block;
    width: 100%;
    text-align: left;
}

.upgrade_box .upgrade_list {
	margin-top: 16px;
}

  .upgrade_box .upgrade_list span {
	padding-left: 5px;
	font-size: 14px;
	font-weight: 400;
  }

  .upgrade_box .upgrade_action a {
    color: #fff;
    border: 1px solid #fff;
    margin-top: 24px;
    padding: 8px 0;
    border-radius: 8px;
    display: block;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 540px) {

	.analytics_box .total_views {
		font-size: 34px;
	}

	.analytics_box .summary {
		font-size: 12px;
	}

	.upgrade_box h5 {
		font-size: 18px;
		position: relative;
		top: -2px;
	}

	.analytics_box {
		padding: 16px;
	}

	.analytics_box .summary {
		font-size: 10px;
	}

}


/* digital wallet */

.digital-wallet-column .card {
    border: none;
    position: relative;
}

.digital-wallet-column .card .card-header {
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 0;
    margin: 0;
}

a.passFlag button {
    /* margin-top: 16px; */
    padding: 10px 20px;
    border-radius: 8px;
    background: var(--primary-base);
    border-color: var(--primary-base);
}

a.passFlag button svg {
    width: 21px;
    height: 21px;
    margin-right: 6px;
}

button#profile_pass_generate {
    margin-top: 16px;
    padding: 10px 20px;
    border-radius: 8px;
    background: var(--primary-base);
    border-color: var(--primary-base);
}

.card-image img.light-wallet {
    display: none;
}

.card-image {
    position: absolute;
    right: 8px;
    top: 8px;
}

.digital-wallet-column {
    margin-bottom: 24px;
}

.card.brand-wallet-content {
    /* background: var(--primary-base);
    border: none; */
    background: radial-gradient(100% 100% at 50% 0%, rgba(250, 226, 192, 0.24) 0%, rgba(250, 226, 192, 0) 100%);
    border: 1px solid #FAE2C0;
    border-radius: 16px;
    padding: 24px;
    margin-top: 16px;
}
.brand-wallet-title { border-bottom: #FAE2C0 1px solid; padding-bottom: 16px; }
.brand-wallet-title h5 {
    margin-bottom: 0;
    font-weight: 700;
    width: auto;
    display: block;
    padding-left: 10px;
    font-size: 20px;
    /* color: #fff; */
    color: var(--grey-700);
    margin-top: 0;
    padding-top: 0;
    line-height: normal;
}
.brand-wallet-title svg { flex-shrink: 0 !important; }
.card.brand-wallet-content ul li {
    padding-left: 0;
    font-size: 14px;
    font-weight: 400;
    /* color: #fff; */
    color: var(--grey-700);
    margin-top: 16px;
    display: flex;
    align-items: flex-start;
}

.card.brand-wallet-content ul li svg {
    /* margin-right: 15px; */
    margin-right: 8px;
    flex-shrink: 0 !important;
}

.card.brand-wallet-content button {
    color: #fff;
    border: 1px solid #fff;
    margin-top: 24px;
    padding: 8px 0;
    border-radius: 8px;
    display: block;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
	background: var(--primary-base);
}
.upgraded_card { border: none; background: transparent; }
.upgraded_card .card-header {
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 0;
    margin: 0;
}
.upgraded_card .submit_brand { width: fit-content; margin-top: 16px; }
.share-list-popup svg.dark-share-icon {
    display: none;
}

.copy-field button {
    position: static;      /* in-flow, sits beside the URL field instead of floating over it */
    flex: 0 0 auto;
    height: auto;
    width: auto;
    white-space: nowrap;
    padding: 0 14px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--grey-50);
    border: solid var(--grey-300) 1px;
    border-radius: 0 8px 8px 0;
}

.copy-field button svg {
    margin-right: 6px;
}

span.id-content {
    position: relative; display: flex; align-items: center;
}

span.id-content label {
    margin-left: 15px;
    /* top: -1px; */
    top: 9px;
    margin-bottom: 0;
    position: absolute;
    left: 0;
    font-weight: 400;
}

span.id-content input#set_username {
    /* padding-left: 68px; */
    /* padding-left: 185px; - Now dynamically calculated via JavaScript */
    /* padding-left will be set dynamically via JavaScript with !important */
}
span.id-content input#set_username::placeholder { text-transform: none; }

/* contact innner css **/

.user_notes .use-name-details + .use-name-details {
    margin-top: 12px;
}

.profile-section {
    margin-top: 54px;
    border: none;
}

.contact-view-profile .profile-section {
    background: #fff;
    padding: 0;
    position: relative;
    border-radius: var(--radius-global-md);
    box-shadow: none;
}

.contact-view-profile .profile-logo-main {
    width: 100%;
    height: 100%;
    min-height: 0;
    justify-content: center;
    text-align: center;
    display: flex;
}

.user-name-sec {
    text-align: center;
}

.profile-logo {
    position: relative;
    width: 100px;
    height: 100px;
    right: 0;
    margin: -50px auto 0px;
    border-radius: 100px;
}


.profile-logo span {
    width: 100px;
    height: 100px;
    max-width: 100%;
    border-radius: 100px;
    background-color: var(--grey-200);
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 40px;
    color: var(--grey-700);
    font-weight: 400;
    text-transform: uppercase;
    border: solid #fff 2px;
}

.user-name-sec p {
    text-align: center;
}

.edit-main-btn {
    flex-flow: column;
}

.edit-main-btn {
    display: flex;
    justify-content: center;
    padding-bottom: 24px;
}

.contact_view_btns {
    padding: 0;
    margin: 0;
}
 .profile-section ul li {
    display: inline-block;
    padding: 0 15px;
}

.contact_view_btns span.svg_bg {
    background: var(--grey-100);
    border-radius: 4px;
    width: 50px;
    height: 50px;
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

ul.text-center.contact_view_btns {
    margin-top: 16px;
}

h3.headding-h1 + p {
    font-size: 16px;
}

h3.headding-h1 + p a {
	color: var(--primary-base);
}

.contact_view_btns span.titles {
    margin-top: 16px;
    display: block;
    color: var(--grey-700);
}

.contact-details-page .profile-edit-section {
    background: transparent;
}
.main-content.withbg {
    background: #fff;
    margin-top: 24px;
    border-radius: 8px;
}

.contact-view-profile .main-content {
    padding: 24px;
}


.contact-view-profile .contact-view-form .group-flied {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}


.contact-view-profile .contact-view-form .group-flied + .group-flied {
    margin-top: 24px;
}

.contact-view-profile .contact-view-form .group-flied .info_div {
    flex: auto;
    padding-left: 0;
}

label.contact_title {
    margin-right: 12px;
    min-width: 80px;
}

.contact-view-profile .contact-view-form .group-flied .info_div label.contact_title {
    color: #777a89;
    display: block;
}

.contact-view-form .group-flied label {
    padding-bottom: 0;
    margin-bottom: 0;
}

.contact-view-profile .note_header_section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.contact-view-profile .note_header_section h2 {
    padding-bottom: 0;
	font-weight: 600;
    font-size: 18px;
}

.note-book-text h2 {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    padding-bottom: 20px;
    margin: 0;
}

.user_notes .use-name-details {
    padding: 20px;
    background-color: #F8F8FA;
    border-radius: 10px;
    margin-left: 30px;
    position: relative;
}

.user_notes .use-name-details:before {
    content: "";
    width: 15px;
    height: 15px;
    position: absolute;
    background: var(--primary-base);
    border-radius: 100%;
    left: -2rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0px;
}

.contact-view-profile .user_notes .contact_view_time {
    font-size: 12px;
    font-weight: 400;
    padding-bottom: 5px;
    display: block;
}

.contact-view-profile .user_notes .contact_view_message {
    font-size: 14px;
    font-weight: 400;
}

.profile-logo img {
    width: 100%;
    border-radius: 100px;
}

.companylogo {
    display: none;
}

/* contact innner css end **/

.website-link-column a.tooltip svg path {
    stroke: #98A2B3;
}

ul.social-icon-list.left-list {
    justify-content: flex-start;
}


/* contact new css */
.search-form {
    position: relative;
}

.search-form #filter_contact {
    position: absolute;
    right: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    font-size: 18px;
}

i.fa.fa-search.search-icon-se {
    position: absolute;
    right: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    font-size: 16px;
}

.search-form {
    margin-bottom: 24px;
    position: relative;
}

.use-list-block {
    margin: 0px;
    padding: 0px;
}

.use-list-block > li {
    display: flex;
    /* align-items: center; */
    margin-top: 0px;
    padding: 12px 0;
}

.contact-list-profile .use-list-block li.border {
    align-items: center;
}

.user-profile-select {
    width: 50px;
    flex: 0 0 50px;
    height: 50px;
    border-radius: 50px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.use-list-block > li > .use-name-details:nth-child(2) {
    width: calc(100% - 198px);
}

.use-list-block > li > .use-name-details:nth-child(3) {
    width: 120px;
    text-align: left;
    padding: 0 12px;
}

.use-list-block > li > .use-name-details:nth-child(4) {
    width: 36px;
}

.user-profile-select span {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 22px;
}

.use-name-details h4 {
    font-size: 15px;
    font-weight: 500;
}

.contact-list-profile .use-list-block li.border .contact_person_name {
    font-size: 16px;
    font-weight: 600;
}

.use-name-details span {
    font-weight: 400;
    font-size: 12px;
}

.contact-list-profile .use-list-block li.border .contact_person_company {
    font-size: 14px;
}

.contact-list-profile .use-list-block li.border .contact_person_time {
    font-size: 12px;
}

.user-profile-select img {
    border-radius: 50%;
    width: 50px;
    height: 50px;
}

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

.use-list-block li:last-child {
    border-bottom: none !important;
	margin-bottom: 0;
    padding-bottom: 0;
}

.use-name-details.col-3 {
    margin-right: 10px;
    margin-left: -10px;
}

@media (max-width: 640px) {

	.use-name-details h4 {
		font-size: 14px;
	}

	.use-list-block > li > .use-name-details:nth-child(2) {
		width: calc(100% - 110px);
	}

	.use-list-block > li > .use-name-details:nth-child(3) {
		width: 90px;
	}

}

div.intl-tel-input {
    margin-bottom: 0;
}

/* contact new css end */

.profile-edit-section textarea {
    margin-bottom: -5px;
}

.popup-btn,.popup-btn:hover,.popup-btn:focus {
	display: flex;
    align-items: center;
	color: var(--grey-base);
}

#confirm-invite span {
    margin: 0 auto;
    width: 70px;
    height: 70px;
    background: var(--grey-100);
    padding: 0;
    border-radius: 50px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

#confirm-invite p {
    text-align: center;
    margin-bottom: 0;
    margin-top: 16px;
    font-size: 16px;
}

.no-cover .content-box .profile-image {
    margin-top: -100px;
}

.no-cover .content-box {
    margin-top: 100px;
}

a.social_links.grey-link li span {
    margin: 0 20px;
    width: calc(100% - 40px);
    padding: 0;
    text-align: left;
    justify-content: flex-start;
}


@media (max-width: 767px) {

	.no-cover .content-box .profile-image {
		margin-top: -75px;
	}

	/* .profile-cover-image {
		min-height: 178px;
	} */

}

.edit-main-btn li svg, .edit-main-btn li svg path {
    stroke: var(--grey-700);
}

form.contact-view-form svg path {
    fill: var(--primary-base);
}

.user-name-sec path {
    stroke: var(--primary-base);
}

.logo-sidebar #swft path,
.logo-sidebar #swft + path {
  fill: var(--white);
}

.login-register-btn ul li + li {
    margin-left: 8px;
}

.login-register-btn ul li a {
	color: var(--grey-600);
}

.appearance-tooltip {
    display: flex;
    position: relative;
}

.appearance-tooltip .tooltip {
    margin-right: 10px;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-switch {
    top: 1px;
	position: relative;
}

.appearance-tooltip > .tooltip {
    /* padding-bottom: 1px; */
    position: relative;
    z-index: 0;
}

.field-column input#privacy-policy {
    margin-right: 12px !important;
}

.analytics_box a.tooltip {
    display: none;
}

@media (max-width: 991px) {
	.login-register-btn ul {
		width: 100%;
		justify-content: center;
	}
}

.intl-tel-input.iti-container {
    z-index: 99999;
}

/* blank btn */

span.delete-button-icon {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
}

.w-100-80 {
	width: calc(100% - 80px);
}

input.icon-field {
    background-image: url(../../images/mail-01.png);
    background-repeat: no-repeat;
    background-position: 15px center;
    padding-left: 42px;
}


/* select picker */

.custom-select-wrapper {
    position: relative;
    display: inline-block;
    user-select: none;
    width: 100%;
}
	.custom-select-wrapper select {
	  display: none;
	}
	.custom-select {
		position: relative;
		display: inline-block;
		width: 100%;
	}
	  .custom-select-trigger {
		position: relative;
		display: block;
		padding: 0 84px 0 22px;
		cursor: pointer;
        width: 100%;
		background-color: var(--grey-25);
		border: solid 1px var(--grey-300);
		padding: 10px 14px;
		height: 44px;
		border-radius: var(--radius-global-sm);
		font-size: 14px;
		line-height: normal;
		color: var(--grey-700);
		font-weight: normal;
		transition: ease all 0.25s;
		font-weight: 500;
	  }
	  .custom-select-trigger:after {
		position: absolute;
		display: block;
		content: '';
		width: 8px;
		height: 8px;
		top: 50%;
		right: 15px;
		margin-top: 0;
		border-bottom: 2px solid #98A2B3;
		border-right: 2px solid #98A2B3;
		transform: rotate(45deg) translateY(-50%);
		transition: all .4s ease-in-out;
		transform-origin: 50% 0;
	}
	.custom-select.opened .custom-select-trigger:after {
		transform: rotate(-135deg) translateY(-50%);
		margin-top: 3px;
	}
		.custom-options {
			position: absolute;
			display: block;
			top: 100%;
			left: 0;
			right: 0;
			min-width: 100%;
			margin: 0;
			border-radius: 8px;
			box-sizing: border-box;
			box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
			background: #fff;
			transition: all .125s ease-in-out;
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
			transform: translateY(-15px);
		}
		.custom-select.opened .custom-options {
			opacity: 1;
			visibility: visible;
			pointer-events: all;
			transform: translateY(0);
			z-index: 1;
		}
	  .custom-options:before {
		position: absolute;
		display: block;
		content: '';
		bottom: 100%; right: 25px;
		width: 7px; height: 7px;
		margin-bottom: -4px;
		display: none;
		border-top: 1px solid #b5b5b5;
		border-left: 1px solid #b5b5b5;
		background: #fff;
		transform: rotate(45deg);
		transition: all .5s ease-in-out;
	  }
	  .option-hover:before {
		background: #f9f9f9;
	  }
	  .custom-option {
		position: relative;
		display: block;
		padding: 10px 22px 9px;
		line-height: normal;
		cursor: pointer;
		transition: all .5s ease-in-out;
		color: #344054;
		line-height: normal;
	}
	  .custom-option:first-of-type {
		border-radius: 8px 8px 0 0;
	  }
	  .custom-option:last-of-type {
		border-bottom: 0;
		border-radius: 0 0 8px 8px;
	  }
	  .custom-option:hover,
	  .custom-option.selection {
		background: var(--grey-100);
	  }

	  span.drag-contact-field.visible-hidden {
		visibility: hidden;
	}

	button.label-btn {
		background-color: var(--primary-25);
		border: solid 1px var(--primary-100);
		border-radius: var(--radius-global-sm);
		font-size: 14px;
		font-weight: 500;
		line-height: 28px;
		padding: 0 10px;
		color: var(--primary-base);
		height: 28px;
		display: flex;
		align-items: center;
	}


	@media (max-width: 575px) {

		.col-sm-5.d-flex.align-items-center + div {
			margin-top: 12px;
		}

		.w-100-80 {
			width: calc(100% - 50px);
		}

	}

 @media (max-width: 767px) {
	.upload-image img {
		width: 300px;
		/* height: 120px; */
	}
 }

 @media (max-width: 991px) {
	.flotter-btn {
	    bottom: 80px;
	}
}

.tox-menubar{
	display: none !important;
}

.tox-promotion{
	display: none !important;
}

.danger path#Icon {
    stroke: var(--error-base);
}
/* custom contact field start */

p.error-text {
    color: rgba(255,0,0,1);
    padding: 0;
    border-radius: 8px;
    margin-top: 0;
    font-size: 13px;
    text-align: left;
    margin-left: 30px;
}


.field-set {
                display: block;
                margin-bottom: 15px;
                position: relative;
            }

            .field-set > select#type_ {
				width: calc(50% - 37px);
				margin-right: 6px;
			}

            .field-set > input, .iti {
				width: calc(50% - 37px);
				/* margin-left: 6px;
				margin-right: 6px; */
			}

            .field-set button.remove-field {
				float: right;
				height: 44px;
				width: 20px;
				margin-left: 0px;
			}

            .field-set.custom-field-class > select#type_ {
				width: calc(25% - 24px);
			}

            .field-set.custom-field-class > select#type_ + input {
				width: calc(25% - 25px);
				position: relative;
				top: 0;
			}

            @media (max-width: 640px) {

                .field-set.custom-field-class {
                display: block;
            }

            .field-set.custom-field-class > select#type_ {
                width: calc(50% - 1%);
                margin-right: 1%;
            }
            .field-set.custom-field-class > select#type_ + input {
                width: calc(50% - 1%);
                margin-left: 1%;
                margin-right: 0;
            }
            .field-set.custom-field-class > select#type_ + input + input {
                width: calc(100% - 50px);
                margin-right: 0;
                margin-top: 15px;
            }

            .field-set.custom-field-class button.remove-field {
                margin-top: 15px;
            }

            }
            span.drag-contact-field {
				display: flex !important;
				align-items: center;
				margin-right: 10px;
				float: left;
				min-height: 36px;
                transform: translateZ(0); /* Forces Safari to repaint */
			}

            /* ADDED: drag handle for the Social media section's reorder feature.
               Mirrors .drag-contact-field's behaviour but tighter — sits inline with the icon, no float.
               OLD: had opacity: 0.6 default + opacity: 1 on hover for "subtle until hover" UX, but it dimmed the
               white dots to grey in dark mode and didn't match the contact-details handle. Removed.
               span.drag-social-field { ... opacity: 0.6; transition: opacity 0.15s ease; }
               span.drag-social-field:hover { opacity: 1; } */
            span.drag-social-field {
                display: inline-flex;
                align-items: center;
                cursor: move;
                user-select: none;
            }
            .sortable-social-row.dragging,
            .sortable-social-row.sortable-dragging {
                opacity: 0.6;
                background: rgba(0, 0, 0, 0.02);
            }

@media (max-width: 767px) {

	.field-set > select#type_ {
		width: calc(100% - 62px);
		margin-right: 0;
		margin-bottom: 12px;
	}

	.field-set > input, .iti {
		width: calc(100% - 62px);
		margin-right: 0;
		/* margin-left: 30px; */
		position: relative;
		top: 0;
	}

	.field-set.custom-field-class > select#type_ {
		width: calc(50% - 37px);
		margin-right: 6px;
	}

	.field-set.custom-field-class > select#type_ + input {
		width: calc(50% - 37px);
		margin-left: 6px;
		margin-right: 0;
	}

	.field-set.custom-field-class button.remove-field {
		margin-top: 0;
	}


	.field-set.custom-field-class > select#type_ + input + input {
		width: calc(100% - 62px);
		margin-right: 0;
		margin-top: 0;
	}
}
.contact-email {
    background-image: url(../../assets/media/mail-01.svg);
    background-repeat: no-repeat;
    background-position: 8px center;
    padding-left: 35px !important;
    position: relative;
    top: 0;
    background-size: 20px;
}
/* custom contact field end */

.gray-text{
	color: var(--grey-base);
}

.preview-show span.heading-on {
    margin-bottom: 12px;
}

.profile-conntect-page .accordion-header {
    margin-bottom: 12px;
}

.profile-conntect-page div#Accordion-app.accordion-header {
    margin-bottom: 12px;
}

div#add-section .modal-body .row {
    justify-content: flex-start;
}

div#add-section .profile-section-add-column {
  margin-top: 6px;
}

.coming_soon {
	position: relative;
	width: 100%;
	margin-top: 20px;
}

.coming_soon::after {
    content: "";
    width: calc(100% - 136px);
    height: 1px;
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    background: #EAECF0;
}

.visible-hidden {
	visibility: hidden;
	opacity: 0;
}

.disable-column{
	opacity: 0.675;
	pointer-events: none;
	cursor: none;
}

.iti--separate-dial-code .iti__selected-flag {
    background-color: transparent !important;
}

.disable-column .profile-section-add-column {
	border-color: var(--grey-200);
}

.iti__selected-flag {
    font-weight: 500;
}

.accordion-header span + a > svg {
    position: relative;
    top: -2px;
    left: 0;
    margin-right: 0.75rem;
}

.field-column p.fw-bold {
    font-weight: 600 !important;
}

/* add admin header css **/

.content-section .admin-header {
    position: fixed;
    /* Offset by the 220px redesign sidebar (was the stale 80px icon-rail width, which let the opaque sidebar occlude the chevron + start of "Back to dashboard"). The <=991px media query below resets to 100% since the sidebar is hidden there. */
    width: calc(100% - 220px);
    right: 0;
    padding: 8px 24px;
    z-index: 11;
    top: 0;
    min-height: 44px;
    /* Redesign chrome: match the dark sidebar surface (--sb-base #0F1012) + a hairline divider (--sb-line), Inter font. Kept solid (no blur) so it reads as one piece with the sidebar. */
    background: #0F1012;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

a.backtoadmin-btn {
    color: #F4F4F5;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    margin-top: 3px;
    float: left;
    transition: color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

a.backtoadmin-btn:hover { color: rgba(244, 244, 245, 0.7); }

/* Chevron icon follows the link colour (overrides the inline stroke="#F5F5F5" attribute). */
a.backtoadmin-btn svg path { stroke: currentColor; }

button.username-info-admin {
    float: right;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    height: 28px;
    color: rgba(244, 244, 245, 0.7);
    padding: 0 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1), border-color 160ms cubic-bezier(0.22, 1, 0.36, 1), color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

button.username-info-admin:hover,
button.username-info-admin:focus {
    background-color: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.18);
    color: #F4F4F5;
}

button.username-info-admin svg {
    position: relative;
    top: 0;
    margin-right: 0 !important;
}

/* Person icon follows the pill text colour (overrides the inline stroke="#999999" attribute). */
button.username-info-admin svg path { stroke: currentColor; }

.content-section .admin-header + .page-header-section {
    top: 44px;
}

@media (max-width: 991px) {

	.content-section .admin-header {
		width: 100%;
	}

}

/* when admin header comes this css need to apply */

.admin-header-add .content-section.with-top-header {
    padding-top: 108px;
}

.admin-header-add .sticky-sidebar.sticky-section {
    top: 108px;
}

/* add admin header css end **/

@media (min-width: 992px) {
	.profile-details ul {
		max-height: calc(100vh - 485px);
		overflow: auto;
	}
	div#accordion-default {
		width: calc(100% - 8px);
		float: right;
	}
}
ul.mobile-menu-style li.active a {
    background: var(--grey-100);
}

.heading-off + a[data-bs-toggle="tooltip"]:hover svg,
.heading-off + a[data-bs-toggle="tooltip"]:hover path,
.heading-off + a[data-bs-toggle="tooltip"]:focus svg,
.heading-off + a[data-bs-toggle="tooltip"]:focus path {
	stroke: var(--grey-400);
}


/* Image ratio css

.profile-cover-image {
	width: 100%;
	background-size: cover;
}

@media (min-width: 1200px) {

	.profile-cover-image {
		height: 173px;
	}

}

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

	.profile-content-section {
		max-width: 970px;
		margin-left: auto;
		margin-right: auto;
	}

	.profile-cover-image {
		height: 157px;
	}

}


@media (min-width: 992px) and (max-width: 1080px) {

	.profile-content-section {
		max-width: 870px;
		margin-left: auto;
		margin-right: auto;
	}

	.profile-cover-image {
		height: 140px;
	}

}

@media (min-width: 768px) and (max-width: 991px) {
    .profile-content-section {
		max-width: 720px;
		margin-left: auto;
		margin-right: auto;
	}

	.profile-cover-image {
		height: 288px;
	}
}

@media (min-width: 480px) and (max-width: 767px) {
    .profile-content-section {
		max-width: 448px;
		margin-left: auto;
		margin-right: auto;
	}

	.profile-cover-image {
		height: 179px;
	}
}

@media (min-width: 375px) and (max-width: 479px) {

	.profile-content-section {
		max-width: 350px;
		margin-left: auto;
		margin-right: auto;
	}

	.profile-cover-image {
		height: 138px;
	}

}

@media (min-width: 340px) and (max-width: 374px) {

	.profile-content-section {
		max-width: 310px;
		margin-left: auto;
		margin-right: auto;
	}

	.profile-cover-image {
		height: 124px;
	}

}

@media (max-width: 340px) {

	.profile-content-section {
		max-width: 280px;
		margin-left: auto;
		margin-right: auto;
	}

	.profile-cover-image {
		height: 112px;
	}

}

 Image end ratio css **/

.profile-cover-image img {
    aspect-ratio: 3/1;
    -webkit-aspect-ratio: 3/1;
    -moz-aspect-ratio: 3/1;
    -ms-aspect-ratio: 3/1;
    -o-aspect-ratio: 3/1;
    object-fit: cover;
}

.textbox-border-danger {
    border-color: #D23136 !important
}

/* new menu css */

span.icon_thunder {
    background: linear-gradient(135deg, rgba(255, 207, 113, 0.11) 0%, rgba(35, 118, 221, 0.25) 100%);
    width: 40px;
    height: 40px;
    display: flex;
    margin-top: 0 !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

li.create-company-menu a {
    border: 1px solid rgba(255, 207, 113, 0.11);
    border-radius: 8px;
    height: auto !important;
}

li.create-company-menu > a > svg {
    display: none;
}

.sidebar-content ul li.create-company-menu a {
    padding: 12px 8px;
}

li.create-company-menu {
    width: calc(100% - 16px);
    margin-left: 8px;
}

li.create-company-menu a span {
    font-size: 12px;
    line-height: 150%;
    font-weight: 600;
	/* mix-blend-mode: overlay; */
}
/* End */

/* body.gradient_enable::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgb(0, 0, 0, 1) 0%, rgba(0,0,0,0) 100%);
    opacity: 0.65;
	mix-blend-mode: overlay;
    transform: rotate(180deg);
    z-index: -2;
} */

.temp_drop a[data-bs-toggle="tooltip"] svg,
.temp_drop a[data-bs-toggle="tooltip"] path {
    stroke: var(--grey-700);
    position: relative;
    top: 0;
}
.temp_drop > a + ul li {
    opacity: 0.7;
    /* pointer-events: none;
    cursor: none; */
}

/* fixed heading pencil icon color */

.accordion-header>span > span + a:hover svg,.accordion-header>span > span + a:focus svg path,
.accordion-header>span > span + a > svg,.accordion-header>span > span + a > svg path {
    stroke: var(--grey-700);
}

.accordion-header>span > span + a:hover svg,.accordion-header>span > span + a:focus svg path {
	stroke: var(--grey-700) !important;
}

.accordion-item span.heading-on + a[data-bs-toggle="tooltip"]:hover path,
.accordion-item span.heading-on + a[data-bs-toggle="tooltip"]:focus path {
    stroke: var(--grey-700);
}

/*
.accordion-header>span > span.heading-off + a:hover svg,
.accordion-header>span > span.heading-off + a:focus svg path,
.accordion-header>span > span.heading-off + a > svg,
.accordion-header>span > span.heading-off + a > svg path {
    stroke: var(--grey-400);
} */

/* end fixed heading pencil icon color */

div#flotter-btn1 {
    position: fixed;
    right: 25px;
    bottom: 20px;
    z-index: 9;
}
.floatting-toggle-btn1 {
    border: none;
    width: 60px;
    height: 60px;
    background: #344054;
    border-radius: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: ease-in-out all 0.125s;
    overflow: hidden;
	z-index: 1;
}
.floatting-toggle-btn1 svg {
    width: 20px;
}

div#Website-links p a {
    color: var(--primary-base);
}

div#Website-links p a:hover,
div#Website-links p a:focus {
	text-decoration: none;
}

@media (max-width: 991px) {
    div#flotter-btn1 {
		bottom: 85px;
		z-index: 11;
		right: 34px;
	}
    div.flotter-btn {
        bottom: 145px;
        /* bottom: 150px; */
        /* bottom: 90px; */
    }

    div.bb-feedback-button {
        bottom: 85px !important;
        right: 26px !important;
    }

	.floatting-toggle-btn1 {
		margin-right: -9px;
		width: 50px;
		height: 50px;
	}
}


/* review popup style */


.review_popup .modal-dialog-centered {
    max-width: 600px;
}

.rate {
    float: left;
    height: auto;
    padding: 0;
}
.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
}
.rate:not(:checked) > label {
    float: right;
    width: auto;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 35px;
    color: var(--grey-300);
    margin-bottom: 0;
    line-height: 28px;
}
.rate:not(:checked) > label:before {
    content: '★ ';
}
.rate > input:checked ~ label {
    color: #F79009;
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #F79009;
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #F79009;
}

.mt-3 {
	margin-top: 16px !important;
}


.field.file-upload {
    border: solid var(--grey-300) 1px;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    margin-top: 16px;
    position: relative;
}

.field.file-upload label {
	margin-bottom: 0;
}

.field.file-upload p {
  margin-bottom: 0;
  color: var(--grey-base);
  font-size: 12px;
  margin-top: 4px;
}

.fixed-info {
  display: flex;
  align-items: center;
}

.fixed-info > span {
    border: solid var(--grey-300) 1px;
    height: 40px;
    border-radius: 8px 0 0px 8px;
    width: 79px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    padding: 12px;
    color: #98A2B3;
    border-right: none;
    position: absolute;
    left: 0;
    top: 0;
}

.fixed-info > span + input {
    border-radius: 0 8px 8px 0;
    width: calc(100% - 79px);
}

.image-column {
    width: 60px;
    height: 60px;
    background: #F2F4F7;
    border-radius: 60px;
    margin: 0 auto 12px;
}

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

.field.file-upload label::before {
    content: "Update photo";
    color: var(--grey-base);
    font-weight: 600;
    line-height: 100%;
}

.field.file-upload label:hover::before,
.field.file-upload label:focus::before {
	color: var(--primary-base);
}

.field.file-upload label input[type="file"] {
  opacity: 0;
  visibility: hidden;
  width: 0;
  height: 0;
  display: none;
  overflow: hidden;
}

.business-info {
    max-width: 576px;
    width: 100%;
    margin-top: -85px;
    position: relative;
    top: 0;
    left: 0;
}

.review-slider-section {
    position: relative;
}

.review-slider-section::after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    width: 72px;
    background: transparent;
    display: block;
    right: -1px;
    z-index: 1;
    background-image: linear-gradient(270deg, #F9FAFB 0%, rgba(249, 250, 251, 0.00) 100%);
}

.review-slider-section .item {
    width: 100%;
    background: var(--white);
    border-radius: 12px;
    /* padding: 20px; */
}

.review-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.rating-stars {
    display: flex;
    align-items: center;
}

.review-slider-section .item p:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.review-content p + p {
    color: var(--grey-base);
    margin-bottom: 16px;
}

.item .review-content p + p {
	margin-bottom: 0;
}

.item .review_blog-section {
    min-height: 185px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}

.reviewer-info {
    display: flex;
}

.reviewer-info span.reviewr-icon img {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    margin-right: 12px;
}

span.reviewr-content p {
    font-weight: 500;
    margin-bottom: 0;
}

span.reviewr-content p + p {
    font-weight: 400;
    color: var(--grey-400);
}

span.reviewr-content {
    display: flex;
    align-items: flex-start;
    flex-flow: column;
    justify-content: center;
}

p.review_content_basic span {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    white-space: pre-wrap;
}

.review-logo svg {
    height: 24px;
    width: auto;
}

/** temp review */

.item.temp-reviews {
    background: var(--grey-200);
    min-height: 215px;
}

.item.temp-reviews p.review_content_basic > span + a {
    display: none;
}

.item.temp-reviews .review-content p + p {
    margin-bottom: 0;
}

.item.temp-reviews .review-slider-section .item {
    min-height: 240px;
}

.item.temp-reviews .review-content {
    min-height: 100px;
}

.item.temp-reviews .reviewer-info {
    padding-top: 0px;
}

/* .owl-item.active {
    margin-left: -50px;
} */

/** temp review */

/* preview show */
.preview-show .item.temp-reviews {
    width: 100%;
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    min-height: 255px;
}

.preview-show .item.temp-reviews p.review_content_basic > span + a {
    display: block;
}

.preview-show .item.temp-reviews .review-content p + p {
    margin-bottom: 1rem;
}

.preview-show .item.temp-reviews .review-slider-section .item {
    min-height: auto;
}

.preview-show .item.temp-reviews .review-content {
    min-height: 112px;
}

.preview-show .item.temp-reviews .reviewer-info {
    padding-top: 16px;
}
/* preview show end */

.view_more_review .review-content {
    max-height: 220px;
	height: auto;
    overflow: auto;
    margin-bottom: 16px;
}

.reviewer-info {
    display: flex;
    border-top: solid #EAECF0 1px;
    padding-top: 16px;
    position: relative;
    padding-right: 21px;
}

.item .reviewer-info {
	border-top: none;
}

a.review-edit-button {
    position: absolute;
    right: 0;
    height: 40px;
    display: flex;
    align-items: center;
    top: 16px;
}

.review-content {
    min-height: 92px;
}

.single-review-only:after {
	display: none;
}

.add-disable,.add-disable:hover,.add-disable:focus {
    border-color: var(--grey-200);
    color: var(--grey-400);
    /* cursor: default; */
	background: var(--white);
}

.add-disable svg,
.add-disable:hover svg,
.add-disable:focus svg,
.add-disable svg path,
.add-disable:hover svg path,
.add-disable:focus svg path {
   stroke: var(--grey-400);
}

/* start rating css */

/******
Style Star Rating Widget
*****/

.rating-group {
    display: inline-block;
    margin-top: 7px;
    position: relative;
    left: 0;
}

.rating {
  border: none;
  float: left;
}

.rating > input { display: none; }
.rating > label:before {
    font-size: 28px;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f005";
    line-height: normal;
    font-weight: normal;
    margin-right: 5px;
}

.rating > .half:before {
  content: "\f089";
  position: absolute;
}

.rating > label {
  color: #EAECF0;
 float: right;
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #F79009;  } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #F79009;  }

/* end start rating css */

.view_more_review .rating > label:before {
    font-size: 20px;
}

.view_more_review .rating-group {
	margin-top: 0;
}

.view_more_review .rating > label {
    color: #EAECF0;
    float: right;
    margin-bottom: 0;
}

.view_more_review .rating {
	pointer-events: none;
}

/** setting page css **/

@media (min-width: 768px) {
	.content-section.full-width {
		max-width: 100%;
		padding-left: 24px;
		padding-right: 24px;
	}
}

.full--width .profile-edit-section {
    width: 100%;
    max-width: 100%;
}

/* tab bar css **/

.tabs-left {
    padding-top: 0;
    width: 100%;
    border: none;
}
.tabs-left > li {
    float: none;
    margin-bottom: 0;
    margin-right: 0;
    width: 100%;
}
.tabs-left > li + li {
	margin-top: 4px;
}
.tabs-left > li > a.active.show {
    background-color: var(--white);
    color: var(--primary-base);
}
  .tabs-left > li > a {
    border-radius: 6px;
    margin-right: 0;
    display: block;
    color: var(--grey-base);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    min-height: 36px;
    padding: 8px 12px;
	border: none;
}

  /* tab bar css end **/

.full-width .profile-edit-section {
    width: 100%;
    max-width: 100%;
}

a.google_btn, button.google_btn {
    background: var(--grey-50);
    border: solid var(--grey-200) 1px;
    padding: 3px 10px 3px 8px;
    font-size: 13px;
    color: var(--grey-700);
    display: flex;
    align-items: center;
    max-width: fit-content;
    border-radius: 35px;
    line-height: normal;
    font-weight: 500;
    margin-top: 12px;
}

.chat_with_us {
    color: var(--primary-base);
}
.chat_with_us:hover {
    color: var(--primary-600);
}

.edit-head-coloum p {
    /* line-height: 100%; */
    line-height: 130%;
}

.tooltip_new a {
    position: relative;
    top: -1px;
    margin-right: 10px;
}

@media (max-width: 991px) {
	.tabs-left {
		display: flex;
		padding-bottom: 20px;
	}
	.tabs-left > li {
		width: auto;
	}
	.tabs-left > li + li {
		margin-top: 0;
		margin-left: 12px;
	}
	.col-3.col-md-8.col-lg-7.col-xl-9 .d-flex.align-items-center.md-justify-content {
		/* justify-content: flex-end; */
	}
	.edit-head-coloum p {
		line-height: 150%;
	}
	.analytics_page #kt_table_connection_data_wrapper span {
		width: calc(100% - 36px);
	}
}
@media (max-width: 575px) {
    .tabs-left > li + li { margin-left: 0; }
}

@media(max-width: 767px) {
    .col-7.col-md-8.col-lg-7.col-xl-9 .d-flex.align-items-center.md-justify-content,
    .col-3.col-md-8.col-lg-7.col-xl-9 .d-flex.align-items-center.md-justify-content {
		justify-content: flex-end;
	}
}

/* analytic page **/

.content-box.chart-box {
    padding-top: 24px;
    padding-left: 24px;
    padding-right: 24px;
	overflow: hidden;
}

.chart-content {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.chart-content h2 {
    margin-bottom: 0;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: -0.64px;
}

.chart-content div span:nth-child(1) {
    font-size: 32px;
    font-style: normal;
    font-weight: 500 !important;
    color: var(--grey-700) !important;
    margin-right: 4px !important;
    height: 25px;
    line-height: 25px !important;
}

span.badge.badge-light-danger {
    background: var(--error-50);
    border: solid var(--error-200) 1px;
    color: var(--error-600);
    padding: 5px 8px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
}

span.badge.badge-light-success {
    background: var(--success-50);
    border: solid var(--success-200) 1px;
    color: var(--success-600);
    padding: 5px 8px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
}

span.badge.badge-light-primary {
    background: var(--primary-50);
    border: solid var(--primary-200) 1px;
    color: var(--primary-base);
    padding: 5px 8px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
}

span.badge.badge-light-warning {
    background: var(--warning-50);
    border: solid var(--warning-200) 1px;
    color: var(--warning-600);
    padding: 5px 8px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
}

span.badge.badge-light-secondary {
    background: var(--grey-50);
    border: solid var(--grey-200) 1px;
    color: var(--grey-600);
    padding: 5px 8px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
}

.chart-content + p.small {
    color: var(--grey-400);
}

.act-btn.date-btn-ico .form-control {
    border-radius: 8px;
    font-weight: 400 !important;
    font-size: 14px;
    line-height: normal;
    height: 36px;
    background-image: url(../../frontend/icons/calender-light.svg);
    background-repeat: no-repeat;
    background-position: 8px center;
    padding-left: 34px;
    width: 190px;
    float: right;
}

body .daterangepicker .ranges li.active {
    background-color: var(--primary-base);
	color: var(--white) !important;
}

body .daterangepicker td.active,
body .daterangepicker td.active:hover {
    background-color: var(--primary-base);
}

body .daterangepicker td.in-range {
    background-color: var(--primary-25);
}

body .daterangepicker .ranges li {
    padding: 8px 12px;
    font-size: 14px;
    color: var(--grey-700);
    height: 34px;
    display: flex;
    align-items: center;
}

@media (min-width: 730px) {

	body .daterangepicker .ranges ul {
		width: 145px;
	}

}

body .daterangepicker {
	border-radius: 8px;
}

.chart-content i {
    display: none;
}

.search-bar {
    display: flex;
    position: relative;
}

.search-bar button {
    position: absolute;
    height: 36px;
    width: 36px;
    border-radius: 8px;
    margin-left: 1px;
}

.search-bar input {
    padding-left: 36px;
    max-width: 230px;
	width: 100%;
}

.error_field {
    border-color: var(--error-base) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

a[data-toggle="modal"] p {
    color: var(--grey-700);
}

.max-width-312 {
    width: 100%;
    max-width: 312px;
    margin-bottom: 6px;
}

.dataTables_paginate .active > .page-link,
.dataTables_paginate .page-link.active {
    background-color: var(--primary-base);
	border-color: var(--primary-base);
}

i.fa.fa-refresh.fa-spin {
    font-size: 0;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: var(--primary-base) !important;
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
	opacity: 0.65 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.daterangepicker.show-calendar .drp-buttons {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
}

div#profile_box_chart svg path,
div#connection_box_chart svg path,
div#link_box_chart svg path,
div#contact_box_chart svg path {
    fill: var(--primary-base);
}

.page-item .page-link .previous {
    background-image: url(../../frontend/icons/chevron.svg);
    width: 32px;
    height: 32px;
    position: absolute;
    background-repeat: no-repeat;
    transform: rotateY(180deg);
    left: -1px;
    top: -1px;
}

.page-item .page-link .next {
    background-image: url(../../frontend/icons/chevron.svg);
    width: 32px;
    height: 32px;
    position: absolute;
    background-repeat: no-repeat;
	left: -1px;
    top: -1px;
}

.page-item.disabled {
    opacity: 0.5;
}

@media (max-width: 767px) {

	.row.table-heading-section.d-flex.justify-content-md-start.align-items-center.pt-4.ps-4.pe-4.pb-0 .col-md-7 + .col-md-5 {
		margin-top: 12px;
	}

	.analytics_page td.sorting_1 {
		white-space: nowrap;
	}

}

@media (min-width: 1224px) {

	.responsive-table-clss .table-responsive {
		overflow-x: hidden;
	}

}

body .daterangepicker {
    border-radius: var(--radius-global);
    border: none;
    margin-top: 4px;
    font-family: var(--font-style);
    font-size: 14px;
    line-height: normal;
    overflow: hidden;
    box-shadow: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10);
    border: solid var(--grey-100) 1px;
}

body .daterangepicker.opensright:after,.daterangepicker:before {
	display: none !important;
}

body .daterangepicker .ranges li:hover {
    background-color: var(--grey-50);
}

body .daterangepicker .ranges li.active:hover {
    background-color: var(--primary-base);
}

body .daterangepicker .drp-buttons {
    border-top: 1px solid var(--grey-100);
}

body .daterangepicker.show-ranges.ltr .drp-calendar.left {
    border-left: 1px solid var(--grey-100);
}

body .daterangepicker td.in-range {
    background-color: var(--grey-25);
}

.analytics_page div.dataTables_wrapper td svg {
    margin-right: 12px;
}

/** table style **/

table.dataTable thead th {
    color: var(--grey-400);
    font-weight: 600;
    font-size: 14px;
    line-height: normal;
}

h5 + p.grey-500 {
    color: var(--grey-600);
}

.daterangepicker th.month,.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
    font-weight: 500;
}

td.dataTables_empty > p {
    margin-bottom: 0;
}

p.review_content_basic a {
    color: var(--primary-base);
}

.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    background: #fff !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.apexcharts-tooltip.apexcharts-theme-light {
    background: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 0 25px 0 rgba(0,0,0,.1) !important;
	border: none !important;
}

span.apexcharts-tooltip-marker {
	/* background-color: var(--primary-base) !important; */
}

.apexcharts-tooltip {
    box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
}

@media (max-width: 767px) {
	.review_popup select[name="source"] {
		margin-bottom: 16px;
	}
}

/* popup css review section start **/

div#reviewer_uploadimage .modal-header {
    display: flex;
    justify-content: space-between;
}

div#reviewer_uploadimage .modal-header {
    display: flex;
    justify-content: space-between;
    padding: 0 24px;
}

#reviewer_uploadimage .modal-footer .spinner-border {
    display: none;
    position: absolute;
    bottom: 12px;
    z-index: 99;
    color: var(--primary-base);
    right: 80px;
}

.change_reviewer_photo.show,#reviewer_uploadimage.modal_popup.show {
    background: rgba(0,0,0,.35);
}

div#reviewer_uploadimage .croppie-container .cr-slider-wrap {
   margin-bottom: 0;
}

/* popup css review section end **/

span.reviewr-content p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    /* max-width: 400px; */
    max-width: 250px;
}

.modal span.reviewr-content p {
	white-space: normal;
	text-overflow: none;
	max-width: 100%;
}

.modal .review-content {
    min-height: auto;
    margin-bottom: 0;
}

.modal .view_more_review .review-content {
    max-height: 220px;
    height: auto;
    overflow: auto;
    margin-bottom: 0;
}

.modal .view_more_review .review-content {
    margin-bottom: 0;
}

.modal .rating {
    position: relative;
    top: 4px;
}

.review_popup fieldset.rating {
    top: 0;
}

.review_popup .rating-group {
    margin-top: 0;
}

.analytics_page table.dataTable {
	width: 100% !important;
}


@media (min-width: 992px) and (max-width: 1199px) {
	span.reviewr-content p {
		/* max-width: 320px; */
        max-width: 195px;
	}
	.modal span.reviewr-content p {
		white-space: normal;
		text-overflow: none;
		max-width: 100%;
	}
	.modal span.reviewr-content p {
		max-width: 100%;
	}
}


@media (min-width: 768px) and (max-width: 991px) {
	span.reviewr-content p {
		max-width: 320px;
	}
	.modal span.reviewr-content p {
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	span.reviewr-content p {
		max-width: 160px;
	}
	.modal span.reviewr-content p {
		max-width: 100%;
	}

	.review-logo svg {
		height: 18px;
		width: auto;
	}

	.item.temp-reviews .review-content {
		margin-bottom: 8px;
	}

	body .daterangepicker .drp-selected {
		display: inline-block;
		font-size: 11px;
		padding-right: 0;
	}
}

/* photo gallery popup css */

.image-gallery-column {
    margin: 0 auto 12px;
}

.image-gallery-column img {
    border-radius: 8px;
    object-fit: cover;
    max-width: 100px;
    max-height: 120px;
}

.change_gallery_photo.show {
    background: rgba(0,0,0,.35);
}

ul.gallery-list {
	display: inline-block;
	width: calc(100% + 14px);
	margin: -12px -7px -6px;
}

div#accordion-default .accordion-body ul.gallery-list {
	/* margin-top: 8px; */
}

ul.gallery-list ul.gallery-list {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
	margin-top: 0 !important;
}

.preview-show div#accordion-default .accordion-body ul.gallery-list {
	margin-top: -12px;
	position: relative;
}

ul.gallery-list li {
	display: flex;
	float: left;
	flex-flow: column;
	align-items: flex-start;
	justify-content: center;
	width: calc(25% - 12px);
	margin: 12px 6px 0;
	height: auto;
	padding: 0;
	background-color: var(--white);
	border: solid 1px var(--grey-200);
	transition: ease all 0.25s;
	border-radius: var(--radius-global-md);
	min-height: 50px;
	position: relative;
	overflow: hidden;
}

/* Masonry layout for photo gallery — dense packing fills upper-row gaps */
ul.gallery-list.gallery-masonry {
    display: grid !important;
    grid-template-columns: repeat(var(--gallery-columns, 2), 1fr);
    grid-auto-rows: 10px;
    grid-auto-flow: dense;
    column-gap: 12px;
    row-gap: 0;
    align-items: start;
    width: 100% !important;
    margin: 0 !important;
    padding: 0;
    overflow: visible;
}

ul.gallery-list.gallery-masonry li {
    display: block;
    width: 100% !important;
    float: none;
    flex-flow: initial;
    align-items: initial;
    justify-content: initial;
    margin: 0 0 6px 0;
    height: auto;
    min-height: 0;
    border: solid 1px var(--grey-200);
    border-radius: var(--radius-global-sm);
    overflow: hidden;
    position: relative;
    /* grid-row span is set inline by applyMasonrySpans() after images load */
    /* background-color: var(--white); */
}

ul.gallery-list.gallery-masonry li .view_gallery_img {
    width: 100%;
    height: auto;
    display: block;
}

ul.gallery-list.gallery-masonry .view_gallery_img {
    width: 100%;
    height: auto;
    display: block;
}

/* Gallery drag handle */
.gallery-drag-handle {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 6px;
    cursor: grab;
    color: var(--grey-500);
    opacity: 0;
    transition: opacity 0.2s ease;
    touch-action: none;
}

.gallery-drag-handle:active {
    cursor: grabbing;
}

/* Aspect ratio preset buttons — greyscale */
.btn.ratio-preset-btn {
    color: #667085 !important;
    border-color: #d0d5dd !important;
    background-color: #fff !important;
}

.btn.ratio-preset-btn:hover {
    color: #344054 !important;
    border-color: #98a2b3 !important;
    background-color: #f9fafb !important;
}

.btn.ratio-preset-btn.active {
    color: #fff !important;
    background-color: #344054 !important;
    border-color: #344054 !important;
    box-shadow: none !important;
}

/* Constrain the dragged item size */
ul.gallery-list.gallery-masonry li.gallery-drag-active {
    width: 150px !important;
    height: auto !important;
    opacity: 0.9;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 9999;
}

ul.gallery-list.gallery-masonry li:hover .gallery-drag-handle {
    opacity: 1;
}

/* Always visible on touch devices */
@media (hover: none) {
    .gallery-drag-handle {
        opacity: 1;
    }
}

/* Gallery drag-to-reorder states */
.gallery-div-drag li {
    cursor: default;
}

ul.gallery-list.gallery-masonry li {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s ease, opacity 0.2s ease;
}

.gallery-drag-ghost {
    opacity: 0.3 !important;
    border: 2px dashed var(--primary-base) !important;
    background: var(--grey-50) !important;
    border-radius: var(--radius-global-md) !important;
}

.gallery-drag-ghost * {
    visibility: hidden;
}

.gallery-drag-chosen {
    transform: scale(1.04);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    z-index: 10;
    border-color: var(--primary-base) !important;
}

.gallery-drag-active {
    opacity: 0.9;
}

/* Column count submenu in gallery dropdown */
.gallery-column-submenu {
    display: none;
    position: absolute;
    right: 100%;
    left: auto;
    top: 0;
    min-width: 120px;
    /* background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-global-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
    padding: 4px 0;
    z-index: 1000;
    list-style: none;
}

@media (max-width: 575px) {
    .gallery-column-submenu {
        position: static;
        left: auto;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding-left: 16px;
    }
}

.gallery-column-trigger:hover .gallery-column-submenu,
.gallery-column-trigger:focus-within .gallery-column-submenu,
.gallery-column-trigger.open .gallery-column-submenu {
    display: block;
}
.gallery-column-submenu .dropdown-item.active { background: var(--grey-100); }
/* .gallery-column-submenu .dropdown-item.active {
    font-weight: 600;
    background-color: var(--grey-100);
    color: var(--grey-900);
}

.gallery-column-submenu .dropdown-item:hover {
    background-color: var(--grey-100);
    color: var(--grey-900);
} */

/* Gallery drop zone strip */
.gallery-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* height: 56px; */
    /* margin-top: 20px; */
    padding: 9px 16px;
    font-size: 14px;
    line-height: 24px;
    font-weight: 600;
    color: var(--primary-base);
    border: dashed 1px var(--grey-300);
    border-radius: var(--radius-global-sm);
    background-color: var(--white);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    cursor: pointer;
    transition: ease all 0.25s;
}

.gallery-dropzone:hover,
.gallery-dropzone.drag-over {
    color: var(--primary-base);
    border-color: var(--grey-300);
    background: var(--grey-50);
}

.gallery-dropzone-text {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--primary-base);
    pointer-events: none;
    user-select: none;
}

.gallery-dropzone.drag-over .gallery-dropzone-text {
    color: var(--primary-base);
}

.gallery-dropzone.drag-over .gallery-dropzone-text svg path {
    stroke: var(--primary-base);
}

span.gallery.plus-add img {
    max-width: 100%;
}

ul.gallery-list li:hover, ul.gallery-list li:focus {
    background: var(--grey-50);
    border-color: var(--grey-300);
}

ul.gallery-list li> .photo_gallery_view {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    /* padding: 19px 20px; */
    justify-content: center;
    color: var(--grey-700);
    border-radius: var(--radius-global-md);
}

ul.gallery-list li>a {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    /* padding: 19px 20px; */
    justify-content: center;
    color: var(--grey-700);
    border-radius: var(--radius-global-md);
}

ul.gallery-list a span+span {
    color: var(--grey-700);
    padding: 0;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    word-wrap: break-word;
    overflow: hidden;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0;
    padding-top: 4px;
    position: relative;
    top: 0;
}

ul.gallery-list.left-list {
    justify-content: flex-start;
}

.modal ul.gallery-list {
	margin-top: 0;
	display: flex;
	flex-flow: wrap;
	justify-content: left;
}

.modal ul.gallery-list.gallery-masonry {
	display: block;
}

span.gallery {
	display: flex;
	margin-bottom: 0;
	justify-content: flex-start;
	text-align: left;
	align-items: center;
	min-height: 32px;
	margin-right: 12px;
}

span.gallery svg {
	height: 32px;
	width: 32px;
}

span.gallery.plus-add {
    height: 100%;
    margin-top: 0;
    margin-right: 0;
    position: relative;
    left: 0;
    top: 0;
    overflow: hidden;
    width: 100%;
}

span.gallery.plus-add a {
    position: relative;
}

span.gallery.plus-add svg {
	width: auto;
	height: auto;
}

.basic-text-photo {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    /* text-transform: capitalize; */
    margin-top: 10px !important;
    line-height: 1.25;
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* photo gallery popup css end */

/* link profile popup css */
ul.linkprofile-list {
    display: -webkit-inline-box;
    width: calc(100% + 14px);
    margin: -12px -7px -6px;
    overflow: hidden;
}

div#accordion-default .accordion-body ul.linkprofile-list {
	/* margin-top: 8px; */
}

ul.linkprofile-list ul.linkprofile-list {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
	margin-top: 0 !important;
}

.preview-show div#accordion-default .accordion-body ul.linkprofile-list {
	margin-top: -12px;
	position: relative;
}

ul.linkprofile-list li {
    width: calc(25% - 12px);
    margin: 12px 6px 0;
    padding: 0;
    background-color: var(--white);
    border: solid 1px var(--grey-200);
    transition: ease all 0.25s;
    border-radius: var(--radius-global-md);
    min-height: 100px;
    position: relative;
    overflow: hidden;
}

ul.linkprofile-list li:hover, ul.linkprofile-list li:focus {
    background: var(--grey-50);
    border-color: var(--grey-300);
}

/* ul.linkprofile-list li> .photo_gallery_view {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    padding: 19px 20px;
    justify-content: center;
    color: var(--grey-700);
    border-radius: var(--radius-global-md);
} */

ul.linkprofile-list li>a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 16px;
    justify-content: center;
    color: var(--grey-700);
    border-radius: var(--radius-global-md);
}

ul.linkprofile-list a span+span {
    color: var(--grey-700);
    padding: 0;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    word-wrap: break-word;
    overflow: hidden;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0;
    padding-top: 4px;
    position: relative;
    top: 0;
}

ul.linkprofile-list.left-list {
    justify-content: flex-start;
}

.modal ul.linkprofile-list {
	margin-top: 0;
	display: flex;
	flex-flow: wrap;
	justify-content: left;
}


div.social-icon {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50px;
}

div.social-icon img {
    height: 50px;
    width: 50px;
    object-fit: cover;
    border-radius: 50px;
}

img.img.link_profile_img_comp {
    position: absolute;
    right: -8px;
    bottom: 4px;
    width: 22px;
    height: 22px;
    border: solid #EAECF0 1px;
}


/* link profile popup css end */

/* new css */

ul.gallery-list li> .photo_gallery_view span.basic-text-photo.photo_label.d-show {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 20%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65px;
    padding: 42px 8px 12px;
    display: inline-block;
    font-weight: 500;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

figcaption.photo_label.d-show {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 20%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 28px;
    padding: 42px 8px 12px;
    display: inline-block;
    font-weight: 500;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.view_gallery_img {
    object-fit: cover;
}

/** fancy popup changes **/

.photo_link_view {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    white-space: pre-wrap;
}

.fancybox__backdrop {
    background: rgba(0, 0, 0, .8) !important;
}

.fancybox__toolbar__column.is-left {
    display: none;
}

.fancybox__toolbar__column.is-middle {
    display: none;
}

.fancybox__toolbar__column.is-right button.f-button {
    display: none;
}

.fancybox__toolbar__column.is-right button.f-button[title="Close"] {
    border-radius: 40px !important;
    top: 10px;
    right: 10px;
	display: block;
}

.fancybox__thumbs {
    display: none;
}

button.f-button {
    background: #292929;
    width: 40px;
    height: 40px;
}

.fancybox__nav .f-button:before  {
	display: none;
}

.f-button svg {
    width: 18px;
}

.fancybox__caption {
    background: #292929 !important;
    border-radius: 6px;
    left: calc(50% - 200px) !important;
    width: 100%;
    padding: 12px 20px;
    margin-top: 20px;
}

.fancybox__footer .fancybox__caption {
    padding: 12px 20px;
}

.fancybox__footer .fancybox__caption {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.fancybox__caption {
	max-width: 400px;
}

.is-compact .fancybox__footer {
	background-color: transparent !important;
}

.fancybox__caption {
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

.fancybox__caption:empty {
    display: none;
}
.fancybox__slide.has-image>.fancybox__content { width: 400px !important; height: 400px !important; }

.fancybox__slide.has-image>.fancybox__content { width: 400px !important; height: 400px !important; }

@media (min-width: 768px) {

	button.f-button.is-prev {
		left: calc(50% - 310px) !important;
	}

	button.f-button.is-next {
		right: calc(50% - 310px) !important;
	}

	.fancybox__content img.fancybox-image {
		width: 400px;
		border-radius: 6px;
	}

}

/** fancy popup changes end **/

@media (min-width: 768px) {

	ul.gallery-list li:nth-child(4n+1) {
		clear: both;
	}

}

@media (max-width: 767px) {

	ul.gallery-list li {
		width: calc(50% - 12px);
	}

	ul.gallery-list li:nth-child(2n+1) {
		clear: both;
	}

}

/* Mobile column count overrides */
@media (max-width: 575px) {
    ul.gallery-list.gallery-masonry.mobile-cols-1 { grid-template-columns: 1fr !important; }
    ul.gallery-list.gallery-masonry.mobile-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
    ul.gallery-list.gallery-masonry.mobile-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
}

/** link profile **/

ul.linkprofile-list {
    position: relative;
}

div#accordion-default .accordion-body ul.linkprofile-list::after {
    content: "";
    display: none;
    position: absolute;
    right: 0;
    height: calc(100% - 12px);
    width: 65px;
    background: linear-gradient(-90deg, rgba(249, 250, 251, 1) 10%, rgba(255, 255, 255, 0) 100%);
    opacity: 1;
    bottom: 0;
}

div#accordion-default .accordion-body ul.linkprofile-list.show-more-button-visible::after {
    display: flex; /* Show it when button is visible */
}

div#linkProfile {
    position: relative;
}

button.view_more_linkprofile {
    font-size: 14px;
    font-weight: 600;
    color: #344054;
    padding: 8px 12px;
    border: solid #D0D5DD 1px;
    background: #fff;
    z-index: 2;
    position: absolute;
    top: calc(50% - 40px);
    line-height: 18px;
    border-radius: 8px;
    transform: rotate(90deg);
    right: -40px;
	z-index: 9;
}

.link-profile-popup .modal-dialog-centered {
    max-width: 790px;
}

.link-profile-popup .modal-dialog-centered .modal-body {
    padding-top: 8px !important;
}

.linkprofile-list li > span {
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 9;
}

.link-profile-popup .modal-dialog-centered .modal-body .linkprofile-list > li {
	width: calc(20% - 12px);
}

.link-profile-popup .modal-dialog-centered .modal-body {
    overflow: auto;
    max-height: 445px;
}

a.top_arrow_ {
    width: 25px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.link-profile-popup_reorders ul.linkprofile-list {
    display: flex;
    flex-flow: column;
}

.link-profile-popup_reorders > ul > li {
    width: calc(100% - 12px);
}

.link-profile-popup_reorders ul.linkprofile-list li {
    width: calc(100% - 12px);
}

.link-profile-popup-reorders ul.linkprofile-list li {
    width: calc(100% - 12px);
    min-height: auto;
}

.link-profile-popup-reorders ul.linkprofile-list li a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 12px 16px;
}

.link-profile-popup-reorders ul.linkprofile-list li a img.img.link_profile_img {
    width: 40px;
    height: 40px;
}

.link-profile-popup-reorders div.social-icon {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    margin-right: 12px;
}

.link-profile-popup-reorders div.social-icon img.img.link_profile_img_comp {
    width: 18px;
    height: 18px;
    bottom: 2px;
    right: -6px;
}

.link-profile-popup-reorders ul.linkprofile-list li a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 12px 16px;
}

.link-profile-popup-reorders ul.linkprofile-list li a span.basic-text {
    margin-top: 0 !important;
    margin-bottom: 2px;
}

.link-profile-popup-reorders .modal-body .linkprofile-list {
    max-height: 322px;
    overflow: auto;
}

.profile-conntect-page button.view_more_linkprofile,.preview-show button.view_more_linkprofile {
    top: calc(50% - 15px);
}

@media (max-width: 767px) {

	ul.linkprofile-list li {
		width: calc(50% - 12px);
	}

	div.social-icon img {
		height: 44px;
		width: 44px;
	}

	img.img.link_profile_img_comp {
        position: absolute;
        right: -2px;
        bottom: 4px;
        width: 20px;
        height: 20px;
    }

	.link-profile-popup .modal-dialog-centered .modal-body .linkprofile-list > li {
		width: calc(100% - 12px);
	}

	ul.linkprofile-list li {
        min-height: auto;
	}

	.link-profile-popup-reorders ul.linkprofile-list li>a,
	.link-profile-popup ul.linkprofile-list li>a {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

	.link-profile-popup-reorders div.social-icon,.link-profile-popup div.social-icon {
        margin-right: 15px;
    }

	.link-profile-popup-reorders ul.linkprofile-list li>a span .basic-text,
	.link-profile-popup ul.linkprofile-list li>a span .basic-text {
        margin-top: 0 !important;
        width: 100%;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

	.link-profile-popup-reorders .basic-text + .basic-text.title_jobtitle,
	.link-profile-popup .basic-text + .basic-text.title_jobtitle {
		white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
	}

	.link-profile-popup-reorders ul.linkprofile-list li>a span,
	.link-profile-popup ul.linkprofile-list li>a span {
		width: calc(100% - 80px);
	}


	button.view_more_linkprofile {
		font-size: 14px;
	}

}

.dark_theme_img {
	display: none;
}

.light_theme_img {
    display: block;
}

span.select2-selection.select2-selection--single {
    width: 100%;
    background-color: var(--white);
    border: solid 1px var(--grey-300);
    height: 36px;
    border-radius: var(--radius-global-sm);
    font-size: 14px;
    line-height: normal;
    color: var(--grey-700);
    transition: ease all 0.25s;
    font-weight: 400;
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    width: 100%;
    padding-left: 14px;
    padding-right: 35px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
    right: 8px;
}

.select2-dropdown {
    border-color: var(--grey-300);
    border-radius: var(--radius-global-sm);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: var(--grey-300);
    font-size: 14px;
    padding: 5px 14px;
    height: 36px;
    color: var(--grey-700);
    border-radius: var(--radius-global-sm);
    background: #fff;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    color: var(--grey-700);
    font-size: 15px;
    font-weight: 400;
    margin-right: 0;
    margin-left: 10px;
}

button.select2-selection__clear {}

.select2-container--default .select2-selection--single .select2-selection__clear + span#select2-link_user_id-container {
    padding-left: 10px;
}

.select2-container--default .select2-results__option--selected {
    /* background-color: #fff; */ background-color: var(--grey-50); color: var(--grey-700);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--grey-50) !important;
    color: var(--grey-700) !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable span svg g path,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable span svg path {
    /* stroke: var(--grey-700) !important; */
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--grey-100);
}

.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered {
    color: var(--grey-300);
}

.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__arrow b {
    border-color: var(--grey-300) transparent transparent transparent;
}

.select2-search--dropdown {
    padding: 8px;
}

.select2-results__option {
    padding: 6px 8px;
}

.select2-results_option + .select2-results_option {
    margin-top: 2px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--grey-700);
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--grey-700) transparent transparent transparent;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--grey-700) transparent;
}

.select2-dropdown {
    background-color: #fff;
    border: solid 1px var(--grey-300);
}

/* social media old css start */
/* .social-badge {
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(25, 118, 210, 0.5);
    border-radius: 22px;
    background: rgba(213, 237, 255, 1);
    padding: 3.5px 6px !important;
    margin-right: 5px;
    margin-bottom: 5px;
}
.social-badge a{ color: rgba(25, 118, 210, 1); }
.social-badge:hover {
    background-color: rgba(190, 227, 255, 1);
    border-color: rgba(25, 118, 210, 0.6)
}
.social-badge a:hover { color: rgba(25, 118, 210, 1); }
.social-badge .user_social_media { display: flex; align-items: center; }
.wp-badge {
    color: rgba(56, 205, 77, 1);
    border: 1px solid rgba(56, 205, 77, 0.5);
    background: rgba(221, 254, 235, 1);
}
.wp-badge a{ color: rgba(56, 205, 77, 1); }
.wp-badge:hover {
    background-color: rgba(198, 246, 217, 1);
    border-color: rgba(56, 205, 77, 0.6);
}
.wp-badge a:hover { color: rgba(56, 205, 77, 1); } */
/* social media old css end */

/* social media new css start */
.social-media-details { display: flex; flex-wrap: wrap; gap: 6px; }
.social-badge {
    display: inline-flex; align-items: center; border-radius: 999px; background: #F2F4F7; border: 1px solid #E4E7EC;
    color: var(--grey-700); font-size: 14px; font-weight: 500; padding: 3.5px 6px !important;
}
.social-badge:hover { background: #E4E7EC; border-color: #D0D5DD; }
.social-badge a { color: var(--grey-700); text-decoration: none; display: inline-flex; align-items: center; }
/* .social-badge a:hover { color: inherit; } */
.social-badge .user_social_media { display: inline-flex; align-items: center; }
/* social media new css end */

/* partners popup image css start */
.partner-logo {
    width: auto;
    height: 100px;
}

@media (max-width: 576px) {
    .partner-logo {
        height: 50px;
        min-width: 50px;
    }
}

@media (min-width: 768px) {
    .partner-logo {
        height: 100px;
    }
}
/* partners popup image css end */

/* linkedin data import popup css start */
.find_ln_profile {
    background-color: var(--primary-50);
    border: solid 1px var(--primary-50);
    color: var(--primary-base);
    font-size: 14px !important;
    padding: 7px 12px !important;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    font-weight: 600 !important;
    transition: ease-in-out all 0.125s;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 20px;
    border-radius: var(--radius-global-sm);
}

.find_ln_profile:hover {
    background-color: var(--primary-100);
    border-color: var(--primary-100);
    color: var(--primary-base);
}

.ln-continue-btn.disabled, .ln-continue-btn:disabled, fieldset:disabled .ln-continue-btn {
    /* background: #F2F4F7 !important;
    border-color: #EAECF0 !important;
    color: #D0D5DD !important; */
    opacity: 0.65;
}

.ln-content {
	width: calc(100% - 32px);
	min-height: auto;
	display: flex;
	align-items: flex-start;
	flex-flow: column;
	justify-content: center;
}

.ln-content h6+p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: left;
    width: 100%;
    font-size: 12px;
    color: var(--grey-400);
    margin-top: 0;
    position: relative;
}

.ln-content h6 {
    font-weight: 500;
    text-align: left;
}

.ln-profile-img {
	width: 35px;
	overflow: hidden;
	height: 35px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 6px;
}

.ln-profile-img img {
	border-radius: 50px !important;
}

@media (max-width: 767px) {
    .ln-content {
		min-height: auto;
		width: calc(100% - 32px);
	}

	.ln-content h6+p {
		-webkit-line-clamp: 3;
	}

    .ln-profile-img {
		width: 35px;
		height: 35px;
	}
}
/* linkedin data import popup css end */

/* cloud tags section css start */
.accordion-cloud-tags {
}
@media (max-width: 767px) {
	.accordion-cloud-tags {
		max-width: 448px;
		margin-left: auto;
		margin-right: auto;
        margin-bottom: 10rem;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.accordion-cloud-tags {
		max-width: 720px;
		margin-left: auto;
		margin-right: auto;
        margin-bottom: 10rem;
	}
}
.cloudtags-row {
    padding-left: 5px;
    padding-right: 5px;
}
.cloudtags-row .col {
    width: 137px;
    max-width: fit-content;
}

.cloud_tags {
    background-color: var(--white);
    border: solid 1px var(--grey-200);
    padding: 9px;
    margin-top: 0px;
    margin: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: var(--grey-700);
    font-weight: 500;
    /* line-height: 24px; */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    border-radius: 24px;
	transition: ease all 0.25s;
}

.cloud_tags:hover, .cloud_tags:focus {
    color: var(--grey-700);
    border-color: var(--grey-300);
    background: var(--grey-50);
}

.cloud_text_div {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.cloud_text_div span {
    color: var(--grey-700);
    font-weight: 500;
    display: flex;
    align-items: center;
}
/* cloud tags section css end */

/* profile landing page css start */
.landing .select2-container {
    width: 240px !important;
}
@media (max-width: 595px) {
    .landing .select2-container {
        width: 100% !important;
    }
}
.landing_div {
    display: none;
}
.landing_content {
	position: relative;
    display: flex;
    align-items: center;
}
.landing_content .landing_badge {
    position: absolute;
    right: 12px;
    height: 100%;
    width: fit-content;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* top: 6px; */
    left: 6px;
}
#swft_profile .landing_content input {
    padding-left: 128px;
}
#contact_card .landing_content input, #custom_url .landing_content input {
    padding-left: 77px;
}
.landing_content input {
    padding-left: 0;
}
@media (max-width: 595px) {
    .landing .upgrade_badge { margin-top: .5rem; }
    .desktop-ugrade-branding-div a.hide_brand { display: none; }
}
@media (min-width: 596px) {
    .landing { display: flex; }
    .landing .upgrade_badge { margin-left: .5rem; padding: 8px 12px; height: 36px; }
    .responsive-ugrade-branding-div { display: none; }
}
.hide_brand.upgrade_badge { height: 36px; }
/* profile landing page css end */

/* billing settigs css start */
.billing_row {
    background: #F9FAFB;
    border-radius: 16px;
    padding: 16px;
}
.free-badge {
    background: var(--primary-50);
    border: solid var(--primary-200) 1px;
    color: var(--primary-base);
    padding: 5px 8px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
}
.billing_label {
    font-weight: 600;
}
.billing_column-l, .billing_column-r, .subscripted_column-l, .subscripted_column-r {
    padding: 20px;
    display: block;
    border-radius: var(--radius-global-md);
    margin-top: 24px;
    position: relative;
    left: 0;
    height: 100%;
}
.billing_column-l {
    background-image: url(../images/billing_bg-light.png);
    background-size: 100% 100%;
}
.billing_column-r {
    background: #FFFFFF;
    border: solid #F0F2F4 1px;
}
.subscripted_column-l {
    background: #FFFFFF;
    border: solid #F0F2F4 1px;
}
.subscripted_column-r {
    background-image: url(../images/billing_bg-light.png);
    background-size: 100% 100%;
}
.billling_title {
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    margin-bottom: 1rem;
}
.billling_title div svg {
    margin-right: .8rem !important;
}
.column_label {
    font-size: 16px;
    font-weight: 700;
    color: #182130;
    margin-bottom: 0;
}
.column_p {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-base);
}
.billing_description p, .learnmore {
    color: var(--grey-600);
}
.learnmore {
    color: var(--grey-600);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2px;
}
@media (max-width: 991px) {
    .col-sm-12:has(.billing_column-l), .col-sm-12:has(.subscripted_column-l) {
        margin-bottom: 1.5rem;
    }
}
.current-plan-badge {
    border: solid #E7E7E7 1px;
    background: #F6F6F6;
    color: #7D848F;
    padding: 5px 8px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
}
a.secondary-btn.billing_btn, button.secondary-btn.billing_btn {
	border-color: var(--grey-300);
	color: var(--grey-700);
}
button.secondary-btn.billing_btn:hover,a.secondary-btn.billing_btn:hover,
button.secondary-btn.billing_btn:focus,a.secondary-btn.billing_btn:focus {
	background-color: var(--grey-50);
	color: var(--grey-800);
}
/* billing settigs css end */

/* billing plans settigs css start */
.current-plan {
    display:flex;
    justify-content: space-between;
    align-items: center;
    background: radial-gradient(100% 100% at 50% 0%, rgba(231, 246, 252, 0.24) 0%, rgba(231, 246, 252, 0) 100%);
    border: 1px solid #E7F6FC;
    border-radius: 16px;
    padding: 24px 16px;
    margin-right: .25rem !important;
    margin-left: .25rem !important;
}
.current-plan-p {
    color:var(--grey-base);
}
.current-plan-label {
    font-size: 21px; line-height: 32.4px; font-weight: 600;
}
@media (min-width: 768px) {
    .current_btn { margin-left: auto !important; }
}
@media (max-width: 767px) {
    .current_btn { margin-top: 1.5rem; width:100%; }
}
.explore-plan {
    font-weight: 600; font-size: 16px; color: var(--grey-700);
}
.swft-plus-btn {
    display: flex;
}
@media (min-width: 992px) {
    .current_btn { margin-left: auto !important; }
    .upgrade_to_pro { margin-left: .5rem !important; }
}
@media (max-width: 991px) {
    .current_btn { margin-top: 1.5rem; }
    .upgrade_to_pro { margin-top: 1.5rem; }
}
@media (max-width: 767px) {
    .swft-plus-btn { display: block; }
    .current_btn { width:100%; }
    .upgrade_to_pro { margin-left: 0 !important; width:100%; }
}
.current-plan.swftPlus {
    border: 1px solid #E2E8FF;
    background: radial-gradient(100% 100% at 50% 0%, rgba(226, 232, 255, 0.24) 0%, rgba(226, 232, 255, 0.00) 100%);
}
.current-plan.swftPro {
    border: 1px solid #FAE2C0;
    background: radial-gradient(100% 100% at 50% 0%, rgba(250, 226, 192, 0.24) 0%, rgba(250, 226, 192, 0.00) 100%);
}
/* CHANGED: repainted to the platform pill language (same as the rd tab rows / the WL Plans Builder
   billing segment): white track with a 1px border, 999px radii, and a solid #222 active pill with
   white text + white icon stroke. The old look (grey #F2F4F7 track, 6-8px radii, white active chip
   with a drop shadow and --primary-base blue/accent text) was the only Bootstrap-era segmented
   control left on the redesigned billing page. Active stays monochrome on purpose — an accent-tinted
   label is unreadable under light WL accents. Dark-mode twin: dark_new_frontend.css. */
.individual_business {
    display: flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    height: fit-content;
    border-radius: 999px;
    padding: 3px;
    background: #FFFFFF;
    border: 1px solid var(--swft-border, #D0D5DD);
    --bs-nav-tabs-border-width: 0;
}
.individual_business > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: 999px;
    gap: 6px;
    height: 30px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: var(--swft-fg2, #616161);
    transition: background 0.2s ease, color 0.2s ease;
}
.individual_business > li > a:hover {
    background: var(--swft-card, #F1F1F1);
    color: var(--swft-fg1, #222);
}
.individual_business > li > a.active.show {
    padding: 0 16px;
    background: var(--swft-fg1, #222);
    box-shadow: none;
    color: #FFFFFF;
    font-weight: 600;
}
.individual_business > li > a svg {
    width: 16px;
    height: 16px;
}
.individual_business > li > a svg path {
    stroke: var(--swft-fg2, #616161);
}
.individual_business > li > a:hover svg path {
    stroke: var(--swft-fg1, #222);
}
.individual_business > li > a.active.show svg path {
    stroke: #FFFFFF;
}
#billing_type {
    width: 44px; height: 24px; padding: 2px;
    background-color: var(--primary-base);
    border-color: var(--primary-base);
}
.billing_badge {
    border: 1px solid #A9EFC5 !important;
    border-radius: 18px !important;
}
.cycle_tab {
    display:flex;
    align-items: center;
    justify-content:end;
}
@media(max-width: 767px) {
    .explore-plan { text-align: center; }
    .plan_tab {
        display: flex;
        justify-content: center;
    }
    .cycle_tab { justify-content: center; }
    .view-features { text-align: center; }
}
.free_plan, .swft_plus_plan, .swft_pro_plan, .business_plus_plan, .business_pro_plan, .business_max_plan {
    height: 100% !important;
    border-radius: 16px;
    display: flex;
    padding: 24px;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
}
.free_plan {
    border: 1px solid #E7F6FC;
    background: radial-gradient(100% 100% at 50% 0%, rgba(231, 246, 252, 0.24) 0%, rgba(231, 246, 252, 0.00) 100%);
}
.swft_plus_plan {
    border: 1px solid #E2E8FF;
    background: radial-gradient(100% 100% at 50% 0%, rgba(226, 232, 255, 0.24) 0%, rgba(226, 232, 255, 0.00) 100%);
}
.swft_pro_plan {
    border: 1px solid #FAE2C0;
    background: radial-gradient(100% 100% at 50% 0%, rgba(250, 226, 192, 0.24) 0%, rgba(250, 226, 192, 0.00) 100%);
}
.business_plus_plan {
    border: 1px solid #E7F6FC;
    background: radial-gradient(100% 100% at 50% 0%, rgba(231, 246, 252, 0.24) 0%, rgba(231, 246, 252, 0.00) 100%);
}
.business_pro_plan {
    border: 1px solid #FAE2C0;
    background: radial-gradient(100% 100% at 50% 0%, rgba(250, 226, 192, 0.24) 0%, rgba(250, 226, 192, 0.00) 100%);
}
.business_max_plan {
    border: 1px solid #E2E8FF;
    background: radial-gradient(100% 100% at 50% 0%, rgba(226, 232, 255, 0.24) 0%, rgba(226, 232, 255, 0.00) 100%);
}
.free_plan .card-title, .business_plus_plan .card-title {
    border-bottom: #E7F6FC 1px solid;
}
.swft_plus_plan .card-title, .business_max_plan .card-title {
    border-bottom: #E2E8FF 1px solid;
}
.swft_pro_plan .card-title, .business_pro_plan .card-title {
    border-bottom: #FAE2C0 1px solid;
}
.plan_label {
    font-weight: 600; font-size: 16px;
}
.plan_price {
    color: var(--grey-700); font-weight: 600; font-size: 22px; width: 100%;
}
.plan_month {
    color: var(--grey-base); font-weight: 400; font-size: 14px;
}
.plan_save_amt { color: var(--success-600); }
.plan_year {
    color: var(--grey-base); font-weight: 400; font-size: 14px; text-decoration-line: line-through;
}
.card-footer {
    background-color: transparent; border-top: 0;
}
.card-footer div .billing_badge {
    padding: 8px 16px; font-weight: 500; height: fit-content; width: fit-content;
}
.current_plan_btn {
    background: var(--grey-50); border-color: var(--grey-50) !important;
}
.most_pop_badge {
    color: #553711;
    border-radius: 18px;
    border: 0.8px solid #FAE2C0;
    background: linear-gradient(93deg, #FAE2C0 2.43%, rgba(250, 226, 192, 0.24) 53.94%);
    padding: 5px 8px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
}
.nfc_card_badge {
    border-radius: 8px;
    border: 0.6px solid var(--grey-base);
    color: var(--grey-700);
    padding: 5px 8px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    width: fit-content;
}
.nfc_card_badge svg g path { stroke: var(--grey-700); }
/* "Upgrade" pill — kept byte-aligned with .rd-upgrade (new_ui_light_frontend.css) so the WL-locked badge and the self-serve pill are visually identical. Dark variant in dark_new_frontend.css. */
.upgrade_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 999px;
    border: 0.6px solid #E8B903;
    background: #FFFFFF;
    color: var(--grey-700);
    padding: 8px 12px;
    height: 36px;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    width: fit-content;
}
.upgrade_badge:hover { background: #FFFAEB; }
.upgrade_badge svg path { stroke: #E8B903 !important; }
@media (max-width: 575px) {
    .col-12:has(.upgrade_badge) { margin-top: 16px; }
    .upgrade_badge { width: 100%; }
}
.upgrade_badge:hover svg path { stroke: #E8B903; }
.plus-pro-badge {
    border-radius: 8px !important;
    margin-left: .5rem;
}
.upgrade-analyics {
    height: 100% !important;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    background: linear-gradient(0deg, #FFFFFF, rgba(250, 226, 192, 0.24)), linear-gradient(180deg, rgba(250, 226, 192, 0.24) 0%, rgba(250, 226, 192, 0) 100%);
    border: 1px solid #FAE2C0;
    /* background: radial-gradient(100% 100% at 50% 0%, rgba(250, 226, 192, 0.24) 0%, rgba(250, 226, 192, 0.00) 100%); */
}
.upgrade-analyics .upgrade_badge { margin-left: auto; }
@media (max-width: 575px) {
    .upgrade-analyics { display: block; }
    .upgrade-analyics .upgrade_badge {
        margin-left: 0px;
    }
}
.showfeatures {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1* var(--bs-gutter-y));
}
.plus-features { border-top: 1px solid #E2E8FF; }
.pro-features { border-top: 1px solid #FAE2C0; }
.showfeatures>* { max-width: 100%; }
.feature-content {
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 100px;
    padding: 8px 12px;
    gap: 10px;
    border-width: 1px;
    box-shadow: 0px 1px 2px 0px #1018280D;
}
.plus-feature-content { border: 1px solid #E2E8FF; }
.pro-feature-content { border: 1px solid #FAE2C0; }
.feature-content a { color: var(--primary-600); width: max-content; }
.feature-content .circle_info_icon, .feature-content .green_tick_icon { flex-shrink: 0 !important; }
@media (min-width: 768px) {
    .showfeatures {
        display: flex;
        flex-wrap: wrap;
        column-gap: 8px; /* horizontal spacing */
        row-gap: 0;
    }
    .showfeatures > div.col-12.col-md-12.col-lg-6.col-xl-6 {
        width: calc(50% - 4px); /* subtract half the gap to keep it balanced */
    }
}
/* billing plans settigs css end */

/* custom domain settigs css start */
.info-box {
    background-color: #F2F5F7 !important;
    padding: 15px;
    border-radius: 8px;
    font-size: 15px;
    /* color: #F5F5F5; */
}
.info-box-active {
    background-color: #DFFFEA !important;
    padding: 15px;
    border-radius: 8px;
    font-size: 15px;
    color: #50cd89;
}
span.id-content input#domain_name {
    padding-left: 64px;
}
.domain_name {
    border-radius: 8px !important;
}
.domain_name::placeholder {
    color: var(--grey-400);
}
.domain_name[readonly]::placeholder { color: var(--grey-300); }
label.domain_label_disable { color: var(--grey-300); }
@media (max-width: 767px) {
    .col-sm-12:has(#save_domain_name) {
        margin-top: 1.5rem;
    }
    #save_domain_name { height: auto; }
}
.user_custom_domain {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.custom-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}
.custom-table th, .custom-table td {
    min-width: 120px;
    padding: 10px;
    text-align: left;
    word-wrap: break-word;
}
@media screen and (max-width: 767px) {
    .custom-table {
        display: block;
        /* overflow-x: auto; */
    }
    .custom-table thead, .custom-table tbody,
    .custom-table th, .custom-table td, .custom-table tr {
        display: block;
    }
    .custom-table thead {
        display: none;
    }
    .custom-table tr {
        margin-bottom: 10px;
    }
    .custom-table td {
        text-align: right;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 38%;
        position: relative;
    }
    .custom-table td::before {
        content: attr(data-label);
        font-weight: 600;
        text-transform: uppercase;
        position: absolute;
        left: 10px;
        text-align: left;
        color: var(--grey-400);
    }
}
/* custom domain settigs css end */

/* connect form settigs css end */
.connect_form_option .select2-container {
    width: 240px !important;
}
@media (max-width: 767px) {
    .connect_form_option .select2-container {
        width: 100% !important;
    }
}
/* connect form settigs css end */

/* connect button styling settigs css start */
.global-button-style {
    display: flex;
    /* justify-content: end; */
}
.connect-color-picker {
    width: 135px;
    height: 36px;
    background-color: var(--grey-400);
    border: solid 1px var(--grey-300);
    border-radius: var(--radius-global-sm);
    overflow: hidden;
    display: flex;
    padding-left: 36px;
    position: relative;
}
input#favcolor, input#fontcolor, input#borderColor, input#dwld_favcolor, input#dwld_fontcolor, input#dwld_borderColor {
    position: absolute;
    border: none;
    box-shadow: none;
    outline: none;
    height: 36px;
    transform: 0;
    left: -1px;
    top: -1px;
    width: 38px;
    border-radius: 0 !important;
}
input#colorCodebg, input#colorCodebg:focus, input#colorCodebg:hover, input#colorCodeFont, input#colorCodeFont:focus, input#colorCodeFont:hover, input#colorCodeBorder, input#colorCodeBorder:focus, input#colorCodeBorder:hover,
input#dwld_colorCode, input#dwld_colorCode:focus, input#dwld_colorCode:hover, input#dwld_colorCodeFont, input#dwld_colorCodeFont:focus, input#dwld_colorCodeFont:hover, input#dwld_colorCodeBorder, input#dwld_colorCodeBorder:focus, input#dwld_colorCodeBorder:hover {
    border: none;
    width: 100%;
    position: relative;
    border-radius: 0;
    height: 36px;
    float: left;
    text-align: center;
}
.raduis-global_style .number, .width-global_style .number {
    position: relative;
    display: flex;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    border: solid var(--grey-300) 1px;
    border-radius: 8px;
    width: fit-content;
}
button.minus, button.plus, button.width_minus, button.width_plus {
    position: relative;
    height: 34px;
    display: flex;
    align-items: center;
    width: 36px;
    justify-content: center;
    /* background: #fff; */
    cursor: pointer;
    left: 0;
    top: 0;
    border-radius: 8px;
    border: none;
}
.minus:disabled svg path, .plus:disabled svg path, .width_minus:disabled svg path, .width_plus:disabled svg path {
    stroke: var(--grey-400);
}
.raduis-global_style .number input[type="text"], .width-global_style .number input[type="text"] {
    padding: 2px 0 0 0;
    width: 61px;
    border: none !important;
    box-shadow: none !important;
    text-align: center;
    font-size: 15px;
    height: 34px;
    background: transparent !important;
    border-radius: 0;
    z-index: 1;
    padding-right: 26px;
    text-align: left;
    padding-left: 11px;
}
span.px-input {
    color: var(--grey-400);
    line-height: 33px;
    font-size: 14px;
    font-weight: normal;
    z-index: 0;
    position: absolute;
    height: 34px;
    width: 16px;
    left: 70px;
}
.preview_syling {
    border: solid var(--grey-300) 1px;
    border-radius: 8px;
    padding: 16px;
    max-width: 420px;
    width: 100%;
}
.preview_syling .connect-btn-div {
    margin-bottom: 0;
}
.connect-btn-div {
    display: flex;
    margin-top: 0;
    gap: 10px;
}
.connect-btn-div >* { flex: 1; width: 50% !important; min-width: 0; }
.connect-btn-new .btn-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.connect-btn-div a.primary-btn {
    /* width: calc(100% - 54px); */
    height: 40px; position: relative; left: 0;
}
.connect-btn-div a.profile-edit { position: relative; top: 0; }
.connect-btn-div a div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

a.profile-edit {
    /* width: 40px;*/
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    position: absolute;
    right: 0;
    color: var(--grey-700);
    bottom: 0;
    border: solid var(--grey-300) 1px;
    font-size: 14px;
    font-weight: 600;
    background: var(--white);
    line-height: normal;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    transition: ease all 0.25s;
}
/* connect button styling settigs css end */

/* user onboard in myprofile css start */
.get-started-row {
	position: relative;
	padding-top: 1px;
	width: 100%;
}
.get-started-row.hideBoardingRow { display: none; }
.content-box .card {
    border: 0px;
	padding: 24px;
	display: flex;
    border-radius: 12px;
}
.content-box .card .card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.started-title { display: flex; align-items: center; gap: 12px; }
.step-completed-badge {
    background: var(--primary-50);
    border: solid var(--primary-200) 1px;
    color: var(--primary-base);
    padding: 7px 12px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    font-size: 14px;
    font-weight: 500;
}
.content-box .card .card-body { padding: 8px 0 0 0; display: flex; align-items: center; gap: 12px; position: relative; }
@media (min-width: 375px) {
    .content-box .card .card-body .owl-stage-outer::after {
        content: "";
        position: absolute;
        top: 0;
        /* height: 100%; */
        height: -webkit-fill-available;
        width: 70px;
        background: transparent;
        display: block;
        right: -15px;
        z-index: 1;
        background: linear-gradient(270deg, #FFFFFF 0%, rgba(255, 255, 255, 0.6) 65%, rgba(255, 255, 255, 0) 100%);
    }
    .content-box .card .card-body .owl-stage-outer::before {
        content: "";
        position: absolute;
        top: 0;
        height: -webkit-fill-available;
        width: 70px;
        background: transparent;
        display: block;
        left: -15px;
        z-index: 1;
        background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.6) 65%, rgba(255, 255, 255, 0) 100%);
    }
    .content-box .card .card-body .owl-stage-outer.hide-before::before {
        display: none !important;
    }
    .content-box .card .card-body .owl-stage-outer.hide-after::after {
        display: none !important;
    }
}
#content_body { width: 100%; }
.started-content {
    width: 100%;
    max-width: 280px;
    height: auto;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--grey-200);
    box-sizing: border-box;
}
.owl-nav { margin-top: 0px !important; }
.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    border-radius: 50px !important;
    border: 1px solid var(--grey-300) !important;
    background: var(--white) !important;
    padding: 8px !important;
    margin: 0 !important;
    cursor: pointer;
    z-index: 50;
}
.owl-prev { left: -15px; }
.owl-next { right: -15px; }
.owl-next.disabled { display: none !important; }
.owl-prev:hover, .owl-next:hover {
    background-color: var(--grey-50) !important;
}

.started-content.active { border: 1px solid var(--primary-400); }
.started-content.active .content-footer a { color: var(--primary-base); }
.started-content.active .content-footer a svg path { stroke: var(--primary-base); }
.content-header { display: flex; align-items: start; gap: 12px; border-bottom: 1px solid var(--grey-200); padding-bottom: 12px; }
.content-header svg { flex-shrink: 0 !important; }
.content-detail {
    display: flex;
    align-items: flex-start;
    flex-flow: column;
    justify-content: center;
    gap: 8px;
}
.content-title {
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--grey-700);
    margin-bottom: 0;
}
.content-detail p { font-size: 12px; color: var(--grey-400); margin-bottom: 0; }
.content-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; }
.content-link { display:flex; align-items: center; color: var(--grey-700); font-weight: 600; }
/* user onboard in myprofile css end */

/* new contact page css start */
.profile-content-section.contact-section { height: 100%; }
.contact-section .row { height: 100%; }
@media (min-width: 992px) {
    .contact-section .row .col-lg-7 { padding-bottom: 24px; padding-right: 24px !important; }
}
.contact-section .row .col-lg-5 {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-left: 0px !important; background-color: var(--white);
}
.contact-section .row .col-lg-5 >* { height: 100%; }
@media (max-width: 991px) {
    .contact-section .row .col-lg-5 { display: none; }
}
.contact-section .card { border: 0; }
@media (max-width: 991px) {
    .contact-section .card { margin-bottom: 96px; }
}
.contact-section .card .card-header {
    display: flex;
    /* align-items: center; justify-content: space-between; */
    padding: 24px 16px;
    background-color:transparent;
    border-bottom: 1px solid var(--grey-200);
    /* gap: 12px; */
}
.contact-section .card .card-body {
    padding: 0px; /* for datatable */
}
.contact-section .table-responsive { padding: 8px 16px 8px 16px; border-bottom: 1px solid var(--grey-200); } /* for datatable */
@media (max-width: 991px) {
    .contact-section .table-responsive .dataTables_scrollBody { max-height: calc(100vh - 365px) !important; overflow: unset !important; position: static !important; }
}
@media (min-width: 992px) {
    .contact-section .table-responsive .dataTables_scrollBody { max-height: calc(100vh - 290px) !important; overflow: unset !important; position: static !important; }
}
.contact-section table.dataTable { margin-top: 0 !important; margin-bottom: 0 !important; }
.contact-section .li-contacts { flex-flow: column; gap: 8px; padding: 8px 0; }
.contact-section .li-details { display: flex; flex-flow: column; gap: 8px; padding: 8px; cursor: pointer; }
.contact-section .li-details.active { background: var(--grey-50); border-radius: 8px; }
.contact-section .contact-filter { height: 36px; }
.contact-person { display: flex; align-items: center; column-gap: 12px; }
.contact-person .user-profile-select { width: 40px; flex: 0 0 40px; height: 40px; margin-right: 0px; }
.contact-person .user-profile-select img { width: 40px; height: 40px; }
.contact-person .use-name-details:nth-child(2) { width: calc(100% - 228px); }
.contact-person .use-name-details:nth-child(3) { width: 120px; text-align: left; padding: 0; }
.contact-person .use-name-details:nth-child(4) { width: 120px; text-align: left; padding: 0; }
.contact-person .use-name-details:nth-child(5) { width: 36px; }
.contact-profile-badge {
    display: flex; align-items: center; padding: 5px 8px; font-weight: 500 !important; font-size: 13px !important;
    border-radius: 8px !important; color: #363F72 !important; border: 1px solid #D5D9EB !important; background: #F8F9FC !important;
    height: 28px; width: fit-content; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1;
}
.contact-profile-badge-mobile { display: none; }
.use-name-details.contact-profile-col { display: flex; align-items: center; justify-content: flex-end; }
.filter-dropdown .filter-section-title { color: var(--grey-700); }
@media (max-width: 640px) {
    .contact-person .use-name-details:nth-child(2) { width: calc(100% - 110px); display: flex; gap: 6px; }
    .contact-person .use-name-details.second-details-div { flex-direction: column; }
    .contact-person .use-name-details.contact-profile-col { display: none; }
    .contact-person .use-name-details:nth-child(4) { width: 90px; }
    .contact-profile-badge-mobile { display: flex; align-items: center; }
    .li-details .contact-person .contact_person_company {
        overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: pre-wrap;
    }
}
@media (max-width: 450px) {
    .li-details .contact-person .contact_person_company { width: 125px; }
}
@media (max-width: 400px) {
    .li-details .contact-person .contact_person_company { width: 90px; }
}
@media (max-width: 350px) {
    .li-details .contact-person .contact_person_company { width: 78px; }
}
.contact-person .use-name-details.view-buttons { display: flex; justify-content: end; gap: 4px; }
.use-list-block tr + tr {
    border-top: solid var(--grey-200) 1px; /* for datatable */
}
.li-details .contact-person .contact_person_company, .li-details .contact-person .contact_person_time  { font-size: 14px; }
.li-details .integration-contact, .li-details .integration-contact >* {
    display: flex; align-items: center; gap: 4px;
}
/* .li-contacts .integration-contact { height: 32px; } */
.li-details .integration-contact .contact-tags { flex-wrap: wrap; }
.contact-crm-icons img { width: 24px; height: 24px; }
.contact-tag-badge {
    display: flex; align-items: center; justify-content: center;
    height: 28px;
    width: fit-content;
    border-radius: 18px;
    padding: 5px 8px;
    font-weight: 500; font-size: 14px;
}
.contact-tag-badge.sales-tag-badge { color: var(--warning-700) !important; border: 1px solid var(--warning-200) !important; background: var(--warning-50) !important; }
.contact-tag-badge.enterprise-tag-badge { color: #6941C6 !important; border: 1px solid #E9D7FE !important; background: #F9F5FF !important; }
.contact-tag-badge.customer-tag-badge { color: #363F72 !important; border: 1px solid #D5D9EB !important; background: #F8F9FC !important; }
.contact-tag-badge.vip-tag-badge { color: #B32318 !important; border: 1px solid #FECDCA !important; background: #FEF3F2 !important; }
.contact-tag-badge.prospect-tag-badge { color: #C11574 !important; border: 1px solid #FCCEEE !important; background: #FDF2FA !important; }
.contact-tag-badge.marketing-tag-badge { color: #067647 !important; border: 1px solid #AAEFC6 !important; background: #ECFDF3 !important; }
.view-contact-details { display: flex; justify-content: center; align-items: center; }
.view-contact-details .inner-div-view { display: flex; align-items: center; flex-flow: column; gap: 16px; }
.view-contact-details .contact-view-label { display: flex; justify-content: center; align-items: center; flex-flow: column; text-align: center; }
.empty-contacts { display: flex; justify-content: center; align-items: center; height: 100%; }
.empty-contacts .inner-div-empty-view { display: flex; align-items: center; flex-flow: column; gap: 16px; }
.empty-contacts .empty-view-label { display: flex; justify-content: center; align-items: center; flex-flow: column; text-align: center; }
.empty-view-label .empty-see-how { color: var(--primary-base); }

.contact-view-container.card { border: 0; padding: 0 24px; display: none; }
.contact-view-container.card .card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--grey-200);
}
.contact-view-container.card .card-body { display:flex; flex-flow: column; gap: 20px; padding: 16px 0; }
.contact-view-container .contact-info { display:flex; flex-flow: column; gap: 12px; }
.contact-view-container .contact-info .contact-person { padding: 5px 0px; }
.contact-person .contact-user-details { display: flex; align-items: center; gap: 16px; }
.contact-person .contact-user-details .contact_user_img { width: 48px; height: 48px; border-radius: 50%; }
.contact-person .contact-user-details .contact_user_letter {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    color: #777a89;
    font-size: 26px;
    background-color: #EDEDF1;
    outline: 1px solid #fff;
    border-radius: 50px;
}
.contact-person .contact-user-details .contact-person-details { width: max-content; }
@media (min-width: 576px) {
    .contact-person .contact-person-details .user_name_url { display: flex; align-items: center; gap: 8px; }
}
@media (max-width: 575px) {
    .contact-person .contact-person-details .user_name_url { max-width: 215px; }
}
@media (max-width: 415px) {
    .contact-person .contact-person-details .user_name_url { max-width: 190px; }
}
@media (max-width: 370px) {
    .contact-person .contact-person-details .user_name_url { max-width: 150px; }
}
.contact-person .contact-person-details .contact_user_name {
    color: var(--grey-700); font-size: 18px; font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contact-person-details .user_name_url .user_url { display: flex; align-items: center; font-weight: 500; }
.user_name_url .user_url:hover, .user_name_url .user_url:focus { color: var(--primary-600); }
.user_url:hover svg path, .user_url:focus svg path { stroke: var(--primary-600); }
.contact-person .contact-person-details .contact_user_join_date { color: var(--grey-600); }
.contact-person .use-name-details > button { padding: 8px; }
.contact-view-container .contact-info .contact-icons { display: flex; align-items: center; gap: 32px; }
.contact-info .contact-icons .contact-icon-links { display:flex; align-items: center; gap: 6px; color: var(--primary-base); font-weight: 600; }
.contact-view-container .contact-detailed-div {
    display: flex; flex-flow: column;
    background: var(--grey-50);
    border-radius: 8px;
    gap: 8px; padding: 12px;
}
.contact-detailed-div .contact-details-a {
    display: flex; align-items: center;
    margin-bottom: 0 !important;
    gap: 8px;
    color: var(--grey-600);
}
.contact-detailed-div .contact-details-a svg { flex-shrink: 0; }
.contact-detailed-div .contact-details-a.linkedin_link { color: var(--primary-600); }
.contact-detailed-div .contact-details-a.profile_link { color: var(--primary-600); }
.card-body-separator { border-bottom: 1px solid var(--grey-200); }
.contact-view-container .contact-user-tags { display: flex; flex-flow: column; gap: 12px; }
.contact-user-tags .tag-label { font-size: 16px; font-weight: 600; margin-bottom: 0 !important; }
.contact-user-tags .contact-selected-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; /*height: 36px;*/ }
.contact-selected-tags span { margin-block: 4px; }
.contact-view-container .contact-user-integration { display: flex; flex-flow: column; gap: 12px; }
.contact-user-integration .integration-label { font-size: 16px; font-weight: 600; margin-bottom: 0 !important; }
.contact-user-integration .contact-selected-crm {
    display: flex; align-items: center; justify-content: space-between; background: var(--grey-50); border-radius: 8px; padding: 12px; gap: 8px;
}
.contact-user-integration .contact-selected-crm .crm-img-name { display: flex; align-items: center; gap: 12px; }
.contact-user-integration .crm-img-name .crm-img-div {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--white);
    border: 1px solid var(--grey-300);
    box-shadow: 0px 1px 2px 0px #1018280D;
}
.crm-img-name .crm-img-div img { width: 24px; height: 24px; }
.contact-user-integration .crm-img-name h6 { font-size: 16px; margin-bottom: 0 !important; }
.contact-user-integration .no-active-crm { color: var(--grey-base); margin-bottom: 0px; }
.contact-user-integration .synced-text { color: var(--grey-base); }
.contact-view-container .contact-user-notes { display: flex; flex-flow: column; gap: 12px; }
.col-lg-5 .contact-view-container .contact-user-notes { margin-bottom: 5rem; }
.contact-user-notes .user-note-header { display: flex; align-items: center; justify-content: space-between; }
.contact-user-notes .user-note-header .notes-label { font-size: 16px; font-weight: 600; margin-bottom: 0 !important; }
.contact-user-notes .user-note-header .add-note-button { display: flex; align-items: center; gap: 6px; color: var(--primary-base); font-weight: 600; }
.contact-user-notes .user-note-body { display: flex; flex-flow: column; gap: 8px; }
.contact-user-notes .user-note-body .notes-description {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--grey-50);
    border-radius: 8px;
    padding: 12px;
}
.contact-user-notes .user-note-body .note-name-date { display: flex; flex-direction: column; gap: 4px; width: 80%; }
.contact-user-notes .note-name-date .note_description {
    font-weight: 500;
    word-wrap: break-word; line-height: 125%;
    /* white-space: nowrap;
    text-overflow: ellipsis; */
    overflow: hidden;
}
.contact-user-notes .note-name-date .note_create_date { color: var(--grey-base); }
.notes-description .dropdown-menu { min-width: 8rem; }
.notes-description .dropdown-menu .dropdown-item { min-width: auto; }
.contact-view-container .modal-body { display:flex; flex-flow: column; gap: 20px; }
.contact-view-container .contact-edit-div { display: flex; flex-flow: column; gap: 4px; }
.contact-edit-div .contact-person-edit { display: flex; align-items: center; gap: 12px; }
.contact-person-edit .iti { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }
.contact-person-edit .iti--separate-dial-code .iti__selected-dial-code { color: var(--grey-700); }
.contact-view-container .edit-contact-buttons {
    display: flex; justify-content: flex-end;
    /* padding: 16px 12px; */
    gap: 8px; /* previous 12px */
    width: calc(100% - 198px);
}
.edit-contact-buttons button { display: flex; align-items: center; justify-content: center; border-radius: 8px; padding: 8px; }
.edit-contact-buttons button.save-edit-contact { border: 1px solid var(--success-400); }
.edit-contact-buttons button.cancel-edit-contact { border: 1px solid var(--error-base); }
.contact-user-notes .add-note-content { display: flex; flex-flow: column; gap: 8px; }
.add-note-content .save-note { display: flex; justify-content: end; }
.contact-selected-tags .add-tag-btn {
    display: flex; align-items: center; justify-content: center;
    background: var(--grey-50);
    border: 1px solid var(--grey-200);
    padding: 8px;
    border-radius: 50%;
}
.new-tag-create { display: flex; align-items: center; gap: 5px; padding: 5px 8px; }
.new-tag-create .create-tag-span { font-weight: 400; font-size: 14px; color: var(--grey-base); }
/* tomSelect css */
.ts-wrapper {
    border-radius: 8px;
    border: 1px solid var(--grey-300);
    padding: 8px 12px;
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    position: relative;
    padding-left: 32px !important;
    background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.5 17.5L12.5001 12.5M14.1667 8.33333C14.1667 11.555 11.555 14.1667 8.33333 14.1667C5.11167 14.1667 2.5 11.555 2.5 8.33333C2.5 5.11167 5.11167 2.5 8.33333 2.5C11.555 2.5 14.1667 5.11167 14.1667 8.33333Z' stroke='%2398A2B3' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 8px center;
}
.ts-control { border: none !important; background: transparent; padding: 0 !important; }
.ts-wrapper input {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    padding: 4px 6px;
}
.ts-control > input { min-width: 200px !important; font-size: 14px; color: var(--grey-700); }
.ts-dropdown {
    border-radius: 12px;
    border: 1px solid var(--grey-200);
    padding: 8px;
    background-color: var(--white);
    box-shadow: 0px 2px 4px -2px #1018280F;
    box-shadow: 0px 4px 8px -2px #1018281A;
    margin-top: 4px;
}
@media (max-width: 991px) {
    .ts-dropdown { max-height: 150px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .ts-dropdown-content { max-height: 150px; }
}
.ts-dropdown .active { background-color: var(--grey-50); }
.ts-dropdown .contact-tag-badge {
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 500;
}
.ts-control .item {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 500;
    margin-right: 6px;
}
.new-tag-create .contact-tag-badge { margin-bottom:  0px !important; }
.tag-action-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}
.tag-options-menu {
    /* position: relative; */
    display: flex;
    justify-content: space-between;
}
.tag-options-button {
    background: none;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
}
.tag-dropdown {
    position: absolute;
    right: 0;
    top: 20px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: none;
    z-index: 1000;
}
.tag-dropdown button {
    display: block;
    width: 100%;
    padding: 6px 12px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
}
.ts-wrapper.multi .ts-control > div {  background: unset; color: inherit; border: unset; }
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove { border-left: 1px solid transparent; margin-left: 0px; }
.ts-dropdown .no-results-message { color: var(--grey-700); padding: 5px 8px; }
.contact-tag-badge .remove-tag { cursor:pointer; }
.filter-container { position: relative; display: inline-block; }
.filter-container .filter-dropdown {
    position: absolute;
    display: flex;
    flex-flow: column;
    padding: 12px;
    border-radius: 8px;
    z-index: 1000;
    width: max-content;
    background: var(--white);
    border: 1px solid var(--grey-200);
    box-shadow: 0px 2px 4px -2px #1018280F;
    box-shadow: 0px 4px 8px -2px #1018281A;
    gap: 10px;
    margin-top: 5px;
    right: -2px;
    max-height: 240px;
    overflow-y: auto;
}
.filter-container .filter-dropdown .no-tags-message { color: var(--grey-600); }
.filter-dropdown .filter-tag-label { display: flex; align-items: center; gap: 12px; margin-bottom: 0; }
.filter-tag-label .form-check-input { background-color: transparent; height: 18px; width: 18px; }
.filter-tag-label .form-check-input:checked { background-color: var(--primary-base); }
.filter-container .contact-filter .filter-count-badge {
    display: flex; align-items: center; justify-content: center;
    width: fit-content;
    border-radius: 18px;
    padding: 4px 7px;
    font-weight: 500; font-size: 14px;
    background-color: var(--primary-base);
    border: solid 1px var(--primary-base);
    color: var(--white);
}
.contact-tag-badge .remove-filter { cursor:pointer; }
.contact-section .card-header .active-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag-options-menu .dropdown-menu { min-width: 8rem; }
.tag-options-menu .dropdown-menu .dropdown-item { min-width: auto; }
/* new contact page css end */

/* new digital wallet page css start */
.digital-wallet-section .learn-wallet-sharing { display: flex; align-items: center; justify-content: space-between; padding: 24px; }
.digital-wallet-section .learn-sharing-title { display: flex; flex-direction: column; gap: 8px; }
.digital-wallet-section .wallet-title { font-size: 16px; font-weight: 600; margin-bottom: 0px; }
.digital-wallet-section .learn-sharing-title p, .unlock-appearance .appearance-content p { color: var(--grey-600); }
.digital-wallet-section button { width: fit-content; }
.digital-wallet-section .appearance-label { display: flex; align-items: center; font-weight: 500; }
.learn-wallet-sharing .sample-wallet-img { width: 98px; }
.digital-wallet-section .custom-appearance-row { display: flex; justify-content: space-between; padding-left: 0.75rem; padding-right: 0.75rem; }
.custom-appearance-row .unlock-appearance { display: flex; flex-direction: column; gap: 16px; }
.unlock-appearance .appearance-content { display: flex; flex-direction: column; gap: 6px; }
.image-container {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.custom-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
}
@media (min-width: 992px) {
    .image-container { height: 300px; border-radius: 0 12px 12px 0; }
    .custom-image { width: auto; height: 100%; object-fit: cover; object-position: left; }
    .wallet-video { width: 120px; height: 120px; border-radius: 8px; overflow: hidden; }
}
@media (max-width: 991px) {
    .wallet-video { width: 100px; height: 100px; border-radius: 8px; }
    .learn-wallet-sharing { gap: 16px; }
    .image-container { border-radius: 0 0 12px 12px; }
}
.wallet-preview { height: 100% !important; border-radius: 12px; border: 0; }
.wallet-preview .card-title { padding: 24px; margin-bottom: 0; border-bottom: solid var(--grey-200) 1px; gap: 8px; }
.wallet-preview > .card-body { padding: 24px; display: flex; align-items: center; flex-direction: column; gap: 24px; }
.apple-google {
    display: flex;
    align-items: center;
    width: fit-content;
    height: fit-content;
    border-radius: 8px;
    padding: 4px;
    background: #F2F4F7;
    --bs-nav-tabs-border-width: 0;
}
.apple-google > li > a {
    display: flex;
    align-items: center;
    border-radius: 6px;
    gap: 4px;
    padding: 8px 16px;
    color: var(--grey-base);
}
.apple-google > li > a.active.show {
    padding: 8px 16px;
    background: var(--white);
    box-shadow: 0px 4px 4px 0px rgba(19, 56, 72, 0.06);
    color: var(--primary-base);
}
/* User-side digital wallet (.dw-redesign): the active Apple/Google segment must NOT use the WL brand colour (--primary-base is WL-overridden in new_ui_header). Light mode = white pill -> neutral dark text. Admin/WL pass-template pages keep the brand colour. */
@media (max-width: 374px) {
    .apple-google > li > a, .apple-google > li > a.active.show { padding: 8px 8px; }
}
.wallet-preview .apple-preview-card, .wallet-preview .google-preview-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--grey-300);
    border-radius: 16px;
    width: 255px;
    height: 400px;
}
.apple-preview-card .card-title { display: flex; align-items: center; padding: 16px; border: 0 !important; }
.apple-preview-card .card-body { display: flex; flex-direction: column; justify-content: space-between; padding: 16px; }
.apple-preview-card .card-body .digital-wallet-card { display: flex; flex-direction: column; gap: 24px; }
.apple-preview-card .card-body .wallet-card-label, .google-preview-card .card-body .wallet-card-label {
    display: flex; justify-content: flex-start; flex-direction: column; gap: 4px;
}
.apple-preview-card .wallet-card-label .wallet-card-title { color: #888CA1; }
.card-title .wallet-card-company { color: #000; font-size: 13.5px; font-weight: 600; margin-bottom: 0px; }
.card-title .apple-card-icon { height: 28px; border-radius: 2px; }
.wallet-card-label .wallet-card-name { color: #000; font-size: 16px; font-weight: 500; }
.wallet-card-label .wallet-card-title { color: #000; font-size: 10px; }
.wallet-card-label .wallet-card-bio { color: #000; }
.apple-preview-card .wallet-card-qrcode { display: flex; justify-content: center; }
.wallet-card-qrcode .qrcode-div { display: flex; align-items: center; justify-content: center; background: var(--white); border: 0.85px solid var(--grey-300); width: 100px; height: 100px; border-radius: 8px; }
/* .wallet-preview .google-preview-card { display: flex; flex-direction: column; } */
.google-preview-card .card-title { padding: 16px; border: 0 !important; border-bottom: 0.5px solid var(--grey-300) !important; }
.card-title .google-card-icon { height: 28px; border-radius: 50%; border: 0.85px solid var(--grey-300); }
.google-preview-card .card-body { display: flex; flex-direction: column; justify-content: space-between; padding: 16px; }
.google-preview-card .card-body .digital-wallet-card { display: flex; flex-direction: column; gap: 12px; }
.google-preview-card .card-body .wallet-card-label { display: flex; justify-content: flex-start; flex-direction: column; gap: 4px; }
.google-preview-card .card-body .card-body-separator { border-bottom: 0.5px solid var(--grey-300); }
.google-preview-card .wallet-card-qrcode { display: flex; justify-content: center; }
.google-preview-card .qrcode-div { width: 120px; height: 120px; }
.wallet-preview .wallet-card-btn { display: flex; align-items: center; justify-content: center; }
.wallet-card-btn button { margin-top: 0px !important; }
.field.wallet-file-upload { position: relative; }
.field.wallet-file-upload div { margin-bottom: 0; }
.field.wallet-file-upload p { margin-bottom: 0; color: var(--grey-base); font-size: 12px; margin-top: 4px; }
.field.wallet-file-upload div input[type="file"] {
    opacity: 0;
    visibility: hidden;
    width: 0;
    height: 0;
    display: none;
    overflow: hidden;
}
.wallet-file-upload img {
    border-radius: 8px;
    object-fit: cover;
    height: 60px !important;
}
.dw-icon-column img { width: 60px !important; border-radius: 50%; }
.dw-logo-column img { width: fit-content !important; }
@media (max-width: 545px) {
    .dw-logo-column img {
        /* width: 130px !important; */
    }
}
input#colorCodeText, input#colorCodeText:focus, input#colorCodeText:hover, input#colorCodeBg, input#colorCodeBg:focus, input#colorCodeBg:hover {
    border: none;
    width: 100%;
    position: relative;
    border-radius: 0;
    height: 36px;
    float: left;
    text-align: center;
}
input#dw_text_color, input#dw_bg_color {
    position: absolute;
    border: none;
    box-shadow: none;
    outline: none;
    height: 36px;
    transform: 0;
    left: -1px;
    top: -1px;
    width: 38px;
    border-radius: 0 !important;
}
.desktop-dw-btn { display: block; }
.wallet-preview .wallet-edit-btn { display: flex; align-items: center; gap: 12px; }
.dw-popup-video { position: relative; display: flex; }
.dw-video-wrapper {
    position: relative;
    display: inline-block;
    width: 140px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
}
.dw-video-wrapper .dw-video-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; }
.responsive-dw-btn { display: none; }
@media (max-width: 991px) {
    .dw-video-wrapper { width: 90px; }
    .desktop-dw-btn { display: none; }
    .responsive-dw-btn {
        position: fixed;
		display: block;
		width: 100%;
		/* height: 72px; */
		bottom: 72px;
		z-index: 10;
		top: inherit;
        background: rgba(255, 255, 255, 0.85);
        box-shadow: 0px -1px 2px 0px rgba(16, 24, 40, 0.05);
        backdrop-filter: blur(4px);
	}
    .responsive-dw-btn .sidebar-content>* { display: flex; align-items: center; gap: 12px; }
}
.dw-video-wrapper .dw-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000033;
    pointer-events: none;
}
.dw-video-wrapper .dw-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    background: #1B1B1B;
    box-shadow: 0px 1px 2px 0px #1018280D;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.fancybox__content > .f-button.is-close-btn {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff !important;
}
.fancybox__content > .f-button.is-close-btn svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
}
.fancybox__content> .f-button.is-close-btn:hover {
    opacity: 1;
    background: rgba(70, 70, 73, 0.65);
}
/* new digital wallet page css end */

/* user pixel integration page css start */
.pixel-integration-user .pixel-integration-input::placeholder { color: var(--grey-400); }
.pixel-integration-user .pixel-integration-input[readonly]::placeholder { color: var(--grey-300); }
.pixel-integration-user .pixel-integration-label { display: flex; flex-direction: column; margin-bottom: 0; }
.pixel-integration-user .pixel-integration-label span { display: flex; flex-direction: column; margin-top: 24px; color: #777A89; }
/* user pixel integration page css end */

/* website icon update css start */
.upload-website-logo { display: flex; align-items: center; gap: 12px; }
.upload-website-logo .website-upload-favicon-div { display: flex; align-items: center; justify-content: center; flex-direction: column; }
.upload-website-logo .logo_a_href { border: 1px dashed var(--grey-300); border-radius: 8px; padding: 8px; display: flex; align-items: center; justify-content: center; }
.upload-website-logo .website-upload-favicon-div { gap: 4px; }
.upload-website-logo .logo_a_href.favicon { width: 66px; height: 66px; }
.upload-website-logo .js-favicon-preview .resetWebsiteFavicon { color: var(--grey-600); }
.upload-website-logo .js-favicon-preview .resetWebsiteFavicon:hover { color: var(--primary-base); }
img.website-icon-image-edit { width: 46px; object-fit: cover; border-radius: 8px; }
/* website icon update css end */

/* social link icon update css start */
.upload-btn, .reset-btn { display: flex; }
.socialicon-img { width: 32px; height: 32px; border-radius: 6px; }
.socialicon-preview .reset-btn { display: none; }
.socialicon-preview.has-file .upload-btn { display: none; }
.socialicon-preview.has-file .reset-btn { display: flex; color: var(--grey-600); }
span.social-icon img { border-radius: 6px; }
/* social link icon update css end */

/* crm integration css start */
.crm-main-div { border: 1px solid var(--grey-200); box-shadow: 0px 1px 2px 0px #1018280D; border-radius: 8px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.different-integration-div { border: 1px solid var(--grey-200); box-shadow: 0px 1px 2px 0px #1018280D; border-radius: 8px; padding: 20px; display: flex; }
.different-integration-icon { display: flex; align-items: center; justify-content: center; padding: 10px; background: var(--grey-50); border-radius: 50%; height: fit-content; }
.link_a { color: var(--primary-base); }
.crm-logo-div { display: flex; align-items: center; justify-content: center; padding: 8px; border: 1px solid var(--grey-200); border-radius: 8px; width: 50px; min-width: 50px; height: 50px; }
.crm-logo-div img { width: 100%; height: 100%; object-fit: contain; }
.crm-title { margin-bottom: 0; font-size: 16px; font-weight: 500; }
.connected-span { color: var(--success-base); font-size: 12px; display: flex; align-items: center; }
.connected-span.success-connected-span { color: var(--success-base); }
.connected-span.warning-connected-span { color: var(--grey-400); }
.connected-span.secondary-connected-span { color: var(--grey-400); }
.field-mapping-title { border-bottom: 1px solid var(--grey-200); }
.error-message { color: red; display: none; }
.invalid-feedback { color: #F04438; }
.help_link { font-size: 14px; color: var(--primary-base) !important; display: flex; align-items: center; }
.crm-connect-badge { display: flex; align-items: center; background-color: #DFFFEA; border-radius: 8px; padding: 12px; color: #50cd89; gap: 8px; }
input[type="radio"] { height: 1.25rem !important; width: 1.25rem !important; }
.field-mapping-title p { font-weight: 500 !important; }
.crm-alert-msg { border-radius: 8px !important; }
.crm-alert-msg.alert-success { background: var(--success-50); border: solid var(--success-200) 1px; color: var(--success-600); }
.crm-alert-msg.alert-danger { background: var(--error-50); border: solid var(--error-200) 1px; color: var(--error-600); }
.crm-description { display: flex; flex-direction: column; margin-top: 8px; gap: 2px; }
.crm-description p { color: var(--grey-base); }
/* crm integration css end */

/* language dropdown css start */
.language-div .select2-container {
    width: 200px !important;
}
@media (max-width: 595px) {
    .language-div .select2-container {
        width: 100% !important;
    }
}
/* language dropdown css end */

/* multiple profile css start */
.add-profile-step-dot { width: 20px; height: 4px; border-radius: 999px; background: #D0D5DD; display: inline-block; margin: 0 4px; }
.add-profile-step-dot.active { background: #2E90FA; }
#addProfileTabs { display: none !important; }
#add-profile-modal .modal-dialog { height: auto !important; }
#add-profile-modal .modal-content { height: auto !important; max-height: none !important; }
#add-profile-modal .modal-body { flex: 0 0 auto !important; height: auto !important; max-height: none !important; overflow: visible !important; }
.profile-details-checkbox { border: 1px solid var(--grey-300); border-radius: 8px; }
.profile-popup-label { border-top: 1px solid var(--grey-300); padding: 14px; display: flex; align-items: start; gap: 8px; margin-bottom: 0px !important; }
.profile-popup-label:first-child { border-top: none; }
/* Profile switcher: compact on desktop; avatar-only closed state on mobile */
.user-profile-select-wrap { position: relative; }
.user-profile-select-wrap .select2-container { max-width: 220px; width: 150px; }
.user-profile-select-wrap .select2-container .select2-selection--single { min-height: 38px; height: auto; }
@media (max-width: 767px) {
    .user-profile-select-wrap .select2-container { max-width: 65px !important; width: 65px !important; min-width: 65px !important; }
    .user-profile-select-wrap .select2-container .select2-selection--single { min-height: 40px; padding-left: 4px !important; padding-right: 18px !important; }
    .user-profile-select-wrap .select2-container .select2-selection__arrow { right: 4px !important; width: 16px !important; }
    .user-profile-select-wrap .select2-container .select2-selection__arrow b { margin-left: -5px; }
    /* Hide label in closed control only; dropdown options stay full in .select2-results */
    .user-profile-select-wrap .select2-container .select2-selection__rendered .user-profile-select-label { display: none !important; }
    .user-profile-select-wrap .select2-container .select2-selection__rendered .user-profile-select-option { justify-content: center; gap: 0 !important; }
    .user-profile-select-wrap .select2-container .select2-selection__rendered .user-profile-select-option img { margin: 0 !important; }
    .user-profile-select-wrap .select2-container--default .select2-selection--single .select2-selection__rendered { padding-right: 20px !important; }
    /* Dropdown panel - now inside .user-profile-select-wrap thanks to dropdownParent */
    .user-profile-select-wrap .select2-container--open .select2-dropdown { width: 220px !important; min-width: 220px !important; right: 0 !important; left: auto !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
    /* Ensure dropdown options are readable on mobile */
    .user-profile-select-wrap .select2-results__option .user-profile-select-option { display: flex !important; align-items: center; gap: 8px !important; }
    .user-profile-select-wrap .select2-results__option .user-profile-select-label { display: inline !important; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .user-profile-select-wrap .select2-results__option .user-profile-select-option img { width: 28px !important; height: 28px !important; flex-shrink: 0; }
    .user-profile-select-wrap .select2-results__option { padding: 8px 10px !important; }
}
.multiple-profile .select2-container { min-width: max-content; }
.user-profile-select-wrap .select2-container .profile-manage-icon { flex-shrink: 0; cursor: pointer; padding: 2px 4px; border-radius: 4px; line-height: 0; }
.user-profile-select-wrap .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable .upgrade_badge { background-color: #fff !important; }
.user-profile-select-wrap .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable .upgrade_badge > svg path { stroke: #E8B903 !important; }
/* .profile-manage-icon:hover { color: var(--white); } */
.profile-manage-icon svg { pointer-events: none; }
/* multiple profile css end */

/* vCard customizer css start */
.download-card-screen-two .dc-title-row { display: flex; align-items: center; justify-content: space-between; }
.download-card-screen-two .dc-field-row { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.download-card-screen-two .dc-label-wrap { min-width: 140px; }
.download-card-screen-two .dc-label { margin: 0; }
.download-card-screen-two .dc-sub-label { margin: 0; color: #98a2b3; font-size: 12px; line-height: 16px; }
.download-card-screen-two .dc-remove { display: inline-flex; align-items: center; justify-content: center; }
.download-card-screen-two .dc-add-field { margin-top: 16px; width: 100%; }
.download-card-screen-two .dc-token {
    display: flex; align-items: center; background-color: var(--primary-25); border: solid 1px var(--primary-100); border-radius: var(--radius-global-sm);
	color: var(--primary-base); font-size: 14px; line-height: 28px; padding: 0 8px; height: 28px; flex: 0 1 auto; min-width: 0; max-width: 320px; width: fit-content; gap: 6px;
}
.download-card-screen-two .dc-token .dc-token-icon { flex: 0 0 auto; width: 12px; height: 12px; }
.download-card-screen-two .dc-token .dc-token-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.download-card-screen-two .dc-field-row .dc-override-btn { margin-left: auto; }
.download-card-screen-two .dc-override-btn { background-color: #fff !important; border: solid 1px var(--grey-300) !important; color: var(--grey-700) !important; font-weight: 500; padding: 6px 14px; border-radius: var(--radius-global-sm); }
/* .download-card-screen-two .dc-override-btn { background-color: var(--grey-50) !important; border: solid 1px var(--grey-200) !important; color: var(--grey-600) !important; } */
.vcard-preview-section .dc-preview-label { color: var(--grey-base); }
.dc-add-field-wrap { position: relative; }
.dc-add-field-wrap .dc-field-picker {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid var(--grey-300); border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.13); max-height: 300px; padding: 12px; overflow-y: auto; z-index: 1050; display: none;
}
.dc-field-picker .dc-picker-group-label { font-size: 14px; font-weight: 500; margin-top: 4px; text-transform: uppercase; }
.dc-field-picker .dc-picker-item { padding: 6px 10px; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.dc-field-picker .dc-picker-item.dc-picker-item-disabled { cursor: not-allowed; opacity: 0.45; pointer-events: none; }
.dc-field-picker .dc-picker-icon { align-items: center; justify-content: center; padding: 5px; border-radius: 6px; display: flex; flex-shrink: 0; }
.dc-field-picker .dc-picker-item:hover:not(.dc-picker-item-disabled) { background-color: var(--grey-50) !important; color: var(--grey-700) !important; }
.dc-field-row .dc-custom-text-input { flex: 1; min-width: 0; }
/* baps: constrained width to match phone custom label sizing */
.dc-field-row .dc-custom-label-input { flex: 0 0 auto; max-width: 130px; min-width: 0; }
/* .dc-field-row .dc-custom-label-input { flex: 0 0 120px; min-width: 0; } */
.dc-field-row .dc-address-fields { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
@media (max-width: 767px) {
    .download-card-screen-two .dc-title-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .download-card-screen-two .dc-field-row { flex-wrap: wrap; gap: 6px; }
    .download-card-screen-two .dc-label-wrap { min-width: unset; flex: 1; }
    .download-card-screen-two .dc-remove { order: 2; flex-shrink: 0; }
    .download-card-screen-two .dc-action-btn { margin-left: 0; order: 2; }
    .download-card-screen-two .dc-field-row > input { order: 10; }
    .download-card-screen-two .dc-field-row::after { content: ""; flex-basis: 100%; height: 0; order: 9; }
    /* .download-card-screen-two .dc-token { order: 5; width: 100%; flex: 1 1 100%; } */
    .download-card-screen-two .dc-token { order: 10; flex: 0 0 auto; width: fit-content; max-width: 100%; }
    .download-card-screen-two .dc-field-row > input { flex: 1 1 100%; }
    .dc-address-fields { order: 10; width: 100%; flex-direction: column; }
    /* .dc-add-field-wrap .dc-add-field, */
    .vcard-preview-section .dc-test-download-btn { height: 36px !important; }
    .vcard-preview-section .p-4 { flex-direction: column; align-items: flex-start !important; }
    .vcard-preview-section .dc-preview-row { flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1px !important; }
    .vcard-preview-section .dc-preview-label { order: 1; flex: 0 0 auto !important; }
    .vcard-preview-section .dc-preview-row .badge { order: 2; }
    .vcard-preview-section .dc-preview-value { order: 3 ; flex: 0 0 100% !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: break-word !important; }
    .dc-test-download-btn { width: 100%; }
}

.vcard-preview-section .dc-preview-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.vcard-preview-section .dc-preview-row:last-child { border-bottom: none; }
/* .vcard-preview-section .dc-preview-label { min-width: 68px; } */
.vcard-preview-section .dc-preview-label { min-width: 150px; }
.vcard-preview-section .dc-preview-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-preview-row-disabled .dc-preview-label, .dc-preview-row-disabled .dc-preview-value { opacity: 0.45; }
.dc-field-disabled { opacity: 0.45; }
/* vCard customizer css end */

/* custom domain dns provider css start */
.dpp-card .dpp-warnings:last-child { margin-bottom: 0; }
.dpp-card { border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; background: #fafafa; }
.dpp-card.dpp-error { border-color: #fca5a5; background: #fff1f2; }
.dpp-card.dpp-warning { border-color: var(--grey-300); background: #fff; }
.dpp-card [data-dpp-content] { display: flex; flex-direction: column; gap: 8px; }
.dpp-header { display: flex; align-items: center; gap: 8px; }
.dpp-provider-name { font-weight: 600; }
.dpp-tag { font-size: 12px !important; border-radius: 18px !important; }
.dpp-tag.dpp-tag-warn { font-size: 12px; border-radius: 18px; }
.dpp-record-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.dpp-record-table th, .dpp-record-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid #e5e7eb; font-size: 12px; }
.dpp-record-table th { background: #f3f4f6; font-weight: 600; color: #374151; }
.dpp-record-table code { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-size: 0.85rem; }
.dpp-copy-cell { display: flex; align-items: center; gap: 8px; }
.dpp-copy-cell code { flex: 1; word-break: break-all; }
/* .dpp-copy-btn { cursor: pointer; padding: 4px 8px; background: #fff; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.75rem; color: #374151; flex-shrink: 0; } */
/* .dpp-copy-btn:hover { background: #f3f4f6; } */
/* .dpp-copy-btn.dpp-copied { background: #dcfce7; border-color: #86efac; color: #166534; } */
.dpp-steps { padding-left: 20px; font-size: 13px; color: var(--grey-base); display: flex; flex-direction: column; gap: 2px; margin-bottom: 0px; }
.dpp-warnings { padding: 10px 12px; background: var(--warning-50); color: var(--warning-600); border-radius: 6px; }
.dpp-warnings label { display: flex; align-items: center; gap: 2px; color: var(--warning-600); font-weight: 500; }
.dpp-warnings ul { margin: 4px 0 0 16px; padding: 0; }
.dpp-link { display: flex; align-items: center; }
/* .dpp-link:hover { text-decoration: underline; } */
.dpp-spinner { color: #6b7280; font-size: 12px; }
.dpp-error-msg { color: #b91c1c; font-size: 12px; }
@media screen and (max-width: 575px) {
    .dpp-header { align-items: start; flex-direction: column; }
}
@media screen and (max-width: 575px) {
    .dpp-links-div { align-items: start; flex-direction: column; gap: 4px; }
    .dpp-links-div .dpp-link-sep { display: none; }
}
/* custom domain dns provider css end */

/* WL billing plan cards css start */
.wl_tier_list { display: flex; flex-direction: column; gap: 4px; }
.wl-pending-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--warning-50); border: 1px solid var(--warning-200); border-radius: 8px; padding: 12px; color: var(--warning-600); gap: 8px; }
.wl-pending-banner label { color: var(--warning-600); font-weight: 500; }
.wl-pending-banner button.cancel_planreq_btn { color: var(--warning-600) !important; border: 1px solid var(--warning-300) !important; background: transparent; }
.wl-pending-banner button.cancel_planreq_btn:hover, .wl-pending-banner button.cancel_planreq_btn:focus { background: var(--warning-100) !important; }

.wl-plan-active-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--success-50); border: solid var(--success-200) 1px; color: var(--success-600); border-radius: 8px; padding: 12px; gap: 8px; }
.wl-plan-active-banner label { color: var(--success-600); font-weight: 500; }
.wl-plan-active-banner button.wl-decision-banner-dismiss { color: var(--success-600) !important; border: 1px solid var(--success-300) !important; background: transparent; }
.wl-plan-active-banner button.wl-decision-banner-dismiss:hover, .wl-plan-active-banner button.wl-decision-banner-dismiss:focus { background: var(--success-100) !important; }

.wl-plan-reject-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--error-50); border: solid var(--error-200) 1px; color: var(--error-600); border-radius: 8px; padding: 12px; gap: 8px; }
.wl-plan-reject-banner label { color: var(--error-600); font-weight: 500; }
.wl-plan-reject-banner button.wl-decision-banner-dismiss { color: var(--error-600) !important; border: 1px solid var(--error-300) !important; background: transparent; }
.wl-plan-reject-banner button.wl-decision-banner-dismiss:hover, .wl-plan-reject-banner button.wl-decision-banner-dismiss:focus { background: var(--error-100) !important; }
/* WL billing plan cards css end */