html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
}
.e-btn.e-transparent-btn,
.e-btn.e-transparent-btn:hover,
.e-btn.e-transparent-btn:focus,
.e-btn.e-transparent-btn:active {
    background-color: transparent !important;
    box-shadow: none !important;
}
    .e-btn.e-transparent-btn:hover {
        border-color: transparent !important; /* Removes the hover border */
        border: none !important; /* Ensures no outline border displays */
        color: inherit !important; /* Stops text from turning white; change 'inherit' to your desired hex color (e.g., #000) if needed */
    }
.nav-button {
    margin-top: 5px;
    margin-bottom: 5pc;
}
.e-accordion .e-acrdn-item.e-select {
    background-color: transparent !important;
    border: none;
}
 
a, .btn-link {
    color: #006bb7;
}
.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.content {
    padding-top: 1.1rem;
}
h1:focus {
    outline: none;
}
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}
.invalid {
    outline: 1px solid #e50000;
}
.validation-message {
    color: #e50000;
}
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
    .blazor-error-boundary::after {
        content: "An error has occurred."
    }
.darker-border-checkbox.form-check-input {
    border-color: #929292;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* all page grid content wrapper class */
.grid-scroll-wrapper {
    flex: 1;
    min-height: 0; /* critical - lets flex children shrink instead of overflowing */
    overflow: auto; /* scrolls only this area when content grows */
    display: flex;
    flex-direction: column;
}

    .grid-scroll-wrapper .e-grid {
        height: 100% !important;
    }


/* Common styles */
.pg-icon {
    min-width: 24px !important;
    height: 24px !important;
    display: inline-block !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* All manage page icon sizes */
.manage-page-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Common styles */
.pg-badge-icon {
    min-width: 16px !important;
    height: 16px !important;
    display: inline-block !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

.facebookImage {
    background-image: url('/img/facebook.png') !important;
}

.facebookMessengerImage {
    background-image: url('/img/facebook.png') !important;
}

.linkedinImage {
    background-image: url('/img/linkedin.png') !important;
}

.youtubeImage {
    background-image: url('/img/youtube.png') !important;
}

.twitterImage {
    background-image: url('/img/twitter.png') !important;
}

.pinterestImage {
    background-image: url('/img/pinterest.png') !important;
}

.whatsappImage {
    background-image: url('/img/whatsapp.png') !important;
}

.instagramImage {
    background-image: url('/img/instagram.png') !important;
}

.shareImage {
    background-image: url('/img/share.png') !important;
}

.telegramImage {
    background-image: url('/img/telegram.png') !important;
}

.mailImage {
    background-image: url('/img/mail.png') !important;
}

.demandgenerationImage {
    background-image: url('/img/demand-generation.png') !important;
}

.companyfollowersImage {
    background-image: url('/img/company-followers.png') !important;
}

.campaignImage {
    background-image: url('/img/campaign.png') !important;
}

.dashboardImage {
    background-image: url('/img/dashboard.png') !important;
}

.locationImage {
    background-image: url('/img/location.png') !important;
}

.countryImage {
    background-image: url('/img/country.png') !important;
}

.stateImage {
    background-image: url('/img/state.png') !important;
}

.cityImage {
    background-image: url('/img/city.png') !important;
}

.landingpageImage {
    background-image: url('/img/landingpage.png') !important;
}

.industriesImage {
    background-image: url('/img/industries.png') !important;
}

.jobtitleImage{
    background-image: url('/img/jobtitle.png') !important;
}

.senioritiesImage{
    background-image: url('/img/seniorities.png') !important;
}

.businessmodel {
    background-image: url('/img/businessmodel.png') !important;
}

.companysizeImage{
    background-image: url('/img/companysize.png') !important;
}

.companyImage {
    background-image: url('/img/company.png') !important;
}

.ASRproviderImage {
    background-image: url('/img/ASRprovider.png') !important;
}

.ASRprovidermodelsImage {
    background-image: url('/img/ASRprovidermodels.png') !important;
}

.LLMprovidermodelsImage {
    background-image: url('/img/LLMprovidermodels.png') !important;
}

.TTSproviderImage {
    background-image: url('/img/TTSprovider.png') !important;
}

.TTSprovidermodels {
    background-image: url('/img/TTSprovidermodels.png') !important;
}

.TTSvoiceImage {
    background-image: url('/img/TTSvoice.png') !important;
}

.voiceImage {
    background-image: url('/img/voice.png') !important;
}

.voiceagentcalloutstatusesImage {
    background-image: url('/img/voiceagentcalloutstatuses.png') !important;
}

.voiceagentlanguagesImage {
    background-image: url('/img/voiceagentlanguages.png') !important;
}

.configurationImage {
    background-image: url('/img/configuration.png') !important;
}

.packagesImage {
    background-image: url('/img/packages.png') !important;
}

.filemanagerImage {
    background-image: url('/img/filemanager.png') !important;
}

.connectorsImage {
    background-image: url('/img/connectors.png') !important;
}

.commsImage {
    background-image: url('/img/comms.png') !important;
}

.prompttemplatesImage {
    background-image: url('/img/prompttemplates.png') !important;
}

.workflowwebhooksImage {
    background-image: url('/img/workflowwebhooks.png') !important;
}

.usersImage {
    background-image: url('/img/users.png') !important;
}

.userImage {
    background-image: url('/img/user.png') !important;
}

.settingsImage {
    background-image: url('/img/settings.png') !important;
}

.contactsImage {
    background-image: url('/img/contacts.png') !important;
}
.offeringImage {
    background-image: url('/img/offering.png') !important;
}

.manageImage {
    background-image: url('/img/manage.png') !important;
}

.emailImage {
    background-image: url('/img/email.png') !important;
}

.passwordImage {
    background-image: url('/img/password.png') !important;
}

.two-factorauthenticationImage {
    background-image: url('/img/two-factorauthentication.png') !important;
}

.passkeysImage {
    background-image: url('/img/passkeys.png') !important;
}

.personaldataImage {
    background-image: url('/img/personaldata.png') !important;
}

.loginiconImage {
    background-image: url('/img/loginicon.png') !important;
}

.deleteImage {
    background-image: url('/img/delete.png') !important;
}

.connectorImage {
    background-image: url('/img/connector.png') !important;
}

.filemanagerImage {
    background-image: url('/img/file-folder.png') !important;
}

.user_outlineImage {
    background-image: url('/img/user_outline.png') !important;
}

.user_outlineWhiteImage {
    background-image: url('/img/user_outline_white.png') !important;
}

.building_outlineImage {
    background-image: url('/img/building_outline.png') !important;
}

.building_outlineWhiteImage {
    background-image: url('/img/building_outline_white.png') !important;
}

.document_outlineImage {
    background-image: url('/img/document_outline.png') !important;
}

.document_outlineWhiteImage {
    background-image: url('/img/document_outline_white.png') !important;
}

.identity_outlineImage {
    background-image: url('/img/identity_outline.png') !important;
}

.identity_outlineWhiteImage {
    background-image: url('/img/identity_outline_white.png') !important;
}

.contact_outlineImage {
    background-image: url('/img/contact_outline.png') !important;
}

.contact_outlineWhiteImage {
    background-image: url('/img/contact_outline_white.png') !important;
}

.location_outlineImage {
    background-image: url('/img/location_outline.png') !important;
}

.location_outlineWhiteImage {
    background-image: url('/img/location_outline_white.png') !important;
}

.social_outlineImage {
    background-image: url('/img/social_outline.png') !important;
}

.social_outlineWhiteImage {
    background-image: url('/img/social_outline_white.png') !important;
}

.style_outlineImage {
    background-image: url('/img/style_outline.png') !important;
}

.style_outlineWhiteImage {
    background-image: url('/img/style_outline_white.png') !important;
}

.review_outlineImage {
    background-image: url('/img/review_outline.png') !important;
}

.review_outlineWhiteImage {
    background-image: url('/img/review_outline_white.png') !important;
}

.icp_typeImage {
    background-image: url('/img/ICP_type.png') !important;
}

.text_typeImage {
    background-image: url('/img/Text_type.png') !important;
}

.image_typeImage {
    background-image: url('/img/Image_type.png') !important;
}

.video_typeImage {
    background-image: url('/img/Video_type.png') !important;
}

.whitepaper_typeImage {
    background-image: url('/img/Whitepaper_type.png') !important;
}

.physical_typeImage {
    background-image: url('/img/Physical_type.png') !important;
}

.landingPage_typeImage {
    background-image: url('/img/landingpage.png') !important;
}

.edm_typeImage {
    background-image: url('/img/email.png') !important;
}

.aIVoiceAgent_typeImage {
    background-image: url('/img/Ai_voice_color.png') !important;
}

.humanAgent_typeImage {
    background-image: url('/img/Human_voice_color.png') !important;
}

.text_type_icon_white {
    background-image: url('/img/Text_white.png') !important;
}

.image_type_icon_white {
    background-image: url('/img/Image_white.png') !important;
}

.video_type_icon_white {
    background-image: url('/img/Video_white.png') !important;
}

.whitepaper_type_icon_white {
    background-image: url('/img/Whitepaper_white.png') !important;
}

.physical_type_icon_white {
    background-image: url('/img/Physical_white.png') !important;
}

.AIVoiceAgent_type_icon_white {
    background-image: url('/img/Ai_voice_white.png') !important;
}

.HumanVoiceAgent_type_icon_white {
    background-image: url('/img/Human_voice_white.png') !important;
}

.landing_page_type_icon_white {
    background-image: url('/img/Landing_white.png') !important;
}

.edm_type_icon_white {
    background-image: url('/img/Edm_white.png') !important;
}

.edm_type_icon_black {
    background-image: url('/img/Edm_black.png') !important;
}

.password_black_icon_black {
    background-image: url('/img/Password_black.png') !important;
}

.passkey_black_icon_black {
    background-image: url('/img/Passkey_black.png') !important;
}

.delete_black_icon_black {
    background-image: url('/img/Delete_black.png') !important;
}

.authentication_black_icon_black {
    background-image: url('/img/Authentication_black.png') !important;
}

/* Sign-in pages (TwoPanelLayout): Login, two-factor setup, code and recovery-code steps */
.signin-side-panel {
    background-image: url('/img/Login.png');
    background-size: cover;
    background-repeat: no-repeat;
}

.signin-form-panel {
    align-content: center;
}

.signin-form-card {
    max-width: 508px;
}

/* ---- Notification centre (Layout/NotificationBell.razor, Controls/NotificationCard.razor, Pages/Notifications.razor) ---- */
.notif-wrap { position: relative; }
.notif-wrap > summary { list-style: none; }
.notif-wrap > summary::-webkit-details-marker { display: none; }
.notif-bell {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border: 1px solid #1b6ec2; border-radius: 4px; color: #1b6ec2;
    cursor: pointer; font-size: 16px; background: #fff;
}
.notif-bell:hover, .notif-wrap[open] > .notif-bell { background: #eaf2fb; }
.notif-bell:focus-visible { outline: 2px solid #258cfb; outline-offset: 2px; }
.notif-badge {
    position: absolute; top: -7px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: #d93025; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.notif-panel {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 1050; width: 380px; max-width: calc(100vw - 24px);
    background: #fff; border: 1px solid #dde3ea; border-radius: 8px; box-shadow: 0 10px 30px rgba(20, 40, 70, .16);
    display: flex; flex-direction: column; max-height: 70vh;
}
.notif-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #eef1f5; }
.notif-panel-title { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.notif-count { font-size: 12px; font-weight: 600; color: #1b6ec2; background: #eaf2fb; border-radius: 10px; padding: 1px 8px; }
.notif-panel-body { overflow-y: auto; padding: 6px 8px; }
.notif-panel-foot { border-top: 1px solid #eef1f5; padding: 10px 14px; font-size: 14px; }
.notif-link-button { border: 0; background: none; padding: 0; color: #006bb7; font-size: 13px; cursor: pointer; }
.notif-link-button:disabled { color: #9aa5b1; cursor: default; }
.notif-section { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7785; padding: 10px 6px 4px; }
.notif-form { display: inline; margin: 0; }
.notif-card { position: relative; display: flex; gap: 10px; padding: 10px 26px 10px 8px; border-radius: 6px; }
.notif-card + .notif-card { border-top: 1px solid #f0f2f5; }
.notif-card.is-unread { background: #f5f9fe; }
.notif-icon {
    flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; background: #eaf2fb; color: #1b6ec2;
}
.notif-icon-security { background: #fdecea; color: #b3261e; }
.notif-icon-announcements { background: #f1ecfb; color: #6a3fb5; }
.notif-icon-salesandsupport { background: #e8f5ee; color: #1e7b47; }
.notif-content { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.notif-line { display: flex; justify-content: space-between; gap: 8px; }
.notif-title { font-weight: 600; font-size: 14px; color: #1d2733; overflow-wrap: anywhere; }
.notif-age { font-size: 12px; color: #6b7785; white-space: nowrap; }
.notif-body { font-size: 13px; color: #44505c; overflow-wrap: anywhere; white-space: pre-line; }
.notif-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.notif-tag { font-size: 11px; color: #6b7785; border: 1px solid #dde3ea; border-radius: 10px; padding: 0 8px; }
.notif-action { border: 1px solid #c9d6e3; background: #fff; color: #1d2733; border-radius: 4px; font-size: 12px; padding: 2px 10px; cursor: pointer; }
.notif-action:hover { background: #f2f6fa; }
.notif-action.is-primary { background: #1b6ec2; border-color: #1861ac; color: #fff; }
.notif-action.is-primary:hover { background: #1861ac; }
.notif-unread { position: absolute; right: 10px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: #1b6ec2; }
.notif-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 28px 16px; }
.notif-empty.is-page { padding: 56px 16px; border: 1px dashed #dde3ea; border-radius: 8px; }
.notif-empty-icon { font-size: 26px; color: #9aa5b1; }
.notif-empty-title { font-weight: 600; }
.notif-empty-body { font-size: 13px; color: #6b7785; max-width: 360px; }
.notif-page { max-width: 900px; padding: 8px 0 24px; }
.notif-page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.notif-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.notif-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid #dde3ea; border-radius: 16px;
    font-size: 13px; color: #1d2733; text-decoration: none; background: #fff;
}
.notif-chip:hover { border-color: #1b6ec2; color: #1b6ec2; }
.notif-chip.is-active { background: #1b6ec2; border-color: #1b6ec2; color: #fff; }
.notif-chip-count { font-size: 11px; font-weight: 700; background: rgba(27, 110, 194, .12); border-radius: 8px; padding: 0 6px; }
.notif-chip.is-active .notif-chip-count { background: rgba(255, 255, 255, .25); }
.notif-list { background: #fff; border: 1px solid #dde3ea; border-radius: 8px; padding: 6px 10px; }

/* The top bar clips its content (overflow: hidden) - let the notification panel drop below it. */
div.main-container > header,
header .e-appbar.main-container-header { overflow: visible; }
@media (max-width: 576px) {
    .notif-panel { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; max-width: none; }
}

/* Narrow single-card pages (Account/Unsubscribe, Manage/Notifications) */
.account-narrow-card { max-width: 450px; }
.manage-narrow { max-width: 500px; }

/* ---- Admin → Broadcasts (Admin/Pages/Broadcasts.razor, BroadcastCompose.razor) ---- */
.bc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.bc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
@media (max-width: 992px) { .bc-grid { grid-template-columns: 1fr; } }
.bc-form { background: #fff; border: 1px solid #dde3ea; border-radius: 8px; padding: 20px; }
.bc-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.bc-section { font-size: 14px; font-weight: 700; margin: 20px 0 10px; padding-top: 14px; border-top: 1px solid #eef1f5; }
.bc-body textarea { min-height: 140px; }
.bc-when { max-width: 320px; }
.bc-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 12px; }
.bc-reach, .bc-preview { background: #fff; border: 1px solid #dde3ea; border-radius: 8px; padding: 16px; }
.bc-reach-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.bc-status { font-size: 12px; font-weight: 600; border-radius: 10px; padding: 1px 8px; background: #eef1f5; color: #44505c; }
.bc-status-scheduled { background: #eaf2fb; color: #1b6ec2; }
.bc-status-sending { background: #fff4e0; color: #8a5a00; }
.bc-status-sent { background: #e8f5ee; color: #1e7b47; }
.bc-status-cancelled { background: #fdecea; color: #b3261e; }