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


/* Variables Style */
:root {
	--white: #fff;
	--black: #000;
	/** light grey **/
    --grey-25: #FCFCFD;
	--grey-50: #F5F5F5;
	--grey-100: #CCCCCC;
	--grey-200: #999999;
	--grey-300: #454545;
	--grey-400: #3D3D3D;
	--grey-base: #333333;
	--grey-600: #292929;
	--grey-700: #212121;
	--grey-800: #1B1B1B;
    /** 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;
}

/* End Variables Style */


/* Dark Mode CSS  */

html, body {
	color: var(--grey-25);
}

body {
	background: var(--grey-700);
}

body {
	color: var(--grey-50);
}

.dark-mode {
   background: var(--grey-700) !important;
}

.page-header-section {
   background: rgba(26, 26, 26, 0.85);
}

.content-box {
   background-color: var(--grey-600);
}

.accordion-item {
    background-color: rgba(0,0,0,0.1);
}

.accordion-item {
   color: var(--grey-50);
}

ul.social-icon-list li {
   background-color: var(--grey-600);
   border: solid 1px var(--grey-base);
   box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

ul.social-icon-list li:hover,
ul.social-icon-list li:focus {
	border: solid 1px var(--grey-base);
   background-color: var(--grey-base);
}

ul.social-icon-list a span+span {
   color: var(--grey-50);
}

div#Website-links .website-link-column {
   background-color: var(--grey-600);
   border: solid 1px var(--grey-base);
 }

div#Website-links .website-link-column:hover,
div#Website-links .website-link-column:focus {
   border: solid 1px var(--grey-base) !important;
   background-color: var(--grey-base) !important;
}

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

p {
	color: var(--grey-50);
}

h5 + p {
    color: var(--grey-100);
}

label {
    color: var(--grey-50);
}

.link-content h6+p {
   color: var(--grey-100);
}

input[type="text"], input[type="password"], input[type="email"],
input[type="url"], input[type="date"], input[type="tel"] {
    background-color: transparent;
    border: solid 1px var(--grey-400);
	box-shadow:  0px 1px 2px 0px rgba(16, 24, 40, 0.05);
	color: var(--grey-50);
}
input:-webkit-autofill {
    background-color: transparent !important; /* Override autofill background */
    color: var(--grey-50) !important; /* Ensure text remains visible */
    -webkit-text-fill-color: var(--grey-50) !important; /* Ensures text color stays white */
    transition: background-color 5000s ease-in-out 0s; /* Prevents autofill override */
}
p.password-info {
    color: var(--grey-200);
}

select, .iti__country-list {
    background-color: var(--grey-600);
    border: solid 1px var(--grey-400);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    color: var(--grey-50);
}

.border-button {
    background-color: var(--grey-600);
    border: solid 1px var(--grey-400);
    color: var(--grey-50);
    transition: ease all 0.5s;
}

.border-button:hover,
.border-button:focus {
   color: var(--grey-50);
   border: solid 1px var(--grey-base);
    background-color: var(--grey-base);
}

span.website-link-button svg,
span.website-link-button path {
   stroke: var(--grey-50);
}

span.link-profile-button svg,
span.link-profile-button path {
   stroke: var(--grey-50);
}

p.bio-content {
   color: var(--grey-50);
}

.profile-details li,
.profile-details span,
p a {
   color: var(--grey-50);
}

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

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

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

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

.profile-details path#Icon {
    stroke: var(--grey-200);
}

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

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

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

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

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

span.page-lable {
   background-color: rgba(74, 121, 243, 0.25);
   border: solid 1px var(--primary-base);
   color: var(--primary-base);
}

a.drag-toggle-button {
    background-color: var(--grey-600);
    color: var(--grey-50);
}

a.drag-toggle-button:hover,
a.drag-toggle-button:focus,
a.drag-toggle-button:active {
    background-color: var(--grey-base);
    color: var(--grey-50);
}

a.drag-toggle-button svg,
a.drag-toggle-button svg path {
   fill: var(--grey-50);
   stroke: var(--grey-50);
}

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

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

ul.dropdown-menu {
   background-color: var(--grey-600);
   border-color: var(--grey-base);
}

.dropdown-menu {
    background-color: var(--grey-600);
    border-color: var(--grey-base);
 }

span.social-icon {
    width: 32px;
    justify-content: center;
    height: 32px;
	border-radius: 6px;
}

.profile-image a.profile-edit {
    /* min-width: auto;
    padding: 0 12px; */
    /* width: 80px; */
    /* min-width: 80px;
    width: auto; */
    background: transparent;
    color: var(--grey-50);
	/* white-space: nowrap;
	gap: 4px; */
}

.profile-image a.profile-edit svg,
.profile-image a.profile-edit path {
	stroke: var(--grey-50);
}

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

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

span.social-icon.plus-add {
    background: transparent;
}

.connect-btn a.profile-edit,
.connect-btn button.profile-edit {
    background: transparent;
	border-color: var(--grey-400);
}

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

.dropdown-menu li a {
	color: var(--grey-50);
}

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

.modal-content {
    color: var(--grey-100);
    background-color: var(--grey-600);
    outline: 0;
}

.modal-title {
    color: var(--grey-50);
}

.modal-header {
    border-color: var(--grey-600);
}

.dropdown-menu li a path {
	stroke:var(--grey-50);
}

.grey-btn {
    background-color: transparent;
    border-color: var(--grey-400);
    color: var(--grey-50);
}

.grey-btn:hover, .grey-btn:focus, .grey-btn:active {
    background-color: var(--grey-base);
    border-color: var(--grey-400);
    color: var(--grey-50);
}

.danger-btn {
    background-color: transparent;
    color: var(--error-base);
    border-color: var(--error-base);
}

.danger-btn svg,.danger-btn path {
	stroke: var(--grey-50);
}

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

.danger-btn path#Icon {
    stroke: var(--error-base);
    stroke-width: 2px;
    transform: ease-in-out all 0.125s;
}

.danger-btn:hover path#Icon, .danger-btn:focus path#Icon {
    stroke: var(--grey-50);
}

.modal-header .btn-close svg, .modal-header .btn-close path {
    stroke: var(--grey-50);
}

.grey-column-b {
    background-color: var(--grey-600) !important;
    border: solid 1px var(--grey-base) !important;
}

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

.connect-btn a.profile-edit svg,
.connect-btn a.profile-edit path {
	stroke: var(--grey-50);
}

.connect-btn button.profile-edit svg,
.connect-btn button.profile-edit path {
	stroke: var(--grey-50);
}

li.logout {
    border-top: solid var(--grey-300) 1px;
}

p.power-logo {
    color: var(--grey-300);
}

.new-power-logo p, .new-power-logo p a { color: var(--grey-200) !important; }
.responsive-new-power-logo p, .responsive-new-power-logo p a { color: var(--grey-200) !important; }

.power-logo g#swft path,g#swft + path {
    /* fill: var(--grey-300); */
}

.login-register-btn p a {
    color: var(--grey-100);
}

.login-register-btn p a #chevron-left path {
	stroke: var(--grey-100);
}

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

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

.profile-edit-section {
    background-color: var(--grey-600);
}

/* 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;
}

textarea,textarea.form-control {
    background-color: transparent;
    border: solid 1px var(--grey-400);
    color: var(--grey-50);
}

button#edit_form_submit_btn {
	white-space: nowrap;
}

textarea.form-control:focus {
	background-color: transparent;
    border: solid 1px var(--grey-400);
    color: var(--grey-50);
}

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

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

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

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

.back-page {
    background-color: var(--grey-base);
    color: var(--grey-50);
}

.back-page svg,
.back-page path {
	stroke: var(--grey-50);
}

.profile-image img {
    border: solid var(--grey-600) 0;
}

.profile-image::after,
.profile-image::before {
    border-color: var(--grey-600);
}

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


div#Website-links .website-link-column.temp-website-link {
	background-color: #333333 !important;
	border-color: #454545 !important;
}

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

.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-color: #333333 !important;
	border-color: #454545 !important;
}

.add-social-media button svg, .add-social-media button path {
    stroke: var(--grey-50);
}

ul.mobile-menu-style li a {
    color: var(--grey-50);
 }

 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-400);
}

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

p.option-field i svg, p.option-field i path {
    stroke: var(--grey-50);
}

body .intl-tel-input.separate-dial-code .selected-dial-code {
    color: var(--grey-50) !important;
}

.intl-tel-input .selected-flag .iti-arrow {
    border-top: 4px solid var(--grey-50) !important;
}

.modal-header {
    border-color: var(--grey-base);
}

.intl-tel-input .country-list {
    background-color: var(--grey-base) !important;
    border: 1px solid var(--grey-400) !important;
    color: var(--grey-50) !important;
}

.intl-tel-input .country-list .divider {
    border-bottom: 1px solid var(--grey-300) !important;
}

span.recent-thumb {
    color: var(--grey-100);
}

span.recent-thumb .icon {
    background-color: var(--grey-400);
}

span.arrow-share-list svg,
span.arrow-share-list path {
    stroke: var(--grey-50);
}

/* Dark Mode CSS end **/


/**  new ccss dark **/

i.fa.fa-search.search-icon-se {
    color: var(--grey-200);
}

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

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

.user-profile-select {
    background-color: var(--grey-400);
    outline: 1px solid var(--grey-300);
}

.user-profile-select span {
    color: var(--grey-100);
}

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

.upgrade_box {
    background: var(--primary-base);
}

.analytics_box .info_box svg, .analytics_box .info_box svg path {
    stroke: var(--grey-200);
}

.digital-wallet-column .card {
    background: transparent;
}

.digital-wallet-column .card .card-header {
    color: var(--grey-50);
}

.card.brand-wallet-content { border: 1px solid rgba(250, 226, 192, 0.16); background: linear-gradient(180deg, rgba(250, 226, 192, 0.08) 0%, rgba(41, 41, 41, 0.00) 100%); }
.brand-wallet-title { border-bottom: rgba(250, 226, 192, 0.16) 1px solid; }
.brand-wallet-title h5, .card.brand-wallet-content ul li { color: var(--grey-50); }
.upgraded_card .card-header { color: var(--grey-50); }

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

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

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

.share-list-popup svg.dark-share-icon {
    display: block;
}

.share-list-popup .recent-thumb svg:nth-child(1) {
    display: none;
}

.qr_code-section svg {
    padding: 6px;
    background: #fff;
    border-radius: 4px;
}

.copy-field button {
    background: var(--grey-600);
    border: solid var(--grey-400) 1px;
    border-radius: 0 8px 8px 0;
    color: var(--white);
}

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

.copy-field button svg path {
  stroke: var(--grey-50);
}

/* Read-only form controls — mirror of the dark rule in new_ui_dark_frontend.css.
   Kept here so legacy pages that only pull dark_new_frontend.css still get the same
   dark readonly styling. Update both files together. */
textarea[readonly],
input.input-copy-readonly[type="text"],
input[readonly] {
    background-color: #1F1F1F;
    border-color: #2A2A2A;
    color: #707070;
    box-shadow: none;
}

input#favcolor + span, input#fontcolor + span, input#borderColor + span, input#dwld_favcolor + span, input#dwld_fontcolor + span, input#dwld_borderColor + span {
    background: var(--grey-base);
}

.connect-btn.scrolled {
    /* background: rgba(34, 34, 34, 0.75); */
}

@media (max-width: 767px) {
    .connect-btn.scrolled {
        background: rgba(34, 34, 34, 0.75);
    }
}

.contact-view-profile .profile-section, .main-content.withbg {
    background: var(--grey-600);
}

.user_notes .use-name-details {
    background: var(--grey-base);
}

 .contact_view_btns span.svg_bg {
    background: var(--grey-600);
    border: solid var(--grey-300) 1px;
    border-radius: 8px;
}

.contact_view_btns span.titles {
    color: var(--grey-50);
}

.contact_view_btns span.svg_bg svg, .contact_view_btns span.svg_bg path {
    fill: white;
}

.contact-view-profile .contact-view-form .group-flied .info_div label.contact_title {
    color: var(--grey-100);
    display: block;
}

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

a.popup-btn path {
    stroke: var(--grey-50);
}

#confirm-invite span {
    background: var(--grey-400);
}

#confirm-invite span path {
    stroke: var(--grey-50);
    fill: var(--grey-50);
}

.secondary-btn,.secondary-btn:hover,.secondary-btn:focus {
    background-color: transparent;
}

.bottom-edit-bottom {
    background: rgba(26, 26, 26, 0.85);
}

a.grey-btn.back-btn {
    border-color: var(--grey-50);
}

a.grey-btn.back-btn {
    background: rgba(255,255,255,0.15);
}

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

.no-cover a.grey-btn.back-btn {
    background-color: transparent;
}

a.grey-btn.back-btn {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.25);
}

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

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

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

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

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

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

span.social-icon.plus-add a svg,
span.social-icon.plus-add a svg path {
    stroke: var(--grey-50);
}

.profile-logo span {
    background-color: var(--grey-400);
    color: var(--grey-100);
    border: solid var(--grey-200) 1px;
}

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

.login-register-btn ul li svg,
.login-register-btn ul li svg path {
    fill: var(--grey-300);
}

.show-more.main-btn {
    background-image: linear-gradient(180deg, rgba(1,0,36,0) -40%, rgba(41,41,41,1) 75%);
}

/* tooltip dark **/

.tooltip-inner {
    background-color: var(--grey-300);
    color: var(--white);
}

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

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

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

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

.analytics_box .summary {
    color: var(--grey-100);
}

input#colorCode, input#colorCode:focus, input#colorCode:hover {
    background: var(--grey-600);
}


span.drag-contact-field path {
    fill: var(--grey-300);
}

span.drag-contact-field path + path {
    fill: var(--white);
}

/* ADDED: same dark-mode theming for the social-media drag handle so its dots match the contact drag handle. */
span.drag-social-field path {
    fill: var(--grey-300);
}

span.drag-social-field path + path {
    fill: var(--white);
}

.custom-select-trigger {
    background-color: transparent;
    border: solid 1px var(--grey-400);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    color: var(--grey-50);
}

.custom-select-trigger:after {
    border-bottom: 2px solid var(--grey-300);
    border-right: 2px solid var(--grey-300);
}

button.label-btn {
    background-color: rgba(74, 121, 243, 0.25);
    border: solid 1px var(--primary-400);
    color: var(--primary-400);
}

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

.custom-option {
    color: var(--white);
}

.custom-option:hover, .custom-option.selection {
    background: var(--grey-base);
}

.manage-section-column span.section-icon svg path {
    stroke: var(--white);
}

.manage-section-column span.section-icon {
    background: var(--grey-base);
}

.manage-section-column {
    background: var(--grey-base);
    border-color: var(--grey-400);
}

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

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

.primary-btn.white-btn.grey-txt svg path {
    stroke: var(--grey-50);
    stroke-width: 2;
}

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

span.section-icon {
    border-color: var(--grey-300);
}

span.add-section-btn button {
    background: var(--grey-400);
}

span.lock-section-btn button {
    background: var(--grey-400);
}

.profile-section-add-column {
    overflow: hidden;
}

span.section-icon svg path {
    /* stroke: var(--grey-100); */
}

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

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

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


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

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


.coming_soon::after {
    background: #333;
}

.disable-column{
	opacity: 0.45;
}

.accordion-header span + a > svg,
.accordion-header span + a > svg path {
   stroke: var(--grey-50);
}

div#add-section .profile-section-add-column span.section-icon svg path {
    /* stroke: var(--grey-200); */
}
.profile-section-add-column p {
    color: var(--grey-200);
}
.disable-column .profile-section-add-column p {
    color: var(--grey-100);
}
ul.mobile-menu-style li.active a {
    background: var(--grey-400);
}

a[data-bs-toggle="tooltip"] svg, a[data-bs-toggle="tooltip"] path {
    stroke: var(--grey-200);
}

.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-300);
}

/* add multiple section on first sign up css start */
div#add-multiple-section .profile-section-add-column span.section-multiple-icon svg path {
    /* stroke: var(--grey-200); */
}

span.section-multiple-icon svg path {
    /* stroke: var(--grey-100); */
}

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

span.select-section {
    border-color: var(--grey-300);
}

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

span.lock-multiple-section button svg path{
    fill: var(--grey-200);
}

.form-check-input:checked:disabled {
    background-color: var(--grey-200);
    border-color: var(--grey-200);
}
/* add multiple section on first sign up css end */

/* 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-50);
}

.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-50);
}

/* end fixed heading pencil icon color */

.floatting-toggle-btn1 {
    background: #292929;
}

.temp_drop a[data-bs-toggle="tooltip"] svg, .temp_drop a[data-bs-toggle="tooltip"] path {
    stroke: var(--grey-50);
}

.review-slider-section .item {
    width: 100%;
    background: var(--grey-600);
    border-radius: 12px;
    padding: 20px;
}

.review-content p + p {
    color: var(--grey-200);
}

.reviewer-info {
    display: flex;
    border-top: solid var(--grey-400) 1px;
    padding-top: 16px;
}

.field.file-upload label::before {
    color: var(--grey-200);
}

.review-slider-section::after {
    background-image: linear-gradient(270deg, #252525 0%, rgba(37, 37, 37, 0.00) 100%);
}

.rating > label {
    color: #666666;
    float: right;
}

.tabs-left > li > a.active.show {
    background-color: var(--grey-600);
}

.tabs-left > li > a {
    color: var(--grey-200);
}

a.google_btn, button.google_btn {
    background: rgba(255, 255, 255, 0.02);
    border: solid #4D4D4D 1px;
    color: #EDEDED;
}

.success-base {
    color: #17B26A;
    background: rgba(23, 178, 106, 0.25);
    border-color: #079455;
 }

.error-base {
	color: #F04438;
    background: rgba(240, 68, 56, 0.25);
    border-color: #D92D20;
}

.table>:not(caption)>*>* {
    background: #292929;
    border-color: #333;
}

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

.responsive-table table th {
    color: var(--grey-100);
}

.item.temp-reviews {
    background-color: #333333 !important;
    border: solid 1px var(--grey-base) !important;
}

.item.temp-reviews .reviewer-info {
    border-color: #333333;
}

a.review-edit-button svg, a.review-edit-button svg path {
    stroke: var(--grey-50);
}

.add-disable, .add-disable:hover, .add-disable:focus {
    border-color: var(--grey-base);
    background-color: var(--grey-600) !important;
    color: var(--grey-300);
    cursor: default;
}

.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) !important;
}

a[data-toggle="modal"] p {
    color: var(--grey-50);
}

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

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

#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-50);
}

.chart-content div span:nth-child(1) {
    color: var(--grey-25) !important;
}

span.badge.badge-light-danger {
    background: rgba(240, 68, 56, 0.25);
    border: solid var(--error-400) 1px;
    color: var(--error-400);
}

span.badge.badge-light-success {
    background: rgba(23, 178, 106, 0.25);
    border: solid var(--success-600) 1px;
    color: var(--success-400);
}

span.badge.badge-light-primary {
    background: rgba(25, 118, 210, 0.15);
    border: solid rgba(25, 118, 210, 0.7) 1px;
}

span.badge.badge-light-warning {
    background: rgba(217, 119, 6, 0.15);
    border: solid rgba(217, 119, 6, 0.7) 1px;
}

span.badge.badge-light-secondary {
    background: #333;
    border: solid var(--grey-400) 1px;
    color: var(--grey-100);
}

.chart-content + p.small {
    color: var(--grey-100);
}

.act-btn.date-btn-ico .form-control {
    background-color: var(--grey-600);
    border-color: var(--grey-300);
    color: #fff;
}

table.dataTable th {
    color: var(--grey-200);
}

table.dataTable td {
    color: var(--grey-50);
}

.secondary-btn.grey-small:hover,.secondary-btn.grey-small:focus,.secondary-btn.grey-small {
    border-color: var(--grey-300);
    background-color: var(--grey-600);
    color: var(--grey-50);
}

.secondary-btn.grey-small svg path {
    stroke: var(--grey-50);
}

.apexcharts-tooltip.apexcharts-theme-light {
    border-color: var(--grey-400) !important;
    background: var(--grey-400) !important;
    box-shadow: none !important;
}

.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    background: var(--grey-400) !important;
    border-color: var(--grey-400) !important;
}

body .daterangepicker {
    border: solid var(--grey-base) 1px;
    background: var(--grey-base);
}

body .daterangepicker .ranges li {
    color: var(--grey-50);
}

body .daterangepicker .ranges li:hover {
    background-color: var(--grey-400);
}

body .daterangepicker .ranges li.active:hover {
    background-color: var(--primary-base);
}

body .daterangepicker .drp-buttons {
    border-top: 1px solid var(--grey-300);
}

body .daterangepicker.show-ranges.ltr .drp-calendar.left {
    border-left: 1px solid var(--grey-300);
}

body .daterangepicker .calendar-table {
    border: 1px solid var(--grey-base);
    border-radius: 4px;
    background-color: var(--grey-base);
}

body .daterangepicker td.off,
body .daterangepicker td.off.in-range,
body .daterangepicker td.off.start-date,
body .daterangepicker td.off.end-date {
    background-color: var(--grey-base);
}

body .daterangepicker .calendar-table .next span,
body .daterangepicker .calendar-table .prev span {
    border-color: var(--grey-100);
}

body .daterangepicker td.available:hover,
body .daterangepicker th.available:hover {
    background-color: var(--grey-300);
}

body .daterangepicker td.in-range {
    background-color: var(--grey-400);
    color: var(--grey-50);
}

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

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

.page-item .page-link .previous {
    background-image: url(../../frontend/icons/chevron-dark.svg);
}

.page-item .page-link .next {
    background-image: url(../../frontend/icons/chevron-dark.svg);
}

.act-btn.date-btn-ico .form-control {
    background-image: url(../../frontend/icons/calendar-dark.svg);
}

.page-link {
    background: transparent;
}

ul.pagination li a,ul.pagination li a:hover,ul.pagination li a:focus {
    color: var(--grey-200);
}

.disabled>.page-link, .page-link.disabled {
    color: var(--grey-200);
}

table.dataTable thead th {
    color: var(--grey-200);
}

h5 + p.grey-500 {
    color: var(--grey-100);
}

.drp-buttons .btn.disabled, .btn:disabled, .drp-buttons fieldset:disabled .btn {
    opacity: 0.65;
    background-color: var(--primary-base);
    border-color: var(--primary-base);
    color: var(--white);
}

.dataTables_paginate .active > .page-link, .dataTables_paginate .page-link.active {
    color: var(--white);
}

td.dataTables_empty path {
    fill: var(--grey-base);
}

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

span.reviewr-content p + p {
    color: var(--grey-200);
}

button#export-to-excel svg path {
    stroke: var(--grey-50);
}

div#reviewer_uploadimage .modal-header svg, div#reviewer_uploadimage .modal-header svg path {
    stroke: var(--grey-50);
}

/* photo gallery popup css end */
ul.gallery-list li {
    background-color: var(--grey-600);
    border: solid 1px var(--grey-base);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

ul.gallery-list li:hover,
ul.gallery-list li:focus {
    border: solid 1px var(--grey-base);
    background-color: var(--grey-base);
}

ul.gallery-list a span+span {
    color: var(--grey-50);
}

span.gallery {
    width: 32px;
    justify-content: center;
    height: 32px;
	border-radius: 6px;
}

span.gallery.plus-add {
    background: transparent;
}

span.gallery.plus-add a svg,
span.gallery.plus-add a svg path {
    stroke: var(--grey-50);
}
ul.gallery-list.gallery-masonry li { border: 1px solid var(--grey-base); }
.gallery-dropzone { background-color: var(--grey-600); border: dashed 1px var(--grey-400); color: var(--grey-50); }
.gallery-dropzone-text { color: var(--grey-50); }
.gallery-dropzone:hover, .gallery-dropzone.drag-over {
    color: var(--grey-50); background-color: var(--grey-base);
}
.gallery-column-submenu .dropdown-item.active { background: var(--grey-400) !important; color: var(--grey-50) !important; }
#gallery-crop-modal .crop-ratio-toggle { background-color: var(--grey-700) !important; }
#gallery-crop-modal .crop-ratio-toggle .crop-ratio-btn { color: var(--grey-200) !important; }
#gallery-crop-modal .crop-ratio-toggle .crop-ratio-btn.active { background: var(--grey-400) !important; color: var(--primary-base) !important; }
#gallery-crop-modal .crop-canvas-area { border: 1px solid var(--grey-base) !important; background: var(--grey-base) !important; }
#gallery-crop-modal .crop-zoom-controls input[type="range"] { background: var(--grey-200) !important; }
#gallery-crop-modal .cropper-modal { background: var(--grey-base) !important; }
#gallery-crop-modal .crop-zoom-controls svg { color: var(--grey-50) !important; }
/* photo gallery popup css end */

/* photo link profile css end */
ul.linkprofile-list li {
    background-color: var(--grey-600);
    border: solid 1px var(--grey-base);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

ul.linkprofile-list li:hover,
ul.linkprofile-list li:focus {
    border: solid 1px var(--grey-base);
    background-color: var(--grey-base);
}

ul.linkprofile-list li>a span {
    color: var(--grey-50);
}

.linkprofile_popup .profile-popup {
    background-color: var(--grey-600);
    border: solid 1px var(--grey-base);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}
/* photo link profile css end */

span.gallery.plus-add img {
    max-width: 100%;
}

div#accordion-default .accordion-body ul.linkprofile-list::after {
    background: linear-gradient(-90deg, rgba(30, 30, 30, 1) 10%, rgba(30, 30, 30, 0) 100%);
}

button.view_more_linkprofile {
    background: var(--grey-600);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.15);
}

.basic-text + .basic-text.title_jobtitle {
    color: rgba(255, 255, 255, 0.5) !important;
    font-weight: 300;
}

span a.top_arrow_ svg path {
    stroke: #ccc;
}

img.img.link_profile_img_comp {
    border-color: #666;
}

select#link_user_id {
    background: transparent;
    border: solid 1px var(--grey-400);
    color: var(--grey-50);
}

select#link_user_id option {
    background-color: var(--grey-600);
}

.form-select {
    background-blend-mode: color;
}

button.close.close_gallery_model path,
button.close.close_gallery_model svg {
    stroke: var(--grey-50);
}

.light_theme_img {
    display: none;
}

.dark_theme_img {
	display: block;
}

span.select2-selection.select2-selection--single {
    background-color: transparent;
    color: var(--grey-50);
    box-shadow: 0px 1px 2px 0px rgb(16 24 40 / 5%);
    border: solid 1px var(--grey-400);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--grey-50);
    line-height: 28px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    color: var(--grey-50);
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--grey-50) transparent transparent transparent;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--grey-50) transparent;
}

.select2-dropdown {
    background-color: var(--grey-600);
    border: solid 1px var(--grey-400);
}

.select2-container--default .select2-results__option--selected {
    background: var(--grey-400) !important; color: var(--grey-50) !important;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--grey-400) !important; color: var(--grey-50) !important; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--grey-400) !important; color: var(--grey-50) !important; }

.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--grey-600);
    color: var(--grey-50);
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    /* background-color: var(--grey-400);
    border-color: var(--grey-300); */
    background-color: #333;
    border-color: var(--grey-400);
}

.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered {
    color: #666;
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__arrow b {
    border-color: #666 transparent transparent transparent;
}

/* social media old css start */
/*.social-badge {
    border: 1px solid rgba(25, 118, 210, 0.7);
    background: rgba(25, 118, 210, 0.15);
}
.social-badge a{ color: rgba(25, 118, 210, 1); }
.social-badge a:hover { color: rgba(25, 118, 210, 1); }
.social-badge:hover {
    background: rgba(25, 118, 210, 0.25);
    border-color: rgba(25, 118, 210, 0.8);
}
.wp-badge {
    color: rgba(56, 205, 77, 1);
    border: 1px solid rgba(56, 205, 77, 0.5);
    background: rgba(56, 205, 77, 0.1);
}
.wp-badge a{ color: rgba(56, 205, 77, 1); }
.wp-badge:hover {
    background: rgba(56, 205, 77, 0.2);
    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-badge { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--grey-50); }
.social-badge a { color: var(--grey-50); }
/* .social-badge a:hover { color: inherit; } */
.social-badge:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: var(--grey-50); }
/* social media new css end */

/* linkedin data import popup css start */
.find_ln_profile {
    background-color: rgba(25, 118, 210, 0.15);
    border: solid 1px rgba(25, 118, 210, 0.15);
    color: var(--primary-base);
}

.find_ln_profile:hover {
    background-color: rgba(25, 118, 210, 0.25);
    border-color: rgba(25, 118, 210, 0.25);
    color: var(--primary-base);
}

.ln-continue-btn.disabled, .ln-continue-btn:disabled, fieldset:disabled .ln-continue-btn {
    /* background-color: var(--grey-300) !important;
    border-color: var(--grey-300) !important;
    color: var(--grey-100) !important; */
    opacity: 0.65;
}

.ln-content h6+p {
    color: var(--grey-100);
}
/* linkedin data import popup css end */

/* cloud tags section css start */
.cloud_tags {
    background-color: var(--grey-600);
    border: solid 1px var(--grey-400);
    color: var(--grey-50);
    transition: ease all 0.5s;
}

.cloud_tags:hover, .cloud_tags:focus {
    color: var(--grey-50);
    border: solid 1px var(--grey-base);
    background-color: var(--grey-base);
}

span.cloudtag_text {
    color: var(--grey-50);
}

span.cloudtag_add_svg svg path {
    stroke: var(--grey-200);
}
/* cloud tags section css end */

/* billing settigs css start */
.billing_row {
    background: #1C1C1C !important;
}
.free-badge {
    background: var(--grey-600);
    border: solid #404040 1px;
    color: var(--white);
}
.billing_label svg path {
    stroke: var(--white);
}
.billing_column-l {
    background-image: url(../images/billing_bg-dark.png);
    background-size: 100% 100%;
}
.billing_column-r {
    background: var(--grey-700);
    border: solid var(--grey-base) 1px;
}
.subscripted_column-l {
    background: var(--grey-700);
    border: solid var(--grey-base) 1px;
}
.subscripted_column-r {
    background-image: url(../images/billing_bg-dark.png);
    background-size: 100% 100%;
}
.column_label {
    color: var(--white);
}
.billing_description p {
    color: var(--white);
}
.learnmore {
    color: #CCCCCC;
}
.current-plan-badge {
    border: 1px solid #616467;
    background: var(--grey-700);
    color: #B3B8BF;
}
a.secondary-btn.billing_btn, button.secondary-btn.billing_btn {
	border-color: var(--grey-400);
    background: #292929;
    color: var(--grey-50);
}
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-base);
    color: var(--grey-50);
}
/* billing settigs css end */

/* billing plans settigs css start */
.current-plan {
    border: 1px solid rgba(162, 201, 212, 0.16);
    background: linear-gradient(180deg, rgba(231, 246, 252, 0.08) 0%, rgba(41, 41, 41, 0.00) 100%);
}
.current-plan-p { color:var(--grey-100); }
.current-plan-label { }
.explore-plan { color: var(--white); }
/* CHANGED: dark twin of the repainted pill segment (light rules in new_frontend.css). Inverted —
   the active pill is white with dark text/icon; the track is transparent with a hairline border. */
.individual_business { background: transparent; border-color: rgba(255, 255, 255, 0.14); }
.individual_business > li > a { color: var(--grey-200); }
.individual_business > li > a:hover { background: rgba(255, 255, 255, 0.08); color: var(--white); }
.individual_business > li > a.active.show { background-color: var(--white); color: #222222; }
.individual_business > li > a svg path { stroke: var(--grey-200); }
.individual_business > li > a:hover svg path { stroke: var(--white); }
.individual_business > li > a.active.show svg path { stroke: #222222; }
.current-plan.swftPlus {
    border: 1px solid rgba(160, 169, 217, 0.16);
    background: linear-gradient(180deg, rgba(160, 169, 217, 0.08) 0%, rgba(41, 41, 41, 0.00) 100%);
}
.current-plan.swftPro {
    border: 1px solid rgba(250, 226, 192, 0.16);
    background: linear-gradient(180deg, rgba(250, 226, 192, 0.08) 0%, rgba(41, 41, 41, 0.00) 100%);
}
.current-plan .grey-500 {
    color: var(--grey-100);
}
.current_btn svg path {
    stroke: var(--white);
}
.billing_badge {
    /* color: var(--success-600); */
    border: 1px solid #079455 !important;
    background: transparent !important;
}
#billing_type {
    background-color: var(--primary-base);
    border-color: var(--primary-base);
}
.free_plan {
    border: 1px solid rgba(162, 201, 212, 0.16);
    background: linear-gradient(180deg, rgba(231, 246, 252, 0.08) 0%, rgba(41, 41, 41, 0.00) 100%);
}
.swft_plus_plan {
    border: 1px solid rgba(160, 169, 217, 0.16);
    background: linear-gradient(180deg, rgba(160, 169, 217, 0.08) 0%, rgba(41, 41, 41, 0.00) 100%);
}
.swft_pro_plan {
    border: 1px solid rgba(250, 226, 192, 0.16);
    background: linear-gradient(180deg, rgba(250, 226, 192, 0.08) 0%, rgba(41, 41, 41, 0.00) 100%);
}
.business_plus_plan {
    border: 1px solid rgba(162, 201, 212, 0.16);
    background: linear-gradient(180deg, rgba(231, 246, 252, 0.08) 0%, rgba(41, 41, 41, 0.00) 100%);
}
.business_pro_plan {
    border: 1px solid rgba(250, 226, 192, 0.16);
    background: linear-gradient(180deg, rgba(250, 226, 192, 0.08) 0%, rgba(41, 41, 41, 0.00) 100%);
}
.business_max_plan {
    border: 1px solid rgba(160, 169, 217, 0.16);
    background: linear-gradient(180deg, rgba(160, 169, 217, 0.08) 0%, rgba(41, 41, 41, 0.00) 100%);
}
.free_plan .card-title, .business_plus_plan .card-title {
    border-bottom: rgba(162, 201, 212, 0.16) 1px solid;
}
.swft_plus_plan .card-title, .business_max_plan .card-title {
    border-bottom: rgba(160, 169, 217, 0.16) 1px solid;
}
.swft_pro_plan .card-title, .business_pro_plan .card-title {
    border-bottom: rgba(250, 226, 192, 0.16) 1px solid;
}
.plan_price { color: var(--white); }
.plan_month, .plan_year { color: var(--grey-100); }
.plan_save_amt { color: var(--success-400); }
.card-footer .secondary-btn.grey svg path { stroke: var(--grey-50); }
.current_plan_btn {
    background-color: var(--grey-base) !important; border-color: var(--grey-base) !important;
}
.most_pop_badge {
    color: #FAE2C0 !important;
    background: linear-gradient(93deg, rgba(250, 226, 192, 0.16) 2.43%, rgba(250, 226, 192, 0.04) 53.94%) !important;
}
.nfc_card_badge {
    color: var(--grey-100);
    border: 0.6px solid #AEAEB2;
}
.nfc_card_badge svg g path {
    stroke: var(--grey-100);
}
/* Dark "Upgrade" pill — mirror the light .upgrade_badge / .rd-upgrade pill but on a
   dark surface: transparent fill + gold accent border + light text, with a soft gold
   hover. Without the transparent fill, the redesign dual-class (.rd-upgrade.upgrade_badge)
   badge kept .rd-upgrade's white background on dark pages with no body-scoped override
   (the wallet appearance section), rendering light text on white = invisible. */
.upgrade_badge {
    background: transparent;
    border-color: #E8B903;
    color: var(--grey-50);
}
.upgrade_badge:hover { background: rgba(232, 185, 3, 0.12); }
.upgrade-analyics {
    background: linear-gradient(0deg, #292929, rgba(250, 226, 192, 0.08)), linear-gradient(180deg, rgba(250, 226, 192, 0.08) 0%, rgba(33, 33, 33, 0) 100%);
    border: 1px solid #FAE2C029;
}
.plus-features { border-top: 1px solid rgba(160, 169, 217, 0.16); }
.plus-feature-content { border: 1px solid rgba(160, 169, 217, 0.16); }
.pro-features { border-top: 1px solid rgba(250, 226, 192, 0.16); }
.pro-feature-content { border: 1px solid rgba(250, 226, 192, 0.16); }
.feature-content a { color: var(--primary-base); }
.feature-content a svg path, .feature-content div .circle_info_icon path { stroke: var(--primary-base); }

#toggle-features span { color: var(--primary-base); }
#toggle-features svg path { stroke: var(--primary-base); }
/* billing plans settigs css end */

/* custom domain settigs css start */
.info-box {
    background-color: var(--grey-base) !important;
}
.info-box svg {
    fill: #F5F5F5;
    align-items: center;
}
.info-box-active {
    background-color: rgba(23, 178, 106, 0.25) !important;
    color: var(--success-400) !important;
}
.form-control.domain_name {
    background-color: transparent;
    border: solid 1px var(--grey-400);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    color: var(--grey-50);
}
.form-control.domain_name[readonly] {
    background-color: var(--grey-base);
    color: #666;
}
.domain_name[readonly]::placeholder { color: #666; }
label.domain_label_disable { color: #666; }
.domain_name::placeholder {
    color: var(--grey-200);
}
@media screen and (max-width: 767px) {
    .custom-table td::before {
        color: var(--grey-200);
    }
}
/* custom domain settigs css end */

/* connect button styling settigs css start */
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 {
    background: var(--grey-600);
}
input#colorCodebg[readonly], input#colorCodeFont[readonly], input#colorCodeBorder[readonly],
input#dwld_colorCode[readonly], input#dwld_colorCodeFont[readonly], input#dwld_colorCodeBorder[readonly] { background-color: var(--grey-base); }
span.px-input {
   color: var(--grey-200);
}
.minus svg path, .plus svg path, .width_minus svg path, .width_plus svg path {
    stroke: var(--grey-50);
}
.minus:disabled svg path, .plus:disabled svg path, .width_minus:disabled svg path, .width_plus:disabled svg path {
    stroke: #666;
}
a.profile-edit {
    background: var(--grey-600);
}
a.profile-edit svg g path {
    stroke: var(--grey-50);
}
/* connect button styling settigs css end */

/* user onboard in myprofile css start */
.content-box .card { background: transparent; }
/* Follow the brand: the bg + border were hardcoded blue while the text already used --primary-base (WL-overridden), so a WL badge showed brand text inside a blue border. Tint from --primary-base (color-mix, same approach as new_ui_header's shade map). */
.step-completed-badge { background: color-mix(in srgb, var(--primary-base) 16%, transparent); border: solid color-mix(in srgb, var(--primary-base) 70%, transparent) 1px; color: var(--primary-base); }
.started-board-close svg path { stroke: var(--white); }
.started-content { border-color: var(--grey-300); }
.content-header { border-bottom: 1px solid var(--grey-300); }
.content-header svg path { stroke: var(--grey-50); }
.content-title { color: var(--white); }
.content-detail p { color: var(--grey-100); }
.content-link { color: var(--grey-25); }
.content-link svg path { stroke: var(--grey-25); }
.content-link:hover, .content-link:focus { color: var(--white); }
.content-box .card .card-body .owl-stage-outer::after { background: linear-gradient(270deg, #292929 0%, rgba(41, 41, 41, 0.6) 65%, rgba(41, 41, 41, 0.00) 100%); }
.content-box .card .card-body .owl-stage-outer::before { background: linear-gradient(90deg, #292929 0%, rgba(41, 41, 41, 0.6) 65%, rgba(41, 41, 41, 0.00) 100%); }
.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next {
    border: 1px solid var(--grey-300) !important;
    background: var(--grey-600) !important;
}
.owl-prev:hover, .owl-next:hover { background-color: var(--grey-50) !important; }
.owl-prev svg path, .owl-next svg path { stroke: var(--grey-50); }
/* user onboard in myprofile css end */

/* new contact page css start */
.contact-section .row .col-lg-5 { background-color: var(--grey-600); }
.contact-section .row .col-lg-5 >* { background-color: var(--grey-600); }
.contact-section .card .card-header { border-bottom: 1px solid var(--grey-300); }
/* .contact-section .card .card-body { border-bottom: 1px solid var(--grey-300); } */
.contact-section .table-responsive { border-bottom: 1px solid var(--grey-300); } /* for datatable */
.use-list-block tr + tr {
    border-top: solid var(--grey-300) 1px; /* for datatable */
}
.contact-section .li-details.active { background: var(--grey-base); }
.contact-section .contact-filter svg path { stroke: var(--grey-50); }
.contact-person .contact_person_company { color: var(--grey-200);}
.li-details .contact-person .contact_person_time { color: var(--grey-200); }
.contact-profile-badge { color: #CECFD2 !important; border: 1px solid #474A50 !important; background: var(--grey-600) !important; }
.filter-dropdown .filter-section-title { color: var(--grey-50); }
.inner-div-view span svg path, .inner-div-empty-view span svg path { stroke: var(--white); }
.contact-tag-badge.sales-tag-badge { color: #FEDF89 !important; border: 1px solid #988652 !important; background: #FEDF8914 !important; }
.contact-tag-badge.enterprise-tag-badge { color: #D6BBFB !important; border: 1px solid #53389E !important; background: #53389E29 !important; }
.contact-tag-badge.customer-tag-badge { color: #CECFD2 !important; border: 1px solid #474A50 !important; background: #474A5029 !important; }
.contact-tag-badge.vip-tag-badge { color: #FDA29B !important; border: 1px solid #7A1C13 !important; background: #7A1C131F !important; }
.contact-tag-badge.prospect-tag-badge { color: #FAA7E0 !important; border: 1px solid #79144C !important; background: #79144C1F !important; }
.contact-tag-badge.marketing-tag-badge { color: #75E0A7 !important; border: 1px solid #095335 !important; background: #0533213D !important; }

.contact-view-container.card .card-body { border-bottom: 0; }
.card .card-header .close-contact-view svg path { stroke: var(--grey-200); }
.contact-person .contact-user-details .contact_user_letter { color: var(--grey-100); background-color: var(--grey-400); outline: 1px solid var(--grey-300); }
.contact-person .contact-person-details .contact_user_name { color: var(--grey-50); }
.contact-person .contact-person-details .contact_user_join_date { color: var(--grey-100); }
.contact-person .use-name-details > button svg path { stroke: var(--grey-50); }
.contact-view-container .contact-detailed-div { background-color: var(--grey-base); }
.contact-detailed-div .contact-details-a { color: var(--grey-100); }
.contact-detailed-div .contact-details-a svg path { stroke: var(--grey-200); }
.contact-detailed-div .contact-details-a.linkedin_link { color: var(--primary-base); }
.contact-detailed-div .contact-details-a.linkedin_link svg path { stroke: var(--primary-base); }
.contact-detailed-div .contact-details-a.profile_link { color: var(--primary-base); }
.contact-detailed-div .contact-details-a.profile_link svg path { stroke: var(--primary-base); }
.card-body-separator { border-bottom: 1px solid var(--grey-300); }
.contact-user-integration .contact-selected-crm { background-color: var(--grey-base); }
.contact-user-integration .crm-img-name .crm-img-div {
    background: var(--grey-600);
    border: 1px solid var(--grey-400);
    box-shadow: 0px 1px 2px 0px #1018280D;
}
.contact-user-integration .contact-selected-crm > button { background-color: var(--grey-600); }
.contact-user-integration .no-active-crm { color: var(--grey-200) !important; }
.contact-user-integration .synced-text { color: var(--grey-200) !important; }
.contact-user-notes .user-note-body .notes-description { background-color: var(--grey-base); }
.contact-user-notes .note-name-date .note_create_date { color: var(--grey-200); }
.contact-edit-div .contact-person-edit svg path{ stroke: var(--grey-100); }
.contact-person-edit .iti--separate-dial-code .iti__selected-dial-code { color: var(--grey-50); }
.contact-selected-tags .add-tag-btn { background: var(--grey-base); border: 1px solid #4D4D4D; }
.contact-selected-tags .add-tag-btn svg path { stroke: var(--grey-200); }
/* tomSelect css */
.new-tag-create .create-tag-span { color: var(--grey-100); }
.ts-wrapper {
    border: 1px solid var(--grey-300);
    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='%23999999' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 8px center;
}
.ts-dropdown { background-color: var(--grey-600); border: solid 1px var(--grey-400); }
.ts-dropdown .active { background: var(--grey-base); }
.ts-control > input { color: var(--grey-50); }
.ts-dropdown .no-results { color: var(--grey-50); }
.tag-options-menu .tag_action svg path { stroke: var(--grey-50); }
.ts-dropdown .no-results-message { color: var(--grey-50); }
.filter-container .filter-dropdown { background: var(--grey-600); border: 1px solid var(--grey-400); }
.filter-container .filter-dropdown .no-tags-message { color: var(--grey-100); }
/* new contact page css end */

/* new digital wallet page css start */
.digital-wallet-section .learn-sharing-title span { color: var(--grey-50); }
.digital-wallet-section .learn-sharing-title p, .unlock-appearance .appearance-content p { color: var(--grey-100); }
.wallet-preview { background-color: var(--grey-600); }
.wallet-preview .card-title { border-bottom: solid var(--grey-400) 1px; }
.card-title .google-card-icon { border: 0.85px solid var(--grey-400); }
.apple-google { background: var(--grey-700); }
.apple-google > li > a { color: var(--grey-200); }
.apple-google > li > a.active.show { background-color: var(--grey-400); }
/* User-side digital wallet (.dw-redesign): drop the WL brand colour from the active Apple/Google segment (base rule sets color:var(--primary-base), WL-overridden). Dark mode = grey-400 pill -> neutral light text. */
/* .dw-redesign .apple-google > li > a.active.show { color: var(--grey-50); } */
.wallet-preview .apple-preview-card, .wallet-preview .apple-preview-card { background: var(--white); border: 1px solid var(--grey-400); }
.wallet-card-qrcode .qrcode-div { border: 0.85px solid var(--grey-400); }
.google-preview-card .card-title { border-bottom: 0.5px solid var(--grey-400) !important; }
.google-preview-card .card-body .card-body-separator { border-bottom: 0.5px solid var(--grey-400); }
input#colorCodeText, input#colorCodeText:focus, input#colorCodeText:hover, input#colorCodeBg, input#colorCodeBg:focus, input#colorCodeBg:hover {
    background: var(--grey-600);
}
.fancybox__content > .f-button.is-close-btn { background-color: var(--grey-600); }
@media (max-width: 991px) {
    .responsive-dw-btn {
		display: block;
        background: rgba(41, 41, 41, 0.85);
        box-shadow: 0px -1px 2px 0px rgba(16, 24, 40, 0.05);
        backdrop-filter: blur(4px);
	}
}
.wallet-edit-btn #cancel-dw-submit-responsive { background-color: var(--grey-600); }
/* new digital wallet page css end */

/* user pixel integration page css start */
.pixel-integration-user .pixel-integration-input::placeholder { color: var(--grey-200); }
.pixel-integration-user .pixel-integration-input[readonly]::placeholder { color: #666; }
.pixel-integration-user .pixel-integration-label span { color: var(--grey-200); }
/* user pixel integration page css end */

/* website icon update css start */
.upload-website-logo .js-favicon-preview .resetWebsiteFavicon { color: var(--grey-100); }
/* website icon update css end */

/* social link icon update css start */
.socialicon-preview.has-file .reset-btn { color: var(--grey-100); }
/* social link icon update css end */

/* crm integration css start */
.crm-main-div { border-color: var(--grey-400) !important; }
.different-integration-div { border-color: var(--grey-400) !important; }
.different-integration-icon { background-color: var(--grey-300) !important; }
.crm-logo-div { border-color: var(--grey-400) !important; }
.connected-span.secondary-connected-span, .connected-span.warning-connected-span { color: var(--grey-200) !important; }
.field-mapping-title { border-bottom: 1px solid var(--grey-400) !important; }
.crm-connect-badge { background-color: rgba(23, 178, 106, 0.25) !important; color: var(--success-400) !important; }
.crm-connect-badge p { color: var(--success-400) !important; }
.crm-alert-msg.alert-success { background: rgba(23, 178, 106, 0.25) !important; border: solid var(--success-600) 1px !important; color: var(--success-400) !important; }
.crm-alert-msg.alert-danger { background: rgba(240, 68, 56, 0.25) !important; border: solid var(--error-400) 1px !important; color: var(--error-400) !important; }
.crm-description p { color: var(--grey-100) !important; }
/* crm integration css end */

/* multiple profile css start */
select#user-profile-select, select#addProfileCopyFrom { background: transparent; border: solid 1px var(--grey-400); color: var(--grey-50); }
select#user-profile-select option, select#addProfileCopyFrom option { background-color: var(--grey-600); }
.multiple-profile .select2-container--open .select2-dropdown--below { box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); }
.user-profile-select-wrap .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable .upgrade_badge { background-color: var(--grey-600) !important; }
/* multiple profile css end */

/* vCard customizer css start */
.download-card-screen-two .dc-token { background-color: rgba(74, 121, 243, 0.25); border: solid 1px var(--primary-400); color: var(--primary-400); }
.download-card-screen-two .dc-override-btn { background: transparent !important; border: solid var(--grey-400) 1px !important; color: var(--grey-50) !important; }
.vcard-preview-section .dc-preview-label { color: var(--grey-200) !important; }
.dc-add-field-wrap .dc-field-picker { background-color: var(--grey-600); border: solid 1px var(--grey-400); }
.dc-field-picker .dc-picker-item:hover:not(.dc-picker-item-disabled) { background: var(--grey-400) !important; color: var(--grey-50) !important; }
/* vCard customizer css end */

/* custom domain dns provider css start */
.dpp-steps { color: var(--grey-200); }
.dpp-card.dpp-warning { border-color: var(--grey-300); background: transparent; }
.dpp-warnings { background: rgba(217, 119, 6, 0.15); color: var(--warning-100); }
.dpp-warnings label { color: var(--warning-100); }
.wl-pending-banner { background: rgba(217, 119, 6, 0.15); border: solid rgba(217, 119, 6, 0.7) 1px; }
.wl-pending-banner label, .wl-pending-banner p { color: var(--warning-600); }
.wl-pending-banner button.cancel_planreq_btn { border: solid rgba(217, 119, 6, 0.7) 1px !important; }
.wl-pending-banner button.cancel_planreq_btn:hover, .wl-pending-banner button.cancel_planreq_btn:focus { background: rgba(217, 119, 6, 0.25) !important; }

.wl-plan-active-banner { background: rgba(23, 178, 106, 0.20); border: solid var(--success-600) 1px; color: var(--success-400); }
.wl-plan-active-banner label, .wl-plan-active-banner p { color: var(--success-400); }
.wl-plan-active-banner button.wl-decision-banner-dismiss { background: transparent; border: solid var(--success-600) 1px !important; color: var(--success-400) !important; }
.wl-plan-active-banner button.wl-decision-banner-dismiss:hover, .wl-plan-active-banner button.wl-decision-banner-dismiss:focus { background: rgba(23, 178, 106, 0.30) !important; }

.wl-plan-reject-banner { background: rgba(122, 28, 19, 0.25); border: solid #7A1C13 1px; color: #FDA29B; }
.wl-plan-reject-banner label, .wl-plan-reject-banner p { color: #FDA29B; }
.wl-plan-reject-banner button.wl-decision-banner-dismiss { background: transparent; border: solid #7A1C13 1px !important; color: #FDA29B !important; }
.wl-plan-reject-banner button.wl-decision-banner-dismiss:hover, .wl-plan-reject-banner button.wl-decision-banner-dismiss:focus { background: rgba(122, 28, 19, 0.40) !important; }
/* custom domain dns provider css end */