:root {
    --var-secondary-bg-color: #2c546b;
    --var-color-primary: #2c546b;
    --var-bg-danger: #b26e59;
    --var-danger-button-color: #c93643;
    --var-light-bg-color: #f4f7fa;
    --var-text-dark-color: #000;
    --var-text-light-color: #ffffff;
    --var-border: #dedddc;
    --card-bg: #ffffff;
    --bg-white: #ffffff;
    --body-bg: #fafafa;
    --bg-nav: #ffffff;
    --dark-check-bg: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.7) 50%,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 0%
    );
    --sidebar-bg: #ffffff;
    --sidebar-width: 250px;
    --sidebar-text-color: #2c546b;
    --sidebar-hover-text-color: #3f6f8c;
    --sidebar-hover-bg-color: #eef4f7;
    --sidebar-active-text-color: #2c546b;
    --sidebar-active-bg-color: #eef4f7;
    --var-color-blue-50: oklch(97% 0.014 254.604);
    --var-color-blue-500: oklch(62.3% 0.214 259.815);
    --var-color-blue-600: oklch(54.6% 0.245 262.881);
    --var-color-green-50: oklch(98.2% 0.018 155.826);
    --var-color-green-100: oklch(96.2% 0.044 156.743);
    --var-color-green-500: oklch(72.3% 0.219 149.579);
    --var-color-green-600: oklch(62.7% 0.194 149.214);
    --var-color-yellow-50: oklch(98.7% 0.022 95.277);
    --var-color-yellow-500: oklch(76.9% 0.188 70.08);
    --var-color-yellow-600: oklch(66.6% 0.179 58.318);
    --var-color-red-50: oklch(97.1% 0.013 17.38);
    --var-color-red-100: oklch(94.1% 0.032 17.663);
    --var-color-red-500: oklch(63.7% 0.237 25.331);
    --var-color-red-600: oklch(57.7% 0.245 27.325);
}

/* ── Theme color utilities ───────────────────────────────── */
/* Blue */
.bg-blue-50 {
    background-color: var(--var-color-blue-50);
}
.bg-blue-500 {
    background-color: var(--var-color-blue-500);
}
.bg-blue-600 {
    background-color: var(--var-color-blue-600);
}
.text-blue-50 {
    color: var(--var-color-blue-50);
}
.text-blue-500 {
    color: var(--var-color-blue-500);
}
.text-blue-600 {
    color: var(--var-color-blue-600);
}
.fill-blue-50 {
    fill: var(--var-color-blue-50);
}
.fill-blue-500 {
    fill: var(--var-color-blue-500);
}
.fill-blue-600 {
    fill: var(--var-color-blue-600);
}

/* Green */
.bg-green-50 {
    background-color: var(--var-color-green-50);
}
.bg-green-100 {
    background-color: var(--var-color-green-100);
}
.bg-green-500 {
    background-color: var(--var-color-green-500) !important;
}
.bg-green-600 {
    background-color: var(--var-color-green-600) !important;
}
.text-green-50 {
    color: var(--var-color-green-50) !important;
}
.text-green-500 {
    color: var(--var-color-green-500) !important;
}
.text-green-600 {
    color: var(--var-color-green-600) !important;
}
.fill-green-50 {
    fill: var(--var-color-green-50) !important;
}
.fill-green-500 {
    fill: var(--var-color-green-500) !important;
}
.fill-green-600 {
    fill: var(--var-color-green-600) !important;
}

/* Yellow */
.bg-yellow-50 {
    background-color: var(--var-color-yellow-50);
}
.bg-yellow-500 {
    background-color: var(--var-color-yellow-500);
}
.bg-yellow-600 {
    background-color: var(--var-color-yellow-600);
}
.text-yellow-50 {
    color: var(--var-color-yellow-50);
}
.text-yellow-500 {
    color: var(--var-color-yellow-500);
}
.text-yellow-600 {
    color: var(--var-color-yellow-600);
}
.fill-yellow-50 {
    fill: var(--var-color-yellow-50);
}
.fill-yellow-500 {
    fill: var(--var-color-yellow-500);
}
.fill-yellow-600 {
    fill: var(--var-color-yellow-600);
}

/* Red */
.bg-red-50 {
    background-color: var(--var-color-red-50);
}
.bg-red-100 {
    background-color: var(--var-color-red-100);
}
.bg-red-500 {
    background-color: var(--var-color-red-500);
}
.bg-red-600 {
    background-color: var(--var-color-red-600);
}
.text-red-50 {
    color: var(--var-color-red-50);
}
.text-red-500 {
    color: var(--var-color-red-500);
}
.text-red-600 {
    color: var(--var-color-red-600);
}
.fill-red-50 {
    fill: var(--var-color-red-50);
}
.fill-red-500 {
    fill: var(--var-color-red-500);
}
.fill-red-600 {
    fill: var(--var-color-red-600);
}

.fill-dark {
    fill: var(--var-text-dark-color);
}

.fill-light {
    fill: var(--var-text-light-color);
}

/* Danger */

/* ─────────────────────────────────────────────────────────── */

body.mode-dark {
    --card-bg: #0f1519;
    --body-bg: #090f11;
    --bg-nav: #0f1519;
    --var-border: #0f1519;
    --sidebar-bg: #0f1519;
    --var-text-dark-color: #ffffff;
    --var-text-light-color: #ffffff;
    --sidebar-text-color: var(--var-text-dark-color);
    --sidebar-hover-text-color: var(--var-text-dark-color);
    --sidebar-hover-bg-color: var(--body-bg);
    --sidebar-active-text-color: var(--var-text-dark-color);
    --sidebar-active-bg-color: var(--body-bg);
}

.page-container.container-fluid {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    max-width: 100%;
}

.min-h-content {
    min-height: calc(100vh - 250px);
}
.max-w-450 {
    max-width: 450px;
}

.pt-56 {
    padding-top: 56px;
}

.ml-auto {
    margin-left: auto;
}

.placeholder-2xs {
    min-height: 0.375rem;
}

.placeholder-xl {
    min-height: 1.5rem;
}

.placeholder-2xl {
    min-height: 2rem;
}

.placeholder-3xl {
    min-height: 2.5rem;
}

.placeholder-4xl {
    min-height: 3rem;
}

.placeholder-5xl {
    min-height: 3.5rem;
}

.placeholder-6xl {
    min-height: 4rem;
}

.w-5 {
    min-width: 5%;
}

.w-10 {
    width: 10%;
}

.w-15 {
    width: 15% !important;
}

.w-20 {
    width: 20% !important;
}

.w-30 {
    width: 30% !important;
}

.w-40 {
    width: 40% !important;
}

.w-65 {
    width: 65% !important;
}

.w-80 {
    width: 80% !important;
}

.w-90 {
    width: 90% !important;
}

.square-32 {
    width: 32px !important;
    height: 32px !important;
}

.square-36 {
    width: 36px !important;
    height: 36px !important;
}

.square-40 {
    width: 40px !important;
    height: 40px !important;
}

.square-48 {
    width: 48px !important;
    height: 48px !important;
}

.min-vh-400 {
    min-height: 400px;
}

.fs-12 {
    font-size: 12px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-18 {
    font-size: 18px !important;
}

@media (max-width: 992px) {
    .template-action-btn {
        font-size: 12px;
    }
}

.theme-blue .progress-bar {
    background-color: #b26e59 !important;
}

.theme-blue .progress-bar.bg-progress-primary,
.theme-blue .single-stat-box .progress-bar {
    background-color: #2c546b !important;
}

.theme-blue .progress-bar.bg-danger-v2 {
    background-color: #b26e59 !important;
}

.bg-subscribed {
    background-color: #23485c !important;
    border-color: #23485c !important;
    color: #fff !important;
}

.bg-blacklisted {
    background-color: #c4001a !important;
    border-color: #c4001a !important;
}

.bg-unsubscribed {
    background-color: #ffc147 !important;
    border-color: #ffc147 !important;
}

/*BG*/
html body {
    background: var(--body-bg) !important;
}

.card-bg {
    background: var(--card-bg);
}

.bg-body-new {
    background: var(--body-bg) !important;
}

.bg-card {
    background: var(--card-bg) !important;
}

.register-form-card {
    max-width: 1024px;
    width: 100%;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 24px auto 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative;
    padding: 0 16px;
}

.register-page-logo img {
    max-width: 160px;
    width: 100%;
    margin: 0 auto;
}

.register-page-container {
    padding-top: 56px;
}

.login-page,
.register-page,
body:has(.bottom-shape) {
    background: #f9f9f9 !important;
    position: relative;
    padding-top: 0;
    overflow: hidden;
    min-height: 100vh;
}

.register-page:before,
body:has(.bottom-shape):before {
    position: absolute;
    content: "";
    left: 0;
    bottom: -50%;
    width: 100%;
    height: 100%;
    background: url("./images/backgrounds/login-bg.png") no-repeat right bottom;
    background-size: 100%;
    pointer-events: none;

    /* Fade effect */
    -webkit-mask-image: linear-gradient(to bottom, transparent, black);
    mask-image: linear-gradient(to bottom, transparent, black);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.login-page:before {
    position: absolute;
    content: "";
    inset: 0;
    background: url("./images/backgrounds/login-bg2.png") no-repeat center
        center;
    background-size: cover;
    pointer-events: none;
}

.login-panel {
    padding: 2.25rem 1.5rem 1.5rem;
}

@media screen and (max-width: 1580px) {
    .register-page:before,
    body:has(.bottom-shape):before {
        bottom: -45%;
    }
}

@media screen and (max-width: 992px) {
    .register-page:before,
    body:has(.bottom-shape):before {
        bottom: -30%;
    }
}

@media screen and (max-width: 768px) {
    .login-panel {
        padding: 1.85rem 1rem 1rem;
    }
}

@media screen and (max-width: 767px) {
    .login-container {
        padding-top: 52px;
    }
}

@media screen and (max-width: 640px) {
    .register-page:before,
    body:has(.bottom-shape):before {
        bottom: -25%;
    }
}

@media screen and (max-width: 450px) {
    .register-page:before,
    body:has(.bottom-shape):before {
        bottom: -20%;
    }
}

/* Login welcome heading + stats */
.login-content {
    max-width: 510px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.login-welcome {
    text-align: center;
    margin-bottom: 1.25rem;
}

.login-welcome-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #0b1220;
    margin: 0 0 0.5rem;
    line-height: 1.1;
}

.login-welcome-desc {
    font-size: 1rem;
    color: #4b5563;
    margin: 0;
}

.login-stats {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1.25rem 1rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 12px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.login-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    min-width: 0;
}

.login-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #eaf0ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2c4ed4;
    margin-bottom: 12px;
}

.login-stat-icon .material-symbols-rounded {
    font-size: 22px;
}

.login-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0b1220;
    line-height: 1.2;
}

.login-stat-label {
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.3;
}

@media screen and (max-width: 768px) {
    .login-welcome-title {
        font-size: 1.75rem;
    }
    .login-welcome-desc {
        font-size: 0.9rem;
    }
    .login-stats {
        gap: 0.5rem;
        padding: 1rem 0.5rem;
    }
    .login-stat-value {
        font-size: 0.95rem;
    }
    .login-stat-label {
        font-size: 0.72rem;
    }
}

body.mode-dark .login-welcome-title {
    color: var(--var-text-light-color);
}

body.mode-dark .login-welcome-desc {
    color: rgba(255, 255, 255, 0.7);
}

body.mode-dark .login-stats {
    background: rgba(15, 21, 25, 0.7);
    border-color: rgba(255, 255, 255, 0.08);
}

body.mode-dark .login-stat-value {
    color: var(--var-text-light-color);
}

body.mode-dark .login-stat-label {
    color: rgba(255, 255, 255, 0.6);
}

body.mode-dark .login-stat-icon {
    background: rgba(99, 138, 255, 0.18);
    color: #a9bcff;
}

.login-page .header-logo {
    margin-bottom: 20px;
}

.login-page .header-logo img {
    max-width: 200px;
}

.login-page .page-container.login-container {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

.login-page .page-container.login-container .page-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
}

.login-page .login-footer {
    margin-top: auto;
}

.login-page .login-footer a img {
    max-width: 200px;
}

.login-page .login-button:not(:hover) {
    background-color: #344955 !important;
    border-color: #344955 !important;
}

.top-user-menus {
    width: 280px;
}

.top-user-menus .backdrop {
    display: none !important;
}

.top-user-menus .nav-item {
    width: 100%;
}

@media (max-width: 1199px) {
    .top-user-menus {
        width: 100%;
        position: static !important;
        transform: none !important;
        width: 100% !important;
        border: 0 !important;
        box-shadow: none !important;
        inset: auto !important;
    }
    .top-user-menus .backdrop {
        display: none !important;
    }
    .top-user-menus li:nth-child(2) {
        width: 100% !important;
        padding: 1rem 0 0 0.5rem !important;
    }
    .top-user-menus li:nth-child(2) .big-avatar {
        margin-right: 8 !important;
    }
    .top-user-menus li:nth-child(2) .big-avatar img {
        width: 40px !important;
        height: 40px !important;
        object-fit: cover;
        object-position: center;
    }
    .sidebar-nav .navbar-nav .top-user-menus li:nth-child(2) > div a {
        padding: 0 !important;
    }
    .top-user-menus li:nth-child(2) .user-menu-titles > p {
        word-break: break-word;
    }
}

.badge-sendonyx {
    background-color: var(--var-secondary-bg-color);
    border-radius: 0;
    padding: 5px 8px;
}

.btn-secondary,
.automation2 .btn-secondary {
    background-color: var(--var-secondary-bg-color);
    border-color: var(--var-secondary-bg-color);
}

.btn-danger {
    background-color: var(--var-danger-button-color);
    border-color: var(--var-danger-button-color);
}

.btn-secondary:hover,
.automation2 .btn-secondary:hover {
    background-color: #23485c;
    border-color: #23485c;
}

.btn-secondary.light,
.btn-light {
    background-color: var(--var-light-bg-color);
    border-color: var(--var-light-bg-color);
    color: var(--var-text-dark-color);
}

.user-menu-titles .label {
    background-color: var(--var-secondary-bg-color);
    color: #ffffff;
    border-color: var(--var-secondary-bg-color);
}

.box-secondary {
    background-color: var(--var-secondary-bg-color);
    border-color: var(--var-secondary-bg-color);
}

.bg-light-secondary {
    background-color: var(--var-light-bg-color);
}

.theme-blue .bg-danger-v2 {
    background-color: var(--var-bg-danger) !important;
}

.theme-blue .bg-secondary-v2 {
    background-color: var(--var-secondary-bg-color) !important;
}

.box-light {
    background-color: var(--var-light-bg-color);
    border-color: var(--var-light-bg-color);
    color: var(--var-text-dark-color);
}

body.mode-dark .box-light {
    background-color: var(--card-bg);
    border-color: var(--var-border);
    color: var(--var-text-light-color);
}

label.checker input:checked ~ .checker-symbol::before {
    background-color: var(--var-secondary-bg-color);
    border-color: var(--var-secondary-bg-color);
}

.list-status:has(.bg-done),
.list-status:has(.bg-scheduled) {
    opacity: 1;
}

.bg-done {
    background-color: var(--var-secondary-bg-color);
    border-color: var(--var-secondary-bg-color);
}

.bg-scheduled {
    background-color: #ffde59;
    border-color: #ffde59;
}

.quota_box.dashboard_quota_box > div {
    width: 100% !important;
    padding-left: 0;
    padding-right: 0;
}

.onboarding-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style-type: none;
    margin: 0;
    padding: 18px 24px;
}

.onboarding-list > li > a {
    display: inline-flex;
    width: 100%;
    gap: 4px;
    align-items: center;
    font-size: 16px;
}

.onboarding-list > li > a > svg {
    width: 24px;
    height: 24px;
    fill: #e9ecef;
}

.onboarding-list > li > a.is-completed svg {
    fill: var(--var-secondary-bg-color);
}

body.mode-dark .onboarding-list > li > a > svg {
    fill: var(--var-secondary-bg-color);
    background: var(--dark-check-bg);
}

body.mode-dark .onboarding-list > li > a.is-completed svg {
    fill: #e9ecef;
    background: transparent;
}

.drc-table {
    min-width: 620px;
}

.drc-table td {
    padding: 0.7rem 0.5rem !important;
    vertical-align: middle;
}

.drc-table thead tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.03);
}

.drc-table > thead > tr > th,
.drc-table tr:last-child td {
    border-color: transparent;
}

.text-light-200 {
    color: var(--var-secondary-bg-color) !important;
}

.coming-soon-page {
    display: flex;
    width: 100%;
    height: 80vh;
    justify-content: center;
    align-items: center;
}

/*Quote*/
.dashboard_quota_box {
    display: flex;
    flex-wrap: wrap;
    row-gap: 16px;
}

.dashboard_quota_box > div {
    width: calc(100% / 3) !important;
    border-color: var(--bs-border-color) !important;
    border-style: solid !important;
}

.dashboard_quota_box > div:not(:last-child) {
    border-right-width: 1px !important;
}

.quota-badge {
    position: absolute;
    top: 3px;
    right: 14%;
    font-size: 12px;
}

html body.mode-dark .dashboard_quota_box > div {
    border-color: rgba(0, 0, 0, 0) !important;
}

html body.mode-dark .dashboard_quota_box {
    border-color: rgba(0, 0, 0, 0) !important;
}

.dashboard-quota-box-bg-light {
    background: var(--var-light-bg-color);
    border: 1px solid #dee2e6 !important;
}

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

/* Page */
.page-container {
    padding-bottom: 0;
    min-height: calc(100vh - 156px);
}

.quick-link-box {
    gap: 0.5rem;
    align-items: center;
    padding: 1.2rem 1rem;
    background: var(--card-bg);
    transition: 0.3s;
}

.quick-link-box .icon {
    /* width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem; */
    flex-shrink: 0;
}

.quick-link-box img,
.quick-link-box svg {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    /* color: var(--var-text-dark-color); */
}

.quick-link-box.quick-link-automation .icon svg {
    padding: 0.25rem;
}

/* .quick-link-box.quick-link-campaign .icon {
    background: #a588f4;
    color: #fff;
}

.quick-link-box.quick-link-import .icon {
    background: #40c17b;
    color: #fff;
}

.quick-link-box.quick-link-automation .icon {
    background: #f39329;
    color: #fff;
} */

.quick-link-box .right-icon {
    margin-left: auto;
}

.quick-link-box .right-icon svg {
    width: 1.2rem;
    height: 1.2rem;
    object-fit: cover;
    color: var(--var-text-dark-color);
}

body.mode-dark .quick-link-box svg {
    color: var(--var-text-light-color);
    fill: var(--var-text-light-color);
}

.quick-link-box:hover {
    background: #c9d3d9;
    border-color: #2c546b;
}

body.mode-dark .quick-link-box:hover {
    background: #2c546b;
    border-color: #2c546b;
}

/* .quick-link-box:hover * {
    color: var(--var-light-bg-color) !important;
    fill: var(--var-light-bg-color) !important;
} */

/*Reset Dark Border*/
body.mode-dark .onboarding-list.border,
body.mode-dark .lists-growth-chart2.border,
body.mode-dark .quick-link-box.border,
body.mode-dark .recent-campaign-table-wrapper.border {
    border-color: rgba(255, 255, 255, 0) !important;
}

/*apex chart*/
#ListsGrowthChart2 {
    margin: -25px 0;
}

body.mode-dark
    #ListsGrowthChart2
    .apexcharts-grid
    .apexcharts-gridlines-horizontal
    .apexcharts-gridline,
body.mode-dark
    #ListsGrowthChart2
    .apexcharts-grid
    .apexcharts-grid-borders
    .apexcharts-gridline {
    opacity: 0.3;
}

body.mode-dark #ListsGrowthChart2 .apexcharts-text,
body.mode-dark #ListsGrowthChart2 .apexcharts-title-text,
body.mode-dark #ListsGrowthChart2 .apexcharts-subtitle-text {
    fill: var(--var-text-light-color);
}

body.mode-dark .apexcharts-grid {
    opacity: 0;
}

body.mode-dark
    .apexcharts-tooltip.apexcharts-theme-light
    .apexcharts-tooltip-title,
body.mode-dark .apexcharts-tooltip.apexcharts-theme-light {
    background: var(--body-bg);
    border-color: var(--var-border);
}

body.mode-dark
    .apexcharts-tooltip.apexcharts-theme-light
    .apexcharts-tooltip-title {
    background: var(--card-bg);
}

body.mode-dark .apexcharts-grid-borders .apexcharts-gridline:first-child {
    display: none;
}

body.mode-dark .apexcharts-area-series .apexcharts-series path:first-child {
    fill: rgba(255, 255, 255, 0.4);
}

body.mode-dark .apexcharts-area-series .apexcharts-series > path {
    stroke: rgba(255, 255, 255, 0.3);
}

/*Video*/
.training-videos-wrapper {
    display: flex;
    flex-direction: column;
    max-width: 650px;
    width: 100%;
}

.training-videos {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.training-video {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-bottom: 2px solid var(--var-border);
    padding-bottom: 20px;
}

.training-video:nth-last-child {
    border-bottom: none;
}

.training-video-box {
    aspect-ratio: 2/1.2;
    position: relative;
}

.training-video-box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.training-video .training-video-title {
    margin-bottom: 0;
    font-size: 20px;
    text-align: center;
}

/**/
.dropzone {
    background: var(--var-light-bg-color) !important;
}

.select2-selection--single:not([class*="bg-"]):not([class*="border-"]) {
    background: var(--card-bg);
}

/*Section Heading*/
.section-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.section-heading .divider {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 24px;
}

.section-heading .divider span:nth-child(2) {
    padding: 6px 12px;
    min-width: 140px;
    background: var(--var-secondary-bg-color);
    border-radius: 100px;
    text-align: center;
    color: #fff;
    font-size: 15px;
}

.section-heading .divider span:nth-child(1),
.section-heading .divider span:nth-child(3) {
    flex-grow: 1;
    height: 2px;
    background: var(--var-border);
}

.section-heading p.description {
    font-size: 16px;
}

/*Create Box*/
.create-box {
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: center;
    align-items: center;
    height: 100%;
}

.create-box img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    flex-shrink: 0;
}

.create-box .content {
    padding: 16px 10px 12px;
    border: 1px solid var(--var-border);
    border-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
}

.create-box .content p {
    margin-top: auto;
    text-align: center;
}

.create-box .content .title {
    font-size: 20px;
}

a.btn.btn-outline {
    border: 2px solid var(--var-border);
    min-width: 156px;
    font-weight: 500;
    box-shadow: none;
}

.btn.btn-md {
    padding: 0.5rem 1rem !important;
}

body.mode-dark a.btn.btn-outline {
    border: 2px solid rgba(255, 255, 255, 0.1);
}

body.mode-dark .create-box {
    background: var(--body-bg) !important;
}

a.btn.btn-outline:hover {
    border-color: var(--var-secondary-bg-color) !important;
    background-color: var(--var-secondary-bg-color) !important;
    color: #fff !important;
}

/*Create CTA*/
.create-cta {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border: 1px solid var(--var-border);
    margin-top: 3rem;
    position: relative;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.bg-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

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

.create-cta .content {
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: var(--var-light-bg-color);
    max-width: 530px;
    width: 100%;
    text-align: center;
}

.create-cta .content a.btn {
    min-width: 150px;
}

.page-title.bg-stretch {
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    left: 50%;
    right: 50%;
    position: relative;
    background: var(--var-light-bg-color);
}

.page-title.bg-stretch.bg-automation {
    background: #f8ddcc;
}

.page-title.bg-stretch.bg-campaign {
    background: #d9f2ff;
}

.page-title.bg-stretch.bg-form {
    background: #fdf3c5;
}

.page-title.bg-stretch.bg-template {
    background: #e1ffd4;
}

.page-title {
    padding: 28px 0;
}

.page-title h1 {
    margin-bottom: 0;
}

.top-sticky-content {
    margin-top: 0;
    top: 115px;
    padding: 0.75rem 1rem 0.75rem 1.5rem;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 8px;
    box-shadow: none !important;
}

body.mode-dark .top-sticky-content {
    border-color: rgba(255, 255, 255, 0) !important;
    background-color: var(--card-bg) !important;
}

.campaign-schedule-radio .styled[type="radio"] ~ .check-symbol:before {
    border-radius: 3px;
}

.campaign-schedule-radio .styled[type="radio"]:checked ~ .check-symbol:before {
    content: "done";
    background: #247593;
    border-color: #247593;
    color: #fff;
    text-indent: 0;
}

.campaign-schedule-radio .styled[type="radio"]:checked ~ .check-symbol:after {
    display: none;
}

/*Widget Heading*/
.widget-header {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
    width: 100%;
}

.widget-header .widget-title {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 0;
}

.widget-header svg {
    width: 24px;
    height: auto;
}

body.mode-dark .widget-header svg:first-child {
    background: var(--dark-check-bg);
}

.widget-header .material-icon {
    font-size: 18px;
}

.widget-header .widget-link {
    font-size: 14px;
    text-decoration: underline;
    margin-left: auto;
}

.widget-header .widget-link .btn-icon {
    font-size: 16px;
}

.widget-header .form-group {
    margin-bottom: 0;
}

html body.theme-blue .navbar-main {
    background-color: var(--bg-nav) !important;
}

.navbar-icon svg {
    fill: currentColor !important;
}

.navbar-main .navbar-nav .lvl-1 {
    color: var(--var-text-dark-color);
    fill: var(--var-text-dark-color);
    padding: 0.8rem 0.5rem !important;
}

.navbar-main .navbar-nav .nav-item:not(.icon-only) .lvl-1 > .navbar-icon {
    opacity: 1;
    margin-right: 0.5rem;
}

.navbar-main .navbar-nav .nav-item:not(.icon-only) .lvl-1 > .navbar-icon svg {
    fill: var(--var-text-dark-color);
    color: var(--var-text-dark-color);
    stroke: var(--var-text-dark-color);
}

.navbar-main .navbar-nav .lvl-1:hover,
.navbar-main .navbar-nav .nav-item.active .lvl-1,
.navbar-main .navbar-nav .nav-item:hover .lvl-1 {
    background-color: var(--var-secondary-bg-color) !important;
    color: var(--var-text-light-color) !important;
    fill: var(--var-text-light-color) !important;
    stroke: var(--var-text-light-color) !important;
}

.navbar-main .navbar-nav .lvl-1:hover > .navbar-icon svg,
.navbar-main .navbar-nav .nav-item.active .lvl-1 > .navbar-icon svg,
body.mode-dark .navbar-main .navbar-nav .lvl-1 > .navbar-icon svg,
.navbar-main .navbar-nav .nav-item:hover .lvl-1 > .navbar-icon svg {
    color: var(--var-text-light-color) !important;
    fill: var(--var-text-light-color) !important;
    stroke: var(--var-text-light-color) !important;
}

html body.theme-blue.mode-dark .navbar-main .navbar-nav .lvl-1:hover,
html body.theme-blue.mode-dark .navbar-main .navbar-nav .nav-item.active .lvl-1,
html body.theme-blue.mode-dark .navbar-main .navbar-nav .nav-item:hover .lvl-1 {
    background-color: var(--card-bg) !important;
}

.tooltipster-sidetip.tooltipster-light .tooltipster-box {
    background: var(--var-secondary-bg-color) !important;
    color: var(--var-text-light-color) !important;
}

.tooltipster-sidetip.tooltipster-light.tooltipster-top
    .tooltipster-arrow-background {
    border-top-color: var(--var-secondary-bg-color) !important;
}

.tooltipster-sidetip.tooltipster-light * {
    color: var(--var-text-light-color) !important;
}

.dashboard-list-growth-select-wrapper
    .select2-container
    .select2-selection--single:not([class*="bg-"]):not([class*="border-"]),
.dashboard-account-summary-select-wrapper
    .select2-container
    .select2-selection--single:not([class*="bg-"]):not([class*="border-"]),
.dashboard-deliverability-select-wrapper
    .select2-container
    .select2-selection--single:not([class*="bg-"]):not([class*="border-"]) {
    height: 35px;
}

.nav-item.theme-switcher-icon {
    padding: 0.8rem 0.8rem !important;
}

.nav-item .top-controls-container {
    padding: 0 !important;
}

.nav-item .top-controls-container .but-change-theme-mode {
    width: 28px;
    height: 28px;
    background-color: transparent !important;
    color: var(--var-text-dark-color) !important;
}
.nav-item .top-controls-container .but-change-theme-mode:hover {
    background-color: rgba(0, 0, 0, 0.07) !important;
}
.nav-item .top-controls-container .but-change-theme-mode svg {
    fill: var(--var-text-dark-color) !important;
}

.nav-item .top-search-container > div {
    align-items: center;
}

.nav-item .app_search_box .search-control {
    padding: 0 !important;
}

.nav-item .app_search_box .search-icon {
    transform: translateY(4%) scale(1) !important;
}

.nav-item .app_search_box {
    padding: 0 !important;
}

body.mode-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    border-color: var(--var-border) !important;
}
a.nav-link.lvl-1.btn.btn-outline {
    min-width: 120px;
    justify-content: center;
    padding: 0.6rem 0.5rem !important;
    border-radius: 8px;
    box-shadow: none;
    border-width: 1px;
}

a.nav-link.lvl-1.active.btn.btn-outline,
a.nav-link.lvl-1.btn.btn-outline:hover {
    border-color: var(--var-secondary-bg-color);
    box-shadow: none;
    border-width: 1px;
}

.activities-menu-item.dropdown-toggle::after {
    display: none;
}

.navbar-main .activities-menu-item {
    color: var(--var-text-dark-color);
    line-height: 10px;
    margin-top: 0;
    padding: 13px 7px;
    border-radius: 100% !important;
    background: transparent;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 16px !important;
    transform: scale(1.2);
}

.navbar-main .navbar-nav .lvl-1.activities-menu-item:hover,
.navbar-main .navbar-nav .nav-item.active .lvl-1.activities-menu-item,
.navbar-main .navbar-nav .nav-item:hover .lvl-1.activities-menu-item {
    background-color: rgba(0, 0, 0, 0.07) !important;
    color: var(--var-text-dark-color) !important;
    fill: var(--var-text-dark-color) !important;
    stroke: var(--var-text-dark-color) !important;
}

.navbar-main .navbar-nav .lvl-1.activities-menu-item:hover .navbar-icon svg,
.navbar-main
    .navbar-nav
    .nav-item.active
    .lvl-1.activities-menu-item
    .navbar-icon
    svg,
.navbar-main
    .navbar-nav
    .nav-item:hover
    .lvl-1.activities-menu-item
    .navbar-icon
    svg {
    color: var(--var-text-dark-color) !important;
    fill: var(--var-text-dark-color) !important;
    stroke: var(--var-text-dark-color) !important;
}

body.mode-dark .navbar-main .activities-menu-item {
    /* background: rgba(255, 255, 255, 0.05); */
}

body.mode-dark .navbar-main .activities-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

body.mode-dark .navbar-main .navbar-nav .lvl-1.activities-menu-item:hover,
body.mode-dark
    .navbar-main
    .navbar-nav
    .nav-item.active
    .lvl-1.activities-menu-item,
body.mode-dark
    .navbar-main
    .navbar-nav
    .nav-item:hover
    .lvl-1.activities-menu-item {
    background-color: rgba(0, 0, 0, 0.07) !important;
    color: var(--var-text-light-color) !important;
    fill: var(--var-text-light-color) !important;
    stroke: var(--var-text-light-color) !important;
}

body.mode-dark
    .navbar-main
    .navbar-nav
    .lvl-1.activities-menu-item:hover
    .navbar-icon
    svg,
body.mode-dark
    .navbar-main
    .navbar-nav
    .nav-item.active
    .lvl-1.activities-menu-item
    .navbar-icon
    svg,
body.mode-dark
    .navbar-main
    .navbar-nav
    .nav-item:hover
    .lvl-1.activities-menu-item
    .navbar-icon
    svg {
    color: var(--var-text-light-color) !important;
    fill: var(--var-text-light-color) !important;
    stroke: var(--var-text-light-color) !important;
}

.pml-table.v2 tbody,
.pml-table.v3 tbody {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    padding-top: 1.75rem;
}

.pml-table.table-log.v2 tbody,
.pml-table.table-log.v3 tbody {
    padding-top: 1rem;
}

.pml-table.v2 tbody tr,
.pml-table.v3 tbody tr,
.modern-listing.v2 li {
    background: var(--card-bg);
    padding: 1.125rem 1rem !important;
    box-shadow: none !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 8px;
}

.pml-table.v2 tbody tr td,
.pml-table.v3 tbody tr td {
    border: 0 !important;
    padding: 12px 8px !important;
}

body.mode-dark .pml-table.v2 tbody tr,
body.mode-dark .pml-table.v3 tbody tr {
    border-color: rgba(255, 255, 255, 0) !important;
}

.campaign-overview-nav-tabs {
    margin-bottom: 0.5rem;
}

.pml-table.v3 tbody {
    gap: 0;
}

.pml-table.v3 tbody tr {
    border-radius: 0 !important;
}
.pml-table.v3 tbody tr:first-child {
    border-top-right-radius: 8px !important;
    border-top-left-radius: 8px !important;
}
.pml-table.v3 tbody tr:last-child {
    border-bottom-right-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}
.pml-table.v3:has(+ div.pagination-container.v2) tbody tr:last-child {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom: 0 !important;
}
.pml-table.v3 tbody tr:not(:first-child) {
    border-top: 0 !important;
}

.pml-table.v3 tbody tr td,
.pml-table.v2 tbody tr td {
    vertical-align: middle;
}

.pml-table.v3 {
    margin-bottom: 0 !important;
}

.pagination-container.v2 {
    background-color: var(--card-bg) !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    padding: 1rem !important;
    border: 1px solid var(--var-border) !important;
}

.pagination-container.v2 .page-item .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px !important;
    border: 1px solid var(--var-border);
    color: var(--var-text-dark-color);
    fill: var(--var-text-dark-color);
    background-color: var(--card-bg);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}

.pagination-container.v2 .page-item .page-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.pagination-container.v2 .page-item:not(.disabled):hover .page-link,
.pagination-container.v2 .page-item.active .page-link {
    background-color: var(--var-secondary-bg-color);
    border-color: var(--var-secondary-bg-color);
    color: #fff;
    fill: #fff;
}

.pagination-container.v2 .page-item.disabled .page-link {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}

.pagination-container.v2
    .select2-selection--single:not([class*="bg-"]):not([class*="border-"]),
.top-list-controls.v2
    .select2-selection--single:not([class*="bg-"]):not([class*="border-"]) {
    border-color: var(--bs-border-color);
    background-color: var(--card-bg);
}
.pml-table.v3 .bg-done {
    background-color: var(--var-color-green-100);
    border-color: var(--var-color-green-500);
    color: var(--var-color-green-500);
}

/**/

body.mode-dark .mobile-nav-items .activities-menu-item {
    fill: var(--var-text-light-color);
}

@media (min-width: 992px) {
    .navbar-right .nav-item {
        display: inline-flex;
        align-items: center;
    }
}

body.mode-dark .dark-border {
    border-color: rgba(255, 255, 255, 0) !important;
}

/*.mobile-nav-items .activities-menu-item {*/
/*    padding: 0 !important;*/
/*    transform: scale(1);*/
/*}*/

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

.campaign-steps li {
    display: inline-flex;
    align-items: center;
    row-gap: 0.5rem;
}

.campaign-steps li [class^="material-"] {
    font-size: 0.75rem;
    transform: none;
}

.campaign-steps li a {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    border-bottom: 2px solid transparent;
}

.campaign-steps li a.active {
    border-color: var(--var-secondary-bg-color);
    font-weight: 600;
}

.campaign-form-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 56px auto 0;
    padding: 0 !important;
    position: relative;
    min-height: calc(75vh + 70px);
    /* overflow-y: auto; */
}

.campaign-form-card .body-content-scrollable {
    height: 75vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    overflow-y: auto;
}

.campaign-form-card .body-content-scrollable .simplebar-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.campaign-form-submitting {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.2);
    z-index: 10;
}

.campaign-form-card .campaign-page-loading {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--card-bg);
    z-index: 11;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
}

.campaign-form-card:has(.campaign-form-card-content.has-footer) {
    padding-bottom: 0 !important;
}

.campaign-form-card-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
}

.campaign-form-card form {
    width: 100%;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}

.campaign-form-card .campaign-form-card-content .body-content {
    max-width: 992px;
}

.campaign-form-card.full-width > div:first-child {
    max-width: 100%;
}

.campaign-form-card .campaign-card-footer {
    position: sticky;
    bottom: 0;
}

.campaign-form-card .form-group {
    margin-bottom: 16px;
}

.checkbox-with-info.control-checkbox2 label {
    margin-bottom: 0;
}

.checkbox-with-info.control-checkbox2
    .styled[type="checkbox"]
    ~ .check-symbol:before {
    top: 4px;
    background-color: #ddd;
    border-color: #ddd;
    color: #fff;
    text-indent: 0;
}

.confirm-campaign-box {
    max-width: 100% !important;
    width: 100%;
}

.campaign-form-card .setup-campaign-settings .form-group {
    margin-bottom: 8px;
}

.dashboard_quota_box {
    border: 0 !important;
}

.dashboard_quota_box > div {
    border: solid 2px transparent !important;
    background-clip: padding-box;
    border-radius: 8px !important;
}

.dashboard_quota_box > div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(to right, #4facfe, #00f2fe);
    margin: -2px;
}

/* Different gradients per box */
.dashboard_quota_box > div:first-child::before {
    background: linear-gradient(to right, #4facfe, #fa709a);
}

.dashboard_quota_box > div:nth-child(2)::before {
    background: linear-gradient(to right, #fa709a, #fa709a);
}

.dashboard_quota_box > div:last-child::before {
    background: linear-gradient(to right, #fa709a, #fee140);
}

.dashboard_quota_box > div:last-child::before {
    background: linear-gradient(to right, #fa709a, #fee140);
}

.campaign-form-card:has(.campaign-form-card-select-type) {
    min-height: 744px;
}

/* Gradient Border Button */
.btn.border-glow {
    position: relative;
    background: var(--card-bg, #fff);
    border: 2px solid transparent;
    color: var(--var-text-dark-color);
    fill: var(--var-text-dark-color);
    font-weight: 600;
    letter-spacing: 0.5px;
    background-clip: padding-box;
    border-radius: 4px;
}

.btn.border-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    margin: -2px;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        #4facfe,
        #00f2fe,
        #fee140,
        #fa709a,
        #4facfe
    );
    background-size: 200% 100%;
}

.btn.border-glow:hover {
    border-color: transparent !important;
    color: var(--var-text-dark-color);
    box-shadow: none !important;
}

.btn.border-glow:hover::before {
    animation: gradient-shift 2s linear infinite;
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

body.mode-dark .btn.campaign-create-v2 {
    background: var(--card-bg);
    color: var(--var-text-light-color);
}

body.mode-dark .btn.campaign-create-v2:hover {
    background: var(--card-bg);
    color: var(--var-text-light-color);
}

body .page-container > .headbar {
    height: 0;
    display: none !important;
}

/**/
.plan-list-wrapper {
    display: none;
}

/* Information banner */
/* Layout */
.base > .sidebar {
    position: fixed;
    width: var(--sidebar-width);
    height: 100vh;
    top: 0;
    left: 0;
    background: var(--sidebar-bg);
    z-index: 1029;
    padding-top: 53px;
    padding-bottom: 16px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.sidebar-nav .navbar-nav > li > .dropdown-menu {
    box-shadow: none !important;
    border: 0;
    margin: 0.5rem 0 0 1rem !important;
    position: static !important;
    transform: none !important;
    inset: none !important;
    background-color: transparent !important;
}

.sidebar-nav .navbar-nav > li > .dropdown-menu > li {
    background-color: transparent !important;
}

.sidebar-nav .navbar-nav .nav-item a:not(.btn) {
    padding: 0.5rem 0.5rem !important;
    font-size: 14px !important;
    border-radius: 0.25rem !important;
    color: var(--sidebar-text-color) !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transition:
        background-color 0.2s ease,
        color 0.2s ease !important;
}

.sidebar-nav .navbar-nav .nav-item a:not(.btn):hover {
    color: var(--sidebar-hover-text-color) !important;
    background-color: var(--sidebar-hover-bg-color) !important;
}

.sidebar-nav .navbar-nav .nav-item.active > a:not(.btn) {
    color: var(--sidebar-active-text-color) !important;
    background-color: var(--sidebar-active-bg-color) !important;
    font-weight: 600 !important;
}

.sidebar-nav .navbar-nav .nav-item a.dropdown-toggle::after {
    margin-left: auto;
    font-size: 16px !important;
    content: "keyboard_arrow_right";
    transform: rotate(0);
    transition: all 0.3s ease !important;
}

.sidebar-nav .navbar-nav .nav-item a.dropdown-toggle.show::after {
    transform: rotate(90deg);
}

.base > .content {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
}

.base > .sidebar .sidebar-promotion .plan-icon {
    width: 28px;
    height: 28px;
    background-color: var(--sidebar-active-bg-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sidebar-text-color);
    fill: var(--sidebar-text-color);
}

.base > .sidebar .sidebar-promotion .plan-detail h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0;
}

.footer {
    position: relative;
}

/* Empty list */
.empty-list.v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: 3rem 1rem;
    min-height: 400px;
}

.empty-list.v2 .empty-list-icon img {
    height: 180px;
}

.empty-list.v2 .empty-list-icon .light-mode {
    display: block;
}

.empty-list.v2 .empty-list-icon .dark-mode {
    display: none;
}

body.mode-dark .empty-list.v2 .empty-list-icon .light-mode {
    display: none;
}

body.mode-dark .empty-list.v2 .empty-list-icon .dark-mode {
    display: block;
}

/* Input Group */
.input-group {
    position: relative;
}

.input-group .input-group-icon {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    background-color: transparent;
    border-radius: 0;
    z-index: 6;
    pointer-events: none;
    flex-shrink: 0;
    fill: #212529;
    color: #212529;
}

.input-group .input-group-icon svg {
    width: 16px;
    height: 16px;
}

.input-group .form-control {
    width: 100%;
    text-indent: calc(32px - 0.5rem);
}

body.mode-dark .input-group .input-group-icon {
    fill: rgba(255, 255, 255, 0.85);
    color: rgba(255, 255, 255, 0.85);
}

/*Table*/
@media (min-width: 991px) {
    #CampaignsIndexContent .pml-table tbody tr td:not(:first-child) {
        width: 12%;
    }

    #Automation2ListTable.pml-table tbody tr td:nth-child(2),
    #CampaignsIndexContent .pml-table tbody tr td:nth-child(2) {
        width: 30%;
    }

    #CampaignsIndexContent .pml-table tbody tr td:last-child {
        width: 22%;
    }

    #CampaignsIndexContent .pml-table tbody tr td:nth-last-child(2) {
        text-align: left !important;
    }

    #EmailAddressTable .pml-table tbody tr td:not(:first-child) {
        width: 16%;
    }

    #EmailAddressTable .pml-table tbody tr td:nth-child(2),
    #EmailAddressTable .pml-table tbody tr td:nth-child(3) {
        width: 25%;
    }

    #SendingServersTable .pml-table:not(.pre-list-content) {
        table-layout: fixed;
        width: 100%;
    }

    #SendingServersTable .pml-table:not(.pre-list-content) tbody tr {
        display: flex;
    }

    #SendingServersTable .pml-table:not(.pre-list-content) tbody tr {
        display: table-row !important;
    }

    #SendingServersTable .pml-table:not(.pre-list-content) tr td:nth-child(1) {
        width: 3%;
    }

    #SendingServersTable .pml-table:not(.pre-list-content) tr td:nth-child(2) {
        width: 6%;
    }

    #SendingServersTable .pml-table:not(.pre-list-content) tr td:nth-child(3) {
        width: 21%; /* 30% */
    }

    #SendingServersTable .pml-table:not(.pre-list-content) tr td:nth-child(4) {
        width: 20%; /* 50% */
    }

    #SendingServersTable .pml-table:not(.pre-list-content) tr td:nth-child(5) {
        width: 20%; /* 70% */
    }

    #SendingServersTable .pml-table:not(.pre-list-content) tr td:nth-child(6) {
        width: 12%; /* 82% */
    }

    #SendingServersTable .pml-table:not(.pre-list-content) tr td:nth-child(7) {
        width: 18%; /* 100% */
    }

    /*#SendingServersTable .pml-table tr td:nth-child(8) {*/
    /*    width: 16%; !* 100% *!*/
    /*}*/
    #SendingServersTable
        .pml-table:not(.pre-list-content)
        tbody
        tr
        td
        .mc-server-avatar {
        margin-right: 16px !important;
    }

    #SendingServersTable .pml-table:not(.pre-list-content) tbody tr td {
        min-height: 40px;
        box-sizing: border-box;
    }

    #SendingServersTable .pml-table:not(.pre-list-content) tbody tr td:empty {
        min-width: inherit;
    }

    #SubscribersIndexContent .pml-table tbody tr,
    #SegmentsSubscribersContent .pml-table tbody tr {
        display: flex;
    }

    #SubscribersIndexContent .pml-table tbody tr td:nth-child(1),
    #SegmentsSubscribersContent .pml-table tbody tr td:nth-child(1) {
        width: 3%;
    }

    #SubscribersIndexContent .pml-table tbody tr td:nth-child(2),
    #SegmentsSubscribersContent .pml-table tbody tr td:nth-child(2) {
        width: 42%; /* 45% */
    }

    #SubscribersIndexContent .pml-table tbody tr td:nth-child(3),
    #SegmentsSubscribersContent .pml-table tbody tr td:nth-child(3) {
        width: 20%; /* 65% */
    }

    #SubscribersIndexContent .pml-table tbody tr td:nth-child(4),
    #SegmentsSubscribersContent .pml-table tbody tr td:nth-child(4) {
        width: 20%; /* 85% */
    }

    #SubscribersIndexContent .pml-table tbody tr td:nth-child(5),
    #SegmentsSubscribersContent .pml-table tbody tr td:nth-child(5) {
        width: 15%; /* 100% */
    }

    #CustomerListTable .pml-table tr {
        display: flex !important;
    }

    #CustomerListTable .pml-table tr td {
        width: 100%;
    }

    #CustomerListTable .pml-table tr td:nth-child(1) {
        min-width: 250px;
    }

    #SendingDomainTable .pml-table tr td:nth-child(1) {
        width: 3%; /* 2% */
    }
    #SendingDomainTable .pml-table tr td:nth-child(2) {
        width: 32%; /* 35% */
    }
    #SendingDomainTable .pml-table tr td:nth-child(3) {
        width: 12%; /* 47% */
    }
    #SendingDomainTable .pml-table tr td:nth-child(4) {
        width: 12%; /* 59% */
    }
    #SendingDomainTable .pml-table tr td:nth-child(5) {
        width: 12%; /* 71% */
    }
    #SendingDomainTable .pml-table tr td:nth-child(6) {
        width: 12%; /* 83% */
    }
    #SendingDomainTable .pml-table tr td:nth-child(7) {
        width: 17%; /* 100% */
    }

    #BlacklistsTable .pml-table tbody tr td:nth-child(1) {
        width: 4%;
    }
    #BlacklistsTable .pml-table tbody tr td:nth-child(2) {
        width: 46%;
    }
    #BlacklistsTable .pml-table tbody tr td:nth-child(3) {
        width: 25%;
    }
    #BlacklistsTable .pml-table tbody tr td:nth-child(4) {
        width: 25%;
    }

    #rolesIndexContent .pml-table tbody tr td:nth-child(1) {
        width: 50%; /* 50% */
    }
    #rolesIndexContent .pml-table tbody tr td:nth-child(2) {
        width: 15%; /* 65% */
    }
    #rolesIndexContent .pml-table tbody tr td:nth-child(3) {
        width: 15%; /* 70% */
    }
    #rolesIndexContent .pml-table tbody tr td:nth-child(4) {
        width: 10%; /* 85% */
    }
    #rolesIndexContent .pml-table tbody tr td:nth-child(5) {
        width: 10%; /* 100% */
    }

    /* Forms */
    #FormsIndexContent .pml-table tbody tr td:nth-child(3) {
        width: 22%;
    }
}

@media (max-width: 1200px) {
    .navbar-main {
        overflow: hidden;
        overflow-y: auto;
    }
}

/* @media (min-width: 1920px) {
    .navbar.navbar-main.frontend .navbar-brand,
    .navbar.navbar-main.frontend .navbar-collapse,
    .navbar.navbar-main.frontend .navbar-right {
        width: 100%;
        flex-grow: 1;
    }
    .navbar.navbar-main.frontend .navbar-right .navbar-nav {
        justify-self: flex-end;
        margin-right: 0 !important;
    }
    .navbar.navbar-main.frontend .navbar-brand {
        max-width: 580px;
    }

    .navbar.navbar-main.frontend .navbar-right {
        max-width: 592px;
    }
}

@media (min-width: 1920px) and (max-width: 2043px) {
    .navbar.navbar-main.frontend .navbar-brand {
        max-width: 450px;
    }
}

@media (min-width: 1478px) and (max-width: 1919px) {
    .navbar.navbar-main.frontend .navbar-brand,
    .navbar.navbar-main.frontend .navbar-right {
        flex-shrink: 0;
    }

    .navbar.navbar-main.frontend .navbar-collapse {
        justify-content: flex-end !important;
    }
}

@media (min-width: 1200px) and (max-width: 1477px) {
    .navbar.navbar-main.frontend .navbar-nav .lvl-1,
    a.nav-link.lvl-1.btn.btn-outline {
        padding: 0.8rem 0.3rem !important;
    }

    .navbar.navbar-main.frontend .navbar-nav .lvl-1#content-menu span {
        display: none;
    }
}

@media (min-width: 2440px) {
    .navbar.navbar-main.frontend .navbar-brand,
    .navbar.navbar-main.frontend .navbar-right {
        max-width: 620px;
    }
} */

/* Summary box */
.dashboard-summery-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
#account-summary-grid {
    padding-top: 8px;
}
.dashboard-summery-box {
    padding: 0.25rem 0.5rem;
    position: relative;
}

.dashboard-summery-box:nth-child(1),
.dashboard-summery-box:nth-child(2),
.dashboard-summery-box:nth-child(3) {
    padding-bottom: 0.825rem;
}

.dashboard-summery-box:nth-child(4),
.dashboard-summery-box:nth-child(5),
.dashboard-summery-box:nth-child(6) {
    padding-top: 0.825rem;
}

.dashboard-summery-box::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 70%;
    height: 1px;
    background-color: var(--var-border);
    transform: translateX(-50%);
}
.dashboard-summery-box::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 80%;
    background-color: var(--var-border);
    transform: translateY(-50%);
}
.dashboard-summery-box:nth-child(4)::after,
.dashboard-summery-box:nth-child(5)::after,
.dashboard-summery-box:nth-child(6)::after,
.dashboard-summery-box:nth-child(3)::before,
.dashboard-summery-box:nth-child(6)::before {
    display: none;
}

.dashboard-summery-box .icon {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--var-light-bg-color);
    border-radius: 1rem;
}
.dashboard-summery-box .icon svg {
    width: 1.125rem;
    height: 1.125rem;
}
.dashboard-summery-box .content {
    gap: 0.125rem;
}
.dashboard-summery-box .content .title {
    font-size: 0.825rem;
    font-weight: 500;
    margin-bottom: 0;
}
.dashboard-summery-box .content .number {
    font-size: 1.25rem;
    font-weight: 600;
}
.dashboard-summery-box .content .indicator {
    font-size: 0.625rem;
    font-weight: 400;
}

.dashboard-summery-box.primary .icon,
.offer-info-box.primary .icon {
    background-color: var(--var-color-blue-50);
}
.dashboard-summery-box.primary .icon svg,
.offer-info-box.primary .icon svg {
    fill: var(--var-color-blue-500);
    color: var(--var-color-blue-500);
}
.dashboard-summery-box.success .icon,
.offer-info-box.success .icon {
    background-color: var(--var-color-green-50);
}
.dashboard-summery-box.success .icon svg,
.offer-info-box.success .icon svg {
    fill: var(--var-color-green-500);
    color: var(--var-color-green-500);
}
.dashboard-summery-box.warning .icon,
.offer-info-box.warning .icon {
    background-color: var(--var-color-yellow-50);
}
.dashboard-summery-box.warning .icon svg,
.offer-info-box.warning .icon svg {
    fill: var(--var-color-yellow-500);
    color: var(--var-color-yellow-500);
}
.dashboard-summery-box.danger .icon,
.offer-info-box.danger .icon {
    background-color: var(--var-color-red-50);
}
.dashboard-summery-box.danger .icon svg,
.offer-info-box.danger .icon svg {
    fill: var(--var-color-red-500);
    color: var(--var-color-red-500);
}

.dashboard-summery-box.primary .content .indicator,
.dashboard-summery-box.success .content .indicator,
.dashboard-summery-box.warning .content .indicator {
    color: var(--var-color-green-500);
}

.dashboard-summery-box.danger .content .indicator {
    color: var(--var-color-red-500);
}

.growth-card.dashboard-summery-box {
    display: flex;
    gap: 0.275rem;
}

.growth-card.dashboard-summery-box::after {
    display: none;
}

.growth-card.dashboard-summery-box [class^="material-"],
.growth-card.dashboard-summery-box [class^="material-symbols"] {
    transform: translateY(-2px) scale(1.3);
}

/* Dashboard list-growth metrics */
.dashboard-list-growth-flex {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.dashboard-growth-metrics:empty {
    display: none;
}
.dashboard-growth-metrics .growth-total {
    margin-bottom: 0.75rem;
}
.dashboard-growth-metrics .growth-total-title {
    font-size: 0.825rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}
.dashboard-growth-metrics .growth-total-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.dashboard-growth-metrics .growth-total-number {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}
.dashboard-growth-metrics .growth-total-period {
    font-size: 0.75rem;
    color: var(--var-color-gray-500, #6c757d);
}
.dashboard-growth-metrics .growth-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
.dashboard-growth-metrics .growth-card .icon .material-symbols-rounded {
    font-size: 1.125rem;
}
.dashboard-growth-metrics .growth-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    font-weight: 600;
}
.dashboard-growth-metrics .growth-trend.is-positive {
    color: var(--var-color-green-500);
}
.dashboard-growth-metrics .growth-trend.is-negative {
    color: var(--var-color-red-500);
}

#makoUpgradeOverlay .upgrade-overlay-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*  */
.offer-info-box {
    display: flex;
    gap: 8px;
    height: 100%;
}

.offer-info-box .icon {
    width: 44px;
    height: 44px;
    background: red;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
}

.offer-info-wrapper > * {
    padding: 0;
}

.offer-info-wrapper {
    gap: 12px;
}

.offer-info-wrapper .col-md-4 {
    width: calc((100% - 12px * 2) / 3);
}
.offer-info-wrapper .col-md-6 {
    width: calc((100% - 12px) / 2);
}

@media (max-width: 1200px) {
    .page-container.container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .dashboard-summery-wrapper {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 0;
    }

    .dashboard-summery-box {
        border-width: 0;
        padding: 0.75rem 0.5rem;
    }

    .dashboard-summery-box:nth-child(odd) {
        padding-left: 0;
    }
    .dashboard-summery-box:nth-child(even) {
        padding-right: 0;
    }

    .dashboard-summery-box .content .title {
        font-size: 0.75rem;
    }

    .dashboard-summery-box::after,
    .dashboard-summery-box::before {
        display: block !important;
    }
    .dashboard-summery-box:not(:nth-child(5)),
    .dashboard-summery-box:not(:nth-child(6)) {
        padding-bottom: 0.825rem;
    }
    .dashboard-summery-box:nth-child(5)::after,
    .dashboard-summery-box:nth-child(6)::after {
        display: none !important;
    }
    .dashboard-summery-box:nth-child(even)::before {
        display: none !important;
    }

    .offer-info-wrapper .col-md-4,
    .offer-info-wrapper .col-md-6 {
        width: calc((100% - 12px) / 2);
    }
}

.border-divider-end {
    border-right: 1px var(--bs-border-style) var(--bs-border-color) !important;
}

@media (max-width: 991px) {
    .onboarding-list > li > a {
        font-size: 15px;
    }

    .onboarding-list > li > a > svg {
        width: 22px;
        height: 22px;
    }

    .quick-link-box {
        gap: 4px;
        padding: 4px 16px;
    }

    .quick-link-box img {
        width: 37% !important;
    }

    .dashboard_quota_box {
        row-gap: 20px;
    }

    .dashboard_quota_box > div {
        width: calc(100% / 2) !important;
    }

    .training-videos {
        gap: 20px;
    }

    .training-video {
        gap: 8px;
        padding-bottom: 16px;
    }

    .training-video .training-video-title {
        font-size: 16px;
    }

    .section-heading .divider {
        margin-bottom: 20px;
    }

    .section-heading .divider span:nth-child(2) {
        min-width: 120px;
        padding: 4px 12px;
        font-size: 14px;
    }

    .widget-header {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .widget-header .widget-link {
        margin-left: 0;
    }

    .navbar-right ul.navbar-nav {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    .navbar-right ul.navbar-nav .nav-item:last-child {
        width: 100%;
    }

    .pml-table-container div[total-items-count] {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .pml-table-container
        div[total-items-count]
        > .num_per_page
        > label:nth-last-child(2) {
        display: none;
    }

    .pml-table-container
        div[total-items-count]
        > .num_per_page
        > label:last-child {
        margin-left: 0;
        position: relative;
    }

    .pml-table-container
        div[total-items-count]
        > .num_per_page
        > label:last-child::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background-color: var(--body-bg);
    }

    .pml-table-container div[total-items-count] > div:last-child {
        margin-left: auto;
    }

    .pml-table-container
        div[total-items-count]
        > div:last-child
        pagination
        > label {
        display: none;
    }

    .pml-table-container
        div[total-items-count]
        > div:last-child
        pagination
        ul.pagination {
        flex-wrap: wrap;
        margin-left: 0 !important;
        border-left: 0 !important;
        row-gap: 0.25rem;
    }

    .top-sticky-content {
        position: static;
    }

    .navbar-toggler-icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    .top-search-container .app_search_box .search-control {
        padding-top: 0;
    }

    .top-search-container .app_search_box .search-control .search-icon,
    .but-change-theme-mode,
    .activities-menu-item {
        width: 32px !important;
        height: 32px !important;
        font-size: 16px !important;
        transform: scale(1) !important;
        padding: 0 !important;
        margin-right: 0 !important;
        background-color: transparent !important;
        color: var(--var-text-dark-color) !important;
    }

    .top-search-container .app_search_box .search-control {
        align-items: center;
    }

    .top-search-container .app_search_box .search-control .search-icon {
        line-height: 32px;
        text-align: center;
        padding: 0;
    }

    .navbar-main .activities-menu-item {
        margin-right: 8px !important;
    }

    .nav-item.theme-switcher-icon {
        padding: 0.5rem 0.5rem !important;
    }

    .top-controls-container {
        padding: 0 !important;
    }

    .fullscreen-search-box.search-open .search-results {
        width: 100% !important;
    }

    #Automation2ListTable.pml-table tbody tr td:nth-child(2),
    #CampaignsIndexContent .pml-table tbody tr td:nth-child(2) {
        width: unset;
    }

    /* Hide sidebar */
    #mainSidebar {
        left: calc((0px - var(--sidebar-width)) - 10px);
        transition: left 0.3s ease;
    }
    #mainSidebar.show {
        left: 0;
    }
    .base > .content {
        margin-left: 0;
        width: 100%;
    }

    .base > .sidebar {
        padding-bottom: 60px;
    }

    #makoBuilderModal .modal-body {
        padding: 2rem 1rem;
    }

    .border-divider-end {
        border-right-width: 0 !important;
        border-bottom-width: 1px !important;
    }
}

@media screen and (max-width: 767px) {
    .campaign-form-card .campaign-card-footer {
        position: static;
    }

    .dashboard-growth-metrics .growth-cards {
        grid-template-columns: 1fr;
    }

    .dashboard-growth-metrics .growth-card::before {
        display: none !important;
    }

    .dashboard-growth-metrics .growth-card::after {
        display: block !important;
    }
    .dashboard-growth-metrics .growth-card:last-child::after {
        display: none !important;
    }

    #CampaignsIndexContainer .top-list-controls {
        flex-wrap: wrap;
    }

    #CampaignsIndexContainer .filter-box {
        margin-bottom: 10px;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 5px;
    }

    .offer-info-wrapper .col-md-4,
    .offer-info-wrapper .col-md-6 {
        width: 100%;
    }

    #makoBuilderModal .modal-lg,
    .modal-xl {
        max-width: 100%;
    }
}

@media (max-width: 420px) {
    .topbar.middle-bar-open .middle-bar {
        width: 100%;
    }
}

/* Dashboard information banner (layouts.core.Information_banner) */
.information-banner {
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

.information-banner__inner {
    position: relative;
    width: 100%;
}

.information-banner__message {
    word-wrap: break-word;
    overflow-wrap: anywhere;
    line-height: 1.45;
}

.information-banner__message a {
    text-decoration: underline;
    font-weight: 600;
}

.information-banner__dismiss {
    position: absolute;
    top: 50%;
    right: 8px;
    z-index: 2;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    opacity: 0.65;
    font-size: 1.35rem;
    line-height: 1;
    padding: 0.25rem 0.35rem;
    cursor: pointer;
    color: inherit;
}

@media (max-width: 576px) {
    .information-banner__dismiss {
        top: 5px;
        right: 4px;
        transform: none;
    }
    .information-banner__message {
        padding-right: 18px;
    }
}

.information-banner__dismiss:hover {
    opacity: 1;
}

/* Admin information banner form — Pickr mounts */
.ib-pickr-mount .pcr-button {
    margin-top: 4px;
}

/* Information banner — fixed under navbar on desktop */
:root {
    --banner-height: 0px;
}

@media (min-width: 992px) {
    .js-information-banner {
        position: fixed !important;
        left: var(--sidebar-width);
        right: 0;
        z-index: 1020;
        width: calc(100% - var(--sidebar-width));
        top: 53px;
    }

    main.content:has(.js-information-banner) {
        padding-top: 62px !important;
    }
}

/* Hide fullscreen search container when search is closed */
.fullscreen-search-box .top-search-container {
    display: none;
}

/* ── Upgrade overlay (landing pages) ── */
.upgrade-overlay {
    position: fixed;
    left: var(--sidebar-width);
    right: 0;
    bottom: 0;
    z-index: 1010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    top: 50px;
    width: calc(100% - var(--sidebar-width));
}

.upgrade-overlay-card {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    max-width: 500px;
    width: 100%;
    text-align: center;
}

.upgrade-modal-icon-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    background: rgba(99, 91, 255, 0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upgrade-modal-rocket-icon {
    font-size: 2.25rem;
    color: #635bff;
}

.upgrade-modal-sparkle {
    position: absolute;
    border-radius: 50%;
    background: #635bff;
    opacity: 0.55;
}

.upgrade-modal-sparkle.s1 {
    width: 6px;
    height: 6px;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
}
.upgrade-modal-sparkle.s2 {
    width: 5px;
    height: 5px;
    top: 6px;
    right: -6px;
}
.upgrade-modal-sparkle.s3 {
    width: 7px;
    height: 7px;
    bottom: -5px;
    left: 14px;
    opacity: 0.35;
}
.upgrade-modal-sparkle.s4 {
    width: 4px;
    height: 4px;
    bottom: 8px;
    right: -4px;
    opacity: 0.4;
}
.upgrade-modal-sparkle.s5 {
    width: 5px;
    height: 5px;
    top: 18px;
    left: -8px;
    opacity: 0.45;
}

.badge-premium {
    background: rgba(99, 91, 255, 0.12);
    color: #635bff;
    border: 1px solid rgba(99, 91, 255, 0.25);
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 14px;
}

.upgrade-modal-divider {
    border: none;
    border-top: 1px solid var(--var-border);
    margin: 0 0 1.25rem;
}

.upgrade-modal-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    max-width: 110px;
}

.upgrade-modal-feature-sep {
    width: 1px;
    align-self: stretch;
    background: var(--var-border);
    margin: 0 8px;
    opacity: 0.6;
}

.upgrade-modal-feature-icon {
    font-size: 1.5rem;
    color: #635bff;
}

.upgrade-modal-feature-label {
    font-size: 0.75rem;
    color: #6c757d;
    line-height: 1.4;
    text-align: center;
}

.upgrade-modal-cta {
    background-color: #12121e !important;
    border-color: #12121e !important;
    border-radius: 8px;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn.upgrade-modal-cta [class^="material-"] {
    line-height: 100%;
    font-size: 16px;
    margin-top: -3px;
}

.upgrade-modal-cta:hover {
    background-color: #1e1e35 !important;
    border-color: #1e1e35 !important;
}
.navbar.fixed-top {
    /* z-index: 99999; */
}

@media (max-width: 992px) {
    .upgrade-overlay {
        left: 0;
        width: 100%;
    }
}

/* Dark mode — upgrade overlay modal */
body.mode-dark .upgrade-overlay-card {
    background: var(--card-bg);
    color: var(--var-text-light-color);
}

body.mode-dark .upgrade-overlay-card .text-muted {
    color: rgba(255, 255, 255, 0.5) !important;
}

body.mode-dark .upgrade-modal-feature-label {
    color: rgba(255, 255, 255, 0.5);
}

body.mode-dark .upgrade-modal-divider {
    border-top-color: rgba(255, 255, 255, 0.1);
}

body.mode-dark .upgrade-modal-feature-sep {
    background: rgba(255, 255, 255, 0.1);
}

body.mode-dark .upgrade-modal-cta,
body.mode-dark .upgrade-modal-cta:hover {
    background-color: #635bff !important;
    border-color: #635bff !important;
    color: #fff !important;
}

body.mode-dark .upgrade-modal-cta:hover {
    background-color: #7b74ff !important;
    border-color: #7b74ff !important;
}

.server-avatar-sendonyx-api {
    background: url(../../images/icons/sndx-smtp.png) top left / 36px 36px
        no-repeat transparent;
}

/* ============================================================
   Audience Analytics Overview
   ============================================================ */
.analytics-daterange-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--bs-border-color) !important;
    background: var(--card-bg) !important;
    font-size: 14px;
}

.analytics-daterange-btn .material-symbols-rounded {
    font-size: 18px;
}

.analytics-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.analytics-export-btn .material-symbols-rounded {
    font-size: 18px;
}

/* KPI summary grid — each metric is its own card */
.audience-summery-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.audience-summery-grid .audience-kpi-card {
    display: flex;
    gap: 0.625rem;
    padding: 1rem;
    min-width: 0;
}

.audience-summery-grid .audience-kpi-card::after,
.audience-summery-grid .audience-kpi-card::before {
    display: none !important;
}

.audience-summery-grid .audience-kpi-card .content {
    min-width: 0;
    gap: 0.25rem;
}

.audience-summery-grid .audience-kpi-card .number {
    font-size: 1.375rem;
    line-height: 1.1;
}

.audience-summery-grid .audience-kpi-card .kpi-compare {
    font-size: 0.625rem;
    color: var(--var-color-gray-500, #6c757d);
}

.audience-summery-grid .growth-trend {
    font-size: 0.688rem;
    font-weight: 600;
}

.growth-trend.is-neutral {
    color: var(--var-color-gray-500, #6c757d);
}

/* Analytics rows: plain flexbox with a fixed 20px gap */
.analytics-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.analytics-row .analytics-col {
    display: flex;
    min-width: 0;
}

.analytics-row-3 > .analytics-col {
    width: calc((100% - 40px) / 3);
}

.analytics-row-5 > .analytics-col {
    width: calc((100% - 80px) / 5);
}

/* Analytics cards */
.analytics-card {
    display: flex;
    flex-direction: column;
}

.analytics-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.analytics-card-header .analytics-card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0;
}

.analytics-card-link {
    font-size: 0.813rem;
    text-decoration: underline;
}

.analytics-growth-select .form-group {
    margin-bottom: 0;
}

.analytics-growth-select
    .select2-container
    .select2-selection--single:not([class*="bg-"]):not([class*="border-"]) {
    height: 32px;
}

#audience-summary-grid.is-loading,
#deliverability-overview.is-loading,
#dashboard-deliverability.is-loading,
#top-campaigns.is-loading {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Deliverability overview */
.deliverability-rates {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.deliverability-rate-box {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    min-width: 0;
}

.deliverability-rate-box .rate-label {
    font-size: 0.688rem;
    color: var(--var-color-gray-500, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.deliverability-rate-box .rate-value {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;
}

.deliverability-rate-box .rate-trend {
    font-size: 0.625rem;
}

.deliverability-rate-box .rate-trend .material-symbols-rounded {
    font-size: 0.75rem;
}

.deliverability-isp-title {
    font-size: 0.813rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.deliverability-isp-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.isp-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.isp-row .isp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.isp-row .isp-icon svg {
    width: 18px;
    height: 18px;
}

body.mode-dark .isp-row .isp-icon svg path:not([fill]):not([style]) {
    fill: var(--var-text-light-color);
}

.isp-row .isp-name {
    width: 3.75rem;
    flex-shrink: 0;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.isp-row .isp-progress {
    flex-grow: 1;
    height: 0.5rem;
    background-color: var(--var-light-bg-color);
}

.isp-row .isp-percentage {
    width: 2.5rem;
    flex-shrink: 0;
    text-align: right;
    font-size: 0.75rem;
}

.isp-row .progress-bar,
.dd-rate-progress .progress-bar,
.analytics-progress .progress-bar {
    background-color: var(--var-secondary-bg-color) !important;
    border-radius: 100px;
}

/* Dashboard deliverability widget */
.dd-rates-grid {
    margin-bottom: 1.25rem;
}

/* Plain box: no card, no border, no shadow */
.dd-rate-box {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.dd-rate-box .rate-label {
    font-size: 0.75rem;
    color: var(--var-color-gray-500, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dd-rate-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.dd-rate-box .rate-value {
    font-size: 1.063rem;
    font-weight: 700;
    line-height: 1.2;
}

.dd-rate-box .rate-trend {
    font-size: 0.688rem;
}

.dd-rate-box .rate-trend .material-symbols-rounded {
    font-size: 0.813rem;
}

.dd-rate-progress {
    height: 0.5rem;
    background-color: var(--var-light-bg-color);
}

.dd-pill {
    align-self: flex-start;
    padding: 0.125rem 0.625rem;
    border-radius: 100px;
    font-size: 0.688rem;
    font-weight: 600;
    color: var(--var-color-green-500);
    background-color: rgba(25, 135, 84, 0.12);
}

.dd-blacklist-note {
    font-size: 0.688rem;
    color: var(--var-color-gray-500, #6c757d);
}

.dd-provider-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

/* Border only, no shadow */
.dd-provider-card {
    flex: 1 1 130px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
}

.dd-provider-card .dd-provider-name {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dd-provider-card .dd-provider-pct {
    font-size: 0.813rem;
    font-weight: 600;
}

/* Top campaigns table */
.top-campaigns-table {
    font-size: 0.813rem;
}

.top-campaigns-table th {
    font-size: 0.688rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--var-color-gray-500, #6c757d);
    border-bottom-width: 1px;
}

.top-campaigns-table td {
    vertical-align: middle;
}

.top-campaigns-table .campaign-name {
    max-width: 150px;
    font-weight: 500;
}

.top-campaigns-table .campaign-date {
    font-size: 0.688rem;
}

/* Chart cards: top links + geo lists */
.analytics-list {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.analytics-progress-row {
    min-width: 0;
}

.analytics-progress-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.analytics-progress-label {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.analytics-progress-value {
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.analytics-progress {
    height: 0.5rem;
    background-color: var(--var-light-bg-color);
}

/* Skeleton placeholders (Bootstrap .placeholder) — prevent AJAX layout shift */
.analytics-list {
    min-height: 200px;
}

#AudienceGrowthChart {
    min-height: 280px;
}

#OpensByHourHeatmap {
    min-height: 240px;
}

#DeviceDonut,
#BrowserDonut {
    min-height: 260px;
}

/* Shapes Bootstrap's .placeholder can't size on its own */
.skeleton-icon {
    width: 2.5rem;
    height: 2.5rem;
}

.skeleton-icon-sm {
    width: 18px;
    height: 18px;
}

.skeleton-bar {
    height: 0.5rem;
}

.skeleton-chart {
    height: 240px;
    border-radius: 8px;
}

.skeleton-chart.skeleton-chart-growth {
    height: 280px;
}

.skeleton-donut-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding-top: 0.5rem;
}

.skeleton-donut {
    width: 140px;
    height: 140px;
}

.skeleton-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 60%;
}

.skeleton-table {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding-top: 0.25rem;
}

.skeleton-table-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Daterangepicker theming */
.daterangepicker {
    font-family: inherit;
    border-color: var(--bs-border-color);
    background-color: var(--card-bg);
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--var-secondary-bg-color);
}

.daterangepicker td.in-range {
    background-color: var(--sidebar-hover-bg-color);
}

.daterangepicker .ranges li.active {
    background-color: var(--var-secondary-bg-color);
}

.daterangepicker .drp-buttons .btn.applyBtn {
    background-color: var(--var-secondary-bg-color);
    border-color: var(--var-secondary-bg-color);
}

body.mode-dark .daterangepicker {
    background-color: var(--card-bg);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--var-text-light-color);
}

body.mode-dark .daterangepicker .calendar-table {
    background-color: var(--card-bg);
    border-color: var(--card-bg);
}

body.mode-dark .daterangepicker td.available:hover,
body.mode-dark .daterangepicker th.available:hover {
    background-color: var(--body-bg);
}

body.mode-dark .daterangepicker td.in-range {
    background-color: var(--body-bg);
    color: var(--var-text-light-color);
}

body.mode-dark .daterangepicker td.off {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.3);
}

body.mode-dark .daterangepicker .ranges li:hover {
    background-color: var(--body-bg);
}

body.mode-dark .daterangepicker:after {
    border-bottom-color: var(--card-bg);
}

body.mode-dark .daterangepicker .drp-calendar.left,
body.mode-dark .daterangepicker .drp-buttons {
    border-color: rgba(255, 255, 255, 0.08);
}

body.mode-dark .analytics-daterange-btn {
    color: var(--var-text-light-color);
}

body.mode-dark .deliverability-rate-box {
    border-color: rgba(255, 255, 255, 0.08);
}

body.mode-dark .isp-row .isp-progress,
body.mode-dark .analytics-progress {
    background-color: rgba(255, 255, 255, 0.08);
}

body.mode-dark .dd-provider-card {
    border-color: rgba(255, 255, 255, 0.08);
}

body.mode-dark .dd-rate-progress {
    background-color: rgba(255, 255, 255, 0.08);
}

/* Responsive */
@media (max-width: 1399px) {
    .audience-summery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1199px) {
    .deliverability-rates {
        grid-template-columns: repeat(2, 1fr);
    }

    .analytics-row-5 > .analytics-col {
        width: calc((100% - 40px) / 3);
    }
}

@media (max-width: 991px) {
    .analytics-row-3 > .analytics-col {
        width: calc((100% - 20px) / 2);
    }
}

@media (max-width: 767px) {
    .audience-summery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .analytics-row-3 > .analytics-col,
    .analytics-row-5 > .analytics-col {
        width: 100%;
    }

    .audience-summery-grid .audience-kpi-card {
        padding: 0.75rem;
    }

    .audience-analytics-header > div:last-child {
        width: 100%;
    }

    .analytics-daterange-btn {
        flex-grow: 1;
        justify-content: center;
    }
}

/* ── Dashboard: Recent Broadcasts widget ─────────────────── */
.recent-campaigns-card {
    padding: 24px;
}

.recent-campaigns-card .recent-campaigns-header {
    margin-bottom: 8px;
}

.recent-campaigns-table-scroll {
    overflow-x: auto;
}

.recent-campaigns-table {
    min-width: 900px;
    margin-bottom: 0;
}

.recent-campaigns-table .bg-done {
    background-color: var(--var-color-green-100);
    border-color: var(--var-color-green-500);
    color: var(--var-color-green-500);
}

.recent-campaigns-table > thead > tr > th {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    border-top: 0;
    border-bottom: 1px solid var(--var-border);
    padding: 16px 10px;
    white-space: nowrap;
    background-color: var(--var-light-bg-color);
}

.recent-campaigns-table > thead > tr > th:first-child {
    border-top-left-radius: 8px;
}

.recent-campaigns-table > thead > tr > th:last-child {
    border-top-right-radius: 8px;
}

.recent-campaigns-table > tbody > tr > td {
    padding: 16px 10px;
    vertical-align: middle;
    border-bottom: 1px solid var(--var-border);
    background: transparent;
}

.recent-campaigns-table > tbody > tr:last-child > td {
    border-bottom: 0;
}

.recent-campaigns-table .campaign-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1px solid var(--var-border);
    color: var(--var-secondary-bg-color);
    padding: 8px;
}

.recent-campaigns-table .campaign-icon-box .material-symbols-rounded {
    font-size: 22px;
}

.recent-campaigns-table .campaign-name {
    color: var(--var-text-dark-color);
    text-decoration: none;
}

.recent-campaigns-table .campaign-name:hover {
    color: var(--var-secondary-bg-color);
    text-decoration: underline;
}

.recent-campaigns-table .campaign-schedule {
    font-size: 12px;
    white-space: nowrap;
}

.recent-campaigns-table .campaign-schedule .material-symbols-rounded {
    font-size: 14px;
    vertical-align: -2px;
}

.recent-campaigns-table .campaign-type-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 13px;
    background: var(--var-light-bg-color);
    color: var(--var-text-dark-color);
}

.recent-campaigns-table .campaign-rate {
    max-width: 90px;
}

.recent-campaigns-table .campaign-rate-value {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
}

.recent-campaigns-table .campaign-rate .progress {
    height: 5px;
    border-radius: 999px;
    background: var(--var-light-bg-color);
}

.recent-campaigns-table .campaign-rate .progress-bar {
    border-radius: 999px;
    background: var(--var-secondary-bg-color) !important;
}

.recent-campaigns-table .campaign-rate .progress-bar.bg-open-rate {
    background: #00c950 !important;
}

.recent-campaigns-table .campaign-rate .progress-bar.bg-click-rate {
    background: #2c546b !important;
}

.bg-open-rate .recent-campaigns-table .campaign-sent-date {
    white-space: nowrap;
}

.recent-campaigns-table .campaign-row-menu {
    border: 0;
    background: transparent;
    padding: 4px;
    line-height: 1;
    color: #64748b;
}

.recent-campaigns-table .campaign-row-menu:hover {
    color: var(--var-text-dark-color);
}

.recent-campaigns-table .campaign-row-menu::after {
    display: none;
}

.recent-campaigns-pagination {
    padding-top: 16px;
}

body.mode-dark .recent-campaigns-card.border {
    border-color: rgba(255, 255, 255, 0) !important;
}

body.mode-dark .recent-campaigns-table > thead > tr > th,
body.mode-dark .recent-campaigns-table > tbody > tr > td {
    border-color: rgba(255, 255, 255, 0.08);
}

body.mode-dark .recent-campaigns-table .campaign-icon-box {
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--var-text-dark-color);
}

body.mode-dark .recent-campaigns-table .campaign-type-badge,
body.mode-dark .recent-campaigns-table .campaign-rate .progress {
    background: rgba(255, 255, 255, 0.08);
}

body.mode-dark .recent-campaigns-table .campaign-rate .progress-bar {
    background: var(--var-text-dark-color);
}

@media (max-width: 767px) {
    .recent-campaigns-card {
        padding: 16px;
    }

    .recent-campaigns-pagination .d-flex {
        flex-wrap: wrap;
        row-gap: 12px;
    }
}

/* Overrides*/

.theme-blue .dashboard-stats-grid .progress-bar.progress-sent,
.theme-blue .dashboard-stats-grid .progress-bar.progress-clicked {
    background-color: var(--var-color-primary) !important;
}

.theme-blue .dashboard-stats-grid .progress-bar.progress-opened {
    background-color: #00c950 !important;
}

.theme-blue .dashboard-stats-grid .progress-bar.progress-unsubscribed {
    background-color: var(--var-color-yellow-500) !important;
}

.theme-blue .dashboard-stats-grid .progress-bar.progress-bounced {
    background-color: #880015 !important;
}

/* ── Donut charts: HTML center overlay (wraps long labels) ── */
.donut-center-wrap {
    position: relative;
}

.donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    /* Keep the text inside the donut hole (~72% of a 170px chart) */
    padding: 0 34px;
    text-align: center;
    pointer-events: none;
    z-index: 1;
}

.donut-center-label {
    font-size: 12px;
    line-height: 1.25;
    color: #64748b;
    overflow-wrap: anywhere;
}

.donut-center-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--var-text-dark-color);
}

body.mode-dark .donut-center-label {
    color: rgba(255, 255, 255, 0.7);
}

/* ── Sending domain stats ────────────────────────────────── */
:root {
    --var-color-purple-50: oklch(97.7% 0.014 308.299);
    --var-color-purple-500: oklch(62.7% 0.265 303.9);
}

.sd-stats-card,
.sd-docs-card {
    background: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: 1.5rem;
}

.sd-stats-card {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

/* Three-stat variant (websites) */
.sd-stats-card-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Two-stat variant (email templates): spread across the full card width */
.sd-stats-card-2 {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

/* No divider needed once the stats sit at opposite ends */
.sd-stats-card-2 .sd-stat,
.sd-stats-card-2 .sd-stat + .sd-stat {
    padding-left: 0;
    border-left: 0;
}

.sd-stat {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding-left: 1rem;
}

.sd-stat:first-child {
    padding-left: 0;
}

.sd-stat + .sd-stat {
    border-left: 1px solid var(--bs-border-color);
}

.sd-stat-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.sd-stat-icon svg {
    width: 22px;
    height: 22px;
}

.sd-stat-icon-purple {
    background: var(--var-color-purple-50);
}
.sd-stat-icon-purple svg {
    fill: var(--var-color-purple-500);
}

.sd-stat-icon-green {
    background: var(--var-color-green-50);
}
.sd-stat-icon-green svg {
    fill: var(--var-color-green-500);
}

.sd-stat-icon-yellow {
    background: var(--var-color-yellow-50);
}
.sd-stat-icon-yellow svg {
    fill: var(--var-color-yellow-500);
}

.sd-stat-icon-blue {
    background: var(--var-color-blue-50);
}
.sd-stat-icon-blue svg {
    fill: var(--var-color-blue-500);
}

.sd-stat-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sd-stat-title {
    font-size: 14px;
    color: var(--var-text-dark-color);
}

.sd-stat-number {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--var-text-dark-color);
}

.sd-stat-text {
    font-size: 12px;
    color: #64748b;
}

/* Docs / need-help card */
.sd-docs-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
}

.sd-docs-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sd-docs-icon svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: var(--var-color-purple-500);
}

.sd-docs-title {
    font-weight: 600;
    color: var(--var-text-dark-color);
}

.sd-docs-text {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 0;
}

.sd-docs-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 14px;
    font-weight: 500;
}

.sd-docs-link .material-symbols-rounded {
    font-size: 16px;
}

/* Responsive: 2x2 stats below xl, single column on small screens */
@media (max-width: 991px) {
    .sd-stats-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 1.5rem;
    }

    .sd-stat {
        padding-left: 1rem;
    }

    .sd-stat:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 575px) {
    .sd-stats-card {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The two-stat variant is flex, so stack it explicitly */
    .sd-stats-card-2 {
        flex-direction: column;
        gap: 1.5rem;
    }

    .sd-stat,
    .sd-stat + .sd-stat {
        padding-left: 0;
        border-left: 0;
    }
}

/* Dark mode */
body.mode-dark .sd-stats-card,
body.mode-dark .sd-docs-card {
    border-color: rgba(255, 255, 255, 0);
}

body.mode-dark .sd-stat-text,
body.mode-dark .sd-docs-text {
    color: rgba(255, 255, 255, 0.6);
}

body.mode-dark .sd-stat-icon-purple {
    background: rgba(173, 70, 255, 0.15);
}

body.mode-dark .sd-stat-icon-green {
    background: rgba(64, 193, 123, 0.15);
}

body.mode-dark .sd-stat-icon-yellow {
    background: rgba(243, 147, 41, 0.15);
}

body.mode-dark .sd-stat-icon-blue {
    background: rgba(79, 172, 254, 0.15);
}

/*Subscriber profile (list > subscribers > edit)*/
.min-w-0 {
    min-width: 0;
}

.subscriber-profile-avatar img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* Stand-in for a missing avatar: the subscriber's initials */
.subscriber-profile-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--var-color-green-100);
    color: var(--var-color-green-600);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    user-select: none;
}

body.mode-dark .subscriber-profile-initials {
    background: rgba(52, 199, 123, 0.18);
    color: #6ee7a8;
}

.subscriber-profile-name {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    word-break: break-word;
}

.subscriber-profile-meta {
    font-size: 14px;
}

.subscriber-profile-meta .btn-tag {
    padding: 2px 8px;
    font-size: 13px;
    line-height: 1.5;
}

.subscriber-profile-meta .btn-tag .material-symbols-rounded {
    font-size: 14px;
}

.subscriber-profile-meta .remove-contact-tag,
.subscriber-profile-meta .profile-tag-contact {
    text-decoration: none;
}

/* Profile Photo card: avatar, divider, then the guidance and upload button */
.profile-image .preview {
    margin-bottom: 0;
}

.profile-image-info {
    font-size: 14px;
}

@media (min-width: 768px) {
    .profile-image-info {
        padding-left: 1.5rem;
        border-left: 1px solid var(--bs-border-color);
    }
}

/* Empty state: initials replace the placeholder photo, and there is nothing
   to remove or hover-edit yet. The preview keeps the width it has with a
   photo so the divider does not jump when one is picked. */
.profile-image-initials {
    display: none;
}

.profile-image.is-empty .pre-upload-photo,
.profile-image.is-empty .edit-photo,
.profile-image.is-empty .remove-profile-image {
    display: none;
}

.profile-image.is-empty .preview {
    width: 110px;
}

.profile-image.is-empty .profile-image-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--var-light-bg-color);
    color: var(--bs-body-color);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
}

body.mode-dark .profile-image.is-empty .profile-image-initials {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
}

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

.engagement-overview-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.engagement-overview-list li:first-child {
    padding-top: 0;
}

.engagement-overview-list li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.engagement-overview-label {
    font-size: 14px;
}

.engagement-overview-value {
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.engagement-overview-value .text-muted {
    font-weight: 400;
}

body.mode-dark .engagement-overview-list li {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/*Subscriber activity timeline table*/
/* v2/v3 tbody is a flex column, which blockifies each row into its own
   anonymous table. The thead has to be flexed the same way, otherwise its
   columns are laid out independently and drift out of alignment. */
.pml-table.v3.timeline-table thead {
    display: flex;
    flex-direction: column;
}

.pml-table.v3.timeline-table thead tr {
    background: var(--var-light-bg-color);
    border: 1px solid var(--bs-border-color);
    border-bottom: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 0 1rem;
}

.pml-table.v3.timeline-table thead tr th {
    border: 0 !important;
    padding: 10px 8px !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* The shared v2/v3 tbody pads the top to clear the list controls above it.
   This table has a thead sitting right there, so the padding has to go. */
.pml-table.v3.timeline-table tbody {
    padding-top: 0;
}

.pml-table.v3.timeline-table tbody tr:first-child {
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

/* Scoped to the subscriber activity list only. The row padding moves onto the
   cells so the rail column reaches the row's top and bottom edges and joins up
   with the next row's rail. The edge cells carry the row's old 1rem gutter on
   top of the cell's own 8px, keeping the columns lined up with the thead. */
#TimelineListContent .pml-table.v3 tbody tr {
    padding: 0 !important;
}

#TimelineListContent .pml-table.v3 tbody tr td {
    padding: 1.125rem 8px !important;
}

#TimelineListContent .pml-table.v3 tbody tr td:first-child {
    padding-left: calc(1rem + 8px) !important;
}

#TimelineListContent .pml-table.v3 tbody tr td:last-child {
    padding-right: calc(1rem + 8px) !important;
}

/* No vertical padding on the rail cell: the rail runs the full row height and
   the dot stays on the same centre line as the icon and activity text. */
#TimelineListContent .pml-table.v3 tbody tr td.timeline-rail-col {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.mode-dark .pml-table.v3.timeline-table thead tr {
    background: var(--card-bg);
    border-color: rgba(255, 255, 255, 0);
    color: rgba(255, 255, 255, 0.6);
}

body.mode-dark .pml-table.v3.timeline-table thead tr th {
    color: rgba(255, 255, 255, 0.6);
}

.timeline-table .timeline-time-col {
    width: 130px;
    white-space: nowrap;
}

.timeline-table .timeline-date {
    font-weight: 600;
}

.timeline-table .timeline-time {
    font-size: 13px;
}

.timeline-table .timeline-rail-col {
    width: 24px;
    position: relative;
}

.timeline-table tbody .timeline-rail-col::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    transform: translateX(-50%);
    background: var(--bs-border-color);
}

.timeline-table tbody tr:first-child .timeline-rail-col::before {
    top: 50%;
}

.timeline-table tbody tr:last-child .timeline-rail-col::before {
    bottom: 50%;
}

.timeline-table .timeline-rail-dot {
    position: relative;
    display: block;
    width: 7px;
    height: 7px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--bs-border-color);
}

.timeline-table .timeline-icon-col {
    width: 56px;
}

.timeline-table .timeline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.timeline-table .timeline-icon .material-symbols-rounded {
    font-size: 20px;
}

.timeline-table .timeline-activity {
    font-weight: 600;
}

.timeline-table .timeline-activity-link {
    display: inline-block;
    margin-top: 2px;
    text-decoration: underline;
}

.timeline-table .timeline-activity-type {
    display: inline-block;
    margin-top: 2px;
    font-size: 13px;
}

.timeline-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

.timeline-icon-green {
    background: #e6f4ec;
    color: #1f7a4d;
}
.timeline-badge-green {
    background: #e6f4ec;
    color: #1f7a4d;
}

.timeline-icon-blue {
    background: #e7eff5;
    color: #2c546b;
}
.timeline-badge-blue {
    background: #e7eff5;
    color: #2c546b;
}

.timeline-icon-orange {
    background: #fdeee1;
    color: #a95f26;
}
.timeline-badge-orange {
    background: #fdeee1;
    color: #a95f26;
}

.timeline-icon-purple {
    background: #eeeaf9;
    color: #5b45a8;
}
.timeline-badge-purple {
    background: #eeeaf9;
    color: #5b45a8;
}

.timeline-icon-yellow {
    background: #fdf3dc;
    color: #8a6414;
}
.timeline-badge-yellow {
    background: #fdf3dc;
    color: #8a6414;
}

.timeline-icon-red {
    background: #fae8e6;
    color: #a33327;
}
.timeline-badge-red {
    background: #fae8e6;
    color: #a33327;
}

.timeline-icon-grey {
    background: var(--var-light-bg-color);
    color: var(--bs-secondary-color);
}
.timeline-badge-grey {
    background: var(--var-light-bg-color);
    color: var(--bs-secondary-color);
}

body.mode-dark .timeline-icon-green,
body.mode-dark .timeline-badge-green {
    background: rgba(64, 193, 123, 0.15);
    color: #6fd7a1;
}

body.mode-dark .timeline-icon-blue,
body.mode-dark .timeline-badge-blue {
    background: rgba(79, 172, 254, 0.15);
    color: #8fcbfd;
}

body.mode-dark .timeline-icon-orange,
body.mode-dark .timeline-badge-orange {
    background: rgba(243, 147, 41, 0.15);
    color: #f2b46e;
}

body.mode-dark .timeline-icon-purple,
body.mode-dark .timeline-badge-purple {
    background: rgba(173, 70, 255, 0.15);
    color: #c79bf5;
}

body.mode-dark .timeline-icon-yellow,
body.mode-dark .timeline-badge-yellow {
    background: rgba(255, 193, 71, 0.15);
    color: #f0cd7e;
}

body.mode-dark .timeline-icon-red,
body.mode-dark .timeline-badge-red {
    background: rgba(196, 0, 26, 0.15);
    color: #ef8b83;
}

body.mode-dark .timeline-icon-grey,
body.mode-dark .timeline-badge-grey {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

body.mode-dark .timeline-table tbody .timeline-rail-col::before,
body.mode-dark .timeline-table .timeline-rail-dot {
    background: rgba(255, 255, 255, 0.15);
}

/* ── Page title: icon + heading block ────────────────────── */
/* Generic so any page can adopt the icon-square header, not just tracking domains. */
.page-title-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-title-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #eef0ff;
    color: #5b45a8;
}

.page-title-icon svg,
.page-title-icon .material-symbols-rounded {
    width: 28px;
    height: 28px;
    font-size: 28px;
}

.page-title-subtitle {
    margin-top: 4px;
    max-width: 720px;
    color: var(--bs-secondary-color);
}

/* Secondary heading in the icon block, for pages whose h1 is the section name and whose
   subject (a domain, an address) sits underneath it. */
.page-title-name {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
}

/* Status-tinted variants, for detail pages whose heading reflects a verified/pending state */
.page-title-icon-success {
    background: var(--var-color-green-50);
    color: var(--var-color-green-600);
}

.page-title-icon-warning {
    background: var(--var-color-yellow-50);
    color: var(--var-color-yellow-600);
}

body.mode-dark .page-title-icon {
    background: rgba(91, 69, 168, 0.25);
    color: #b9a9ec;
}

body.mode-dark .page-title-icon-success {
    background: rgba(34, 139, 76, 0.22);
    color: #86e0a6;
}

body.mode-dark .page-title-icon-warning {
    background: rgba(180, 130, 20, 0.22);
    color: #e8c07a;
}

@media (max-width: 767px) {
    .page-title-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .page-title-icon svg,
    .page-title-icon .material-symbols-rounded {
        width: 22px;
        height: 22px;
        font-size: 22px;
    }
}

/* ── Input with a leading icon ───────────────────────────── */
/* Wrap an .form-control in .field-icon-input and place the icon in
   .field-icon-input-symbol as the first child. */
.field-icon-input {
    position: relative;
}

.field-icon-input .field-icon-input-symbol {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.field-icon-input .field-icon-input-symbol svg,
.field-icon-input .field-icon-input-symbol .material-symbols-rounded {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.field-icon-input .form-control {
    padding-left: 42px;
}

/* ── Tracking domains ────────────────────────────────────── */
.td-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--var-color-blue-50);
    color: var(--var-color-blue-600);
}

.td-card-icon svg,
.td-card-icon .material-symbols-rounded {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.td-card-icon-success {
    background: var(--var-color-green-50);
    color: var(--var-color-green-600);
}

.td-card-icon-warning {
    background: var(--var-color-yellow-50);
    color: var(--var-color-yellow-600);
}

.td-form-header {
    align-items: flex-start;
    gap: 12px;
}

.td-card-subtitle {
    margin-top: 2px;
    font-size: 14px;
    color: var(--bs-secondary-color);
}

.td-section-title {
    margin-top: 24px;
}

/* "Why use a custom tracking domain?" panel on the create form */
.td-why-box {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    margin-top: 8px;
    border-radius: 12px;
    background: var(--var-color-blue-50);
}

.td-why-icon {
    flex-shrink: 0;
    font-size: 22px;
    color: var(--var-color-blue-500);
}

.td-why-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.td-why-intro {
    margin-bottom: 8px;
}

body.mode-dark .td-why-box {
    background: rgba(44, 84, 107, 0.35);
}

/* Green-check bullet lists (create form + "What happens next?") */
.td-check-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.td-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 3px 0;
}

.td-check-list li .material-symbols-rounded {
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1.5;
    color: var(--var-color-green-600);
}

/* DNS record card */
.td-record-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--var-border);
}

.td-record-row:first-child {
    padding-top: 0;
}

.td-record-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.td-record-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--var-light-bg-color);
    color: var(--var-color-primary);
}

.td-record-icon svg {
    width: 20px;
    height: 20px;
}

.td-record-label {
    flex-shrink: 0;
    width: 150px;
    font-weight: 600;
}

.td-record-value {
    flex: 1 1 auto;
    min-width: 0;
}

.td-copy-btn {
    flex-shrink: 0;
    padding: 4px 8px;
    line-height: 1;
    color: var(--bs-secondary-color);
}

.td-copy-btn:hover {
    color: var(--var-color-primary);
}

.td-copy-btn .material-symbols-rounded {
    font-size: 18px;
}

/* Screenshot shows Pending in amber; app.css ships it pink, so override inside this card only */
.td-record-card .label.bg-pending,
.sd-verify-card .label.bg-pending {
    background-color: #fdf3dc !important;
    border-color: #fdf3dc !important;
    color: #8a6414 !important;
}

body.mode-dark .td-record-icon {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
}

body.mode-dark .td-record-row {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.mode-dark .td-record-card .label.bg-pending,
body.mode-dark .sd-verify-card .label.bg-pending {
    background-color: rgba(253, 243, 220, 0.15) !important;
    border-color: rgba(253, 243, 220, 0.15) !important;
    color: #e3c37a !important;
}

@media (max-width: 575px) {
    .td-record-row {
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .td-record-label {
        width: auto;
    }

    .td-record-value {
        flex-basis: 100%;
        padding-left: 56px;
    }

    .td-copy-btn {
        margin-left: auto;
    }
}

/* Leading icon inside the pending/verified alert banners */
.td-alert-icon {
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1.4;
}

/* Sidebar help cards */
.td-help-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.td-help-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0;
}

.td-help-card > .td-card-icon {
    margin-bottom: 12px;
}

.td-help-card > .td-help-title {
    margin-bottom: 8px;
}

.td-help-text {
    font-size: 14px;
    color: var(--bs-secondary-color);
    margin-bottom: 16px;
}

.td-help-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.td-help-btn .material-symbols-rounded {
    font-size: 16px;
}

/* Inline SVG standing in for a material symbol inside a button */
.btn-svg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.btn-svg-icon svg {
    width: 100%;
    height: 100%;
}

/* ── Listing table header (v3) ───────────────────────────── */
/* v3 tbody is a flex column, which blockifies every row into its own anonymous
   table, so the head has to be flexed the same way and the columns given explicit
   widths on both sides - otherwise each row lays its columns out on its own.
   Guarded on `> thead`: `has-header` is also used by older tables that fake a
   header with the first row of the tbody. */
.pml-table.v3.has-header thead {
    display: flex;
    flex-direction: column;
}

.pml-table.v3.has-header thead tr {
    background: var(--var-light-bg-color);
    border: 1px solid var(--bs-border-color);
    border-bottom: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 0 1rem;
}

.pml-table.v3.has-header thead tr th {
    border: 0 !important;
    padding: 12px 8px !important;
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

/* The shared v3 tbody pads the top to clear the list controls above it. With a
   head sitting right there that padding has to go, and the top corners move up. */
.pml-table.v3.has-header:has(> thead) tbody {
    padding-top: 0;
}

.pml-table.v3.has-header:has(> thead) tbody tr:first-child {
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

body.mode-dark .pml-table.v3.has-header thead tr {
    background: var(--card-bg);
    border-color: rgba(255, 255, 255, 0);
}

body.mode-dark .pml-table.v3.has-header thead tr th {
    color: rgba(255, 255, 255, 0.6);
}

/* No room for six columns on a phone: the rows fall back to the stacked layout
   the other listings use, where each cell carries its own label. */
@media (max-width: 991px) {
    .pml-table.v3.has-header thead {
        display: none;
    }

    .pml-table.v3.has-header:has(> thead) tbody {
        padding-top: 1.75rem;
    }

    .pml-table.v3.has-header:has(> thead) tbody tr:first-child {
        border-top-right-radius: 8px !important;
        border-top-left-radius: 8px !important;
    }

    .pml-table.v3.has-header .second-line-mobile {
        display: block;
        font-size: 12px;
    }
}

/* ── Sender (email address) list ─────────────────────────── */
.sender-table .sender-col-check {
    width: 44px;
}

.sender-table .sender-col-name {
    width: 26%;
}

.sender-table .sender-col-email {
    width: 22%;
}

.sender-table .sender-col-verified {
    width: 14%;
}

.sender-table .sender-col-created {
    width: 14%;
}

.sender-table .sender-col-action {
    width: 20%;
}

.sender-avatar-sm {
    width: 36px;
    height: 36px;
    font-size: 13px;
}

/* One tone per address, picked from the email so a row keeps its colour. */
.sender-avatar-tone-1 {
    background: var(--var-color-purple-50);
    color: var(--var-color-purple-500);
}

.sender-avatar-tone-2 {
    background: var(--var-color-blue-50);
    color: var(--var-color-blue-500);
}

.sender-avatar-tone-3 {
    background: var(--var-color-green-50);
    color: var(--var-color-green-600);
}

.sender-avatar-tone-4 {
    background: var(--var-color-yellow-50);
    color: var(--var-color-yellow-600);
}

.sender-avatar-tone-5 {
    background: var(--var-color-red-50);
    color: var(--var-color-red-500);
}

/* ── Sender (email address) detail ───────────────────────── */
/* Reuses the record card + help sidebar above; only the identity header is specific. */
.sender-identity {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.sender-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--var-light-bg-color);
    color: var(--var-color-primary);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.sender-name {
    font-size: 20px;
    font-weight: 600;
}

.sender-email {
    margin-top: 2px;
    color: var(--bs-secondary-color);
}

.sender-intro {
    margin-bottom: 20px;
    color: var(--bs-secondary-color);
}

.sender-record-meta {
    margin-left: 8px;
    font-size: 13px;
    color: var(--bs-secondary-color);
}

.sender-card-actions {
    padding-top: 16px;
}

body.mode-dark .sender-avatar {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 575px) {
    .sender-record-meta {
        display: block;
        margin-left: 0;
    }
}

/* ── Sending domain detail ───────────────────────────────── */
/* Reuses the help sidebar above; the DNS record table is the only page-specific piece. */
.sd-verify-card .td-help-header {
    margin-bottom: 16px;
}

.sd-verify-card .td-help-title {
    font-size: 20px;
}

.sd-records {
    margin-top: 24px;
}

.sd-records-table {
    margin-bottom: 0;
    font-size: 13px;
}

.sd-records-table > thead > tr > th {
    padding: 10px 12px;
    border-bottom: 1px solid var(--var-border);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--bs-secondary-color);
}

.sd-records-table > tbody > tr > td {
    padding: 16px 12px;
    border-bottom: 1px solid var(--var-border);
    vertical-align: middle;
}

.sd-records-table > tbody > tr:last-child > td {
    border-bottom: 0;
}

.sd-records-table > thead > tr > th:first-child,
.sd-records-table > tbody > tr > td:first-child {
    padding-left: 0;
}

.sd-records-table > thead > tr > th:last-child,
.sd-records-table > tbody > tr > td:last-child {
    padding-right: 0;
}

.sd-records-type {
    white-space: nowrap;
    font-weight: 600;
}

.sd-records-host {
    font-weight: 600;
}

/* DKIM keys are one long unbroken token - let them wrap anywhere rather than blow out the table */
.sd-records-value {
    display: inline-block;
    max-width: 460px;
    word-break: break-all;
}

.sd-records-example {
    display: block;
    margin-top: 4px;
    font-weight: 600;
}

/* Requirement badge: neutral for "Required", blue for the optional-but-advised records */
.sd-req {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--var-light-bg-color);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--bs-secondary-color);
}

.sd-req-recommended {
    background: var(--var-color-blue-50);
    color: var(--var-color-blue-600);
}

.sd-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.sd-status .material-symbols-rounded {
    font-size: 14px;
}

.sd-last-verified {
    font-size: 14px;
    color: var(--bs-secondary-color);
}

body.mode-dark .sd-records-table > thead > tr > th,
body.mode-dark .sd-records-table > tbody > tr > td {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.mode-dark .sd-req {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
}

body.mode-dark .sd-req-recommended {
    background: rgba(44, 84, 107, 0.45);
    color: #9ccbe4;
}

@media (max-width: 991px) {
    .sd-records-value {
        max-width: 320px;
    }
}

/* ── Popup form: create page ─────────────────────────────── */
.tpl-picker-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.tpl-picker-header .widget-title {
    font-size: 18px;
    font-weight: 600;
}

/* Toolbar: sort + search */
.tpl-toolbar {
    margin-bottom: 20px;
}

.tpl-toolbar .filter-box {
    flex-wrap: wrap;
    gap: 10px;
}

.tpl-toolbar .filter-group {
    display: inline-flex;
    align-items: center;
    margin-right: 0;
    padding: 0 4px 0 12px;
    height: 38px;
    border: 1px solid var(--var-border);
    border-radius: 8px;
    background: var(--bs-body-bg);
}

.tpl-toolbar .filter-group .title {
    margin-right: 6px;
    white-space: nowrap;
}

.tpl-toolbar .filter-box .select2-selection--single:not([class*="bg-"]) {
    background: transparent;
    border-color: transparent;
}

.tpl-toolbar .filter-box .btn.sort-direction {
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    margin-left: 4px;
    border-left: 1px solid var(--var-border);
    border-radius: 0;
    color: var(--bs-secondary-color);
}

.tpl-search {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.tpl-search .form-control.search {
    width: 220px;
    height: 38px;
    border-radius: 8px;
    padding-right: 38px;
}

.tpl-search > .material-symbols-rounded {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--bs-secondary-color);
    pointer-events: none;
}

/* Template grid */
.tpl-grid {
    row-gap: 8px;
}

.tpl-card.select-template-layout {
    display: block;
    border: 0;
    margin-bottom: 20px;
    text-decoration: none;
}

.tpl-card .tpl-card-thumb {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid var(--var-border);
    border-radius: 10px;
    background: var(--bs-body-bg);
    transition:
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
}

.tpl-card .tpl-card-thumb img {
    display: block;
    width: 100%;
    height: auto;
}

.tpl-card:hover .tpl-card-thumb {
    border-color: var(--var-color-blue-500);
}

.tpl-card.selected .tpl-card-thumb {
    border-color: var(--var-color-blue-600);
    box-shadow: 0 0 0 2px var(--var-color-blue-600);
}

.tpl-card .tpl-card-check {
    position: absolute;
    top: 8px;
    right: 8px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 16px;
    color: #fff;
    background: var(--var-color-blue-600);
    border-radius: 50%;
}

.tpl-card.selected .tpl-card-check {
    display: flex;
}

.tpl-card .tpl-card-name {
    display: block;
    margin-top: 10px;
    text-align: center;
    font-size: 14px;
    color: var(--var-color-blue-600);
}

/* the shared .select-template-layout rules add a hard border + ::before tick */
.tpl-card.select-template-layout.selected {
    border: 0;
}

.tpl-card.select-template-layout.selected:before {
    content: none;
}

@media (max-width: 575px) {
    .tpl-search .form-control.search {
        width: 100%;
    }

    .tpl-search {
        display: flex;
        width: 100%;
    }
}

/* ── Popup forms listing ─────────────────────────────────── */
/* Fixed-size template preview so rows keep a consistent height whatever the
   thumbnail's aspect ratio is. */
.form-thumb-v2 {
    width: 80px;
    height: 80px;
    display: block;
    object-fit: cover;
    object-position: top center;
    border-radius: 8px;
    border: 1px solid var(--bs-border-color);
    background: var(--card-bg);
}

.form-thumb-link {
    display: block;
    width: 80px;
    height: 80px;
}

/* Stand-in for a form whose template was deleted */
.form-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
}

.form-thumb-empty .material-symbols-rounded {
    font-size: 28px;
}

/* Keep long list/site names from stretching the row */
.form-cell-truncate {
    max-width: 200px;
}

body.mode-dark .form-thumb-v2 {
    border-color: rgba(255, 255, 255, 0.12);
}

/* ── Website detail ──────────────────────────────────────── */
/* Reuses the record card + help sidebar above; only the snippet box is specific. */
.ws-code-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--bs-border-color);
    background: var(--var-light-bg-color);
}

/* The snippet is one long line: let it scroll inside the box instead of wrapping
   mid-attribute or stretching the card. */
.ws-code-box pre {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow-x: auto;
}

.ws-code-box code {
    padding: 0;
    background: transparent;
    font-size: 13px;
    line-height: 1.7;
    color: var(--bs-body-color);
}

body.mode-dark .ws-code-box {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
}

/* ── Email template list view ────────────────────────────── */
/* Widths have to be declared on both thead and tbody - see the v3 header note
   above for why. */
.template-table .tpl-col-check {
    width: 44px;
}

.template-table .tpl-col-name {
    width: 45%;
}

.template-table .tpl-col-category {
    width: 15%;
}

.template-table .tpl-col-created {
    width: 15%;
}

.template-table .tpl-col-action {
    width: 25%;
}

/* Fixed frame around the preview: template thumbnails are tall and vary wildly
   in ratio, so the row height comes from the frame, not the image. */
.tpl-list-thumb-link {
    display: block;
    width: 64px;
    height: 80px;
}

.tpl-list-thumb {
    width: 64px;
    height: 80px;
    object-fit: cover;
    object-position: top center;
    border-radius: 8px;
    border: 1px solid var(--bs-border-color);
    background: var(--card-bg);
}

body.mode-dark .tpl-list-thumb {
    border-color: rgba(255, 255, 255, 0.12);
}

.template-table .tpl-category-names {
    display: block;
    word-break: break-word;
}