/* ==========================================================================
   AudienceView — GLOBAL site styles.
   ========================================================================== */

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

/* =================================================================
   DESIGN TOKENS
   ================================================================= */
:root {
    --blue: #1AACE8;
    --blue-dk: #0D8BBF;
    --blue-xdk: #0A6B96;
    --teal: #00BFA8;
    --yellow: #F5C518;
    --ink: #07111E;
    --ink2: #1C2E42;
    --muted: #526070;
    --ghost: #8FA0B0;
    --pale: #C8D6E0;
    --white: #FFFFFF;
    --surface: #F7F9FB;
    --surface2: #EEF3F7;
    --border: #DDE5ED;
    --border2: #C8D6E0;

    --nav-h: 62px;
    --footer-h: 56px;

    /* Legacy aliases preserved so existing admin/login pages keep their look. */
    --theme-color: #0096ed;
    --theme-color-2: #49c6ff;
    --body-color: #555555;
    --placeholder-color: #b0acac;
    --heading-color: #333333;
    --gray: #cccccc;
    --border-radius: 20px;
    --brand-tertiary: #686868;
}

/* =================================================================
   BASE
   ================================================================= */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    font-family: 'Plus Jakarta Sans', 'Proxima Nova', Arial, sans-serif;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

body {
    font-weight: 400;
    font-size: 14px;
}

.serif {
    font-family: 'Playfair Display', serif;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ghost);
}

/* =================================================================
   PAGE SHELL — used by every page via _Layout.cshtml
   Fixed header, fixed footer, scrollable middle.
   The shell is transparent so the global background layers
   (.av-bg-*) remain visible behind every page.
   ================================================================= */
.av-shell {
    width: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: transparent;
    position: relative;
    z-index: 1;
}

.av-shell-header {
    flex: 0 0 auto;
    z-index: 400;
}

.av-shell-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: transparent;
    -webkit-overflow-scrolling: touch;
}

.av-shell-footer {
    flex: 0 0 auto;
    z-index: 300;
}

/* =================================================================
   GLOBAL DECORATIVE BACKGROUND
   Soft brand mesh + dotted texture + drifting orbs rendered behind
   every page. Fixed to the viewport so they stay anchored while
   the .av-shell-main scroll area scrolls.
   ================================================================= */
.av-bg-mesh,
.av-bg-dots,
.av-bg-orb {
    position: fixed;
    pointer-events: none;
    z-index: 0;
}

.av-bg-mesh {
    inset: 0;
    background:
        radial-gradient(ellipse 800px 600px at 20% 50%, rgba(0, 191, 168, 0.07) 0%, transparent 70%),
        radial-gradient(ellipse 700px 700px at 80% 20%, rgba(26, 172, 232, 0.09) 0%, transparent 70%),
        radial-gradient(ellipse 500px 400px at 60% 90%, rgba(13, 139, 191, 0.05) 0%, transparent 70%);
}

.av-bg-dots {
    inset: 0;
    background-image: radial-gradient(circle, rgba(26, 172, 232, 0.13) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, black 20%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, black 20%, transparent 100%);
}

.av-bg-orb {
    border-radius: 50%;
    animation: avBgDrift 8s ease-in-out infinite;
}

.av-bg-orb-1 {
    width: 320px;
    height: 320px;
    top: -80px;
    right: 10%;
    background: radial-gradient(circle, rgba(26, 172, 232, 0.12), transparent 70%);
}

.av-bg-orb-2 {
    width: 240px;
    height: 240px;
    bottom: 10%;
    left: 5%;
    background: radial-gradient(circle, rgba(0, 191, 168, 0.1), transparent 70%);
    animation-delay: -3s;
}

@keyframes avBgDrift {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-20px) scale(1.05); }
}

/* =================================================================
   HEADER
   ================================================================= */
.mkt-header {
    height: var(--nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 44px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: saturate(160%) blur(8px);
    -webkit-backdrop-filter: saturate(160%) blur(8px);
    border-bottom: 1px solid var(--border);
}

.mkt-logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: inherit;
}

.mkt-logo-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(145deg, #00BFA8 0%, #1AACE8 60%, #0D8BBF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(26, 172, 232, 0.3);
    color: var(--white);
    flex-shrink: 0;
}

.mkt-logo-mark svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.mkt-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.mkt-logo-main {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.mkt-logo-sub {
    font-size: 10px;
    font-weight: 500;
    color: var(--ghost);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 2px;
}

/* =================================================================
   ACTION AREA (right side of header)
   Used by the MarketingActionsMenu view component.
   ================================================================= */
.mkt-actions-wrap {
    position: relative;
}

.mkt-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mkt-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    min-height: 40px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.18s;
    border: 1.5px solid transparent;
    white-space: nowrap;
    background: transparent;
    color: var(--muted);
}

.mkt-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 172, 232, 0.3);
}

.mkt-btn-ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--muted);
}

.mkt-btn-ghost:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.mkt-btn-outline {
    background: var(--white);
    border-color: var(--border);
    color: var(--muted);
}

.mkt-btn-outline:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.mkt-btn-primary {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
    box-shadow: 0 2px 10px rgba(26, 172, 232, 0.25);
}

.mkt-btn-primary:hover {
    background: var(--blue-dk);
    border-color: var(--blue-dk);
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(26, 172, 232, 0.35);
}

.mkt-btn-primary:active {
    transform: translateY(0);
}

.mkt-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.mkt-btn .btn-ic {
    width: 16px;
    height: 16px;
    font-size: 14px;
}

/* Hamburger toggle (mobile) */
.mkt-menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border: 1.5px solid var(--border);
    border-radius: 9px;
    background: var(--white);
    color: var(--muted);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: border-color 0.15s, color 0.15s;
}

.mkt-menu-toggle:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.mkt-menu-toggle svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    transition: transform 0.2s;
}

.mkt-menu-toggle.open svg {
    transform: rotate(90deg);
}

/* Logged-in nav variant (v3 mockup): account chip visible, marketing buttons
   hidden, hamburger always shown. Secondary links live in the dropdown. */
.mkt-account {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 100px;
    cursor: default;
    max-width: 340px;
    color: inherit;
}

.mkt-account-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 0 3px rgba(0, 191, 168, 0.18);
    flex-shrink: 0;
}

.mkt-account-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.mkt-account-id {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
    padding: 2px 8px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 100px;
    flex-shrink: 0;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Account-context chip (--plan): two lines, account on top and opportunity
   state beneath. Scoped to the modifier so the user chip on every other page
   is untouched. The name and number are plain text here; only the opportunity
   line is interactive, so the chip itself is not a link.
   --------------------------------------------------------------------------- */
.mkt-account--plan {
    padding: 6px 14px 6px 12px;
    border-radius: 14px;
    cursor: default;
    align-items: center;
}

.mkt-account--plan:hover {
    border-color: var(--border);
    background: var(--surface);
}

.mkt-account-col {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.mkt-account-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.mkt-account-opp,
.mkt-account-opp-add {
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    min-width: 0;
    overflow-wrap: anywhere;
}

.mkt-account-opp-lbl {
    color: var(--muted);
    margin-right: 4px;
}

.mkt-account-opp-link {
    color: var(--blue);
    text-decoration: underline;
}

/* An action, not navigation — a button styled as a link keeps it keyboard
   operable and announced correctly while matching the mockup. */
.mkt-account-opp-add {
    display: inline-block;
    padding: 0;
    border: none;
    background: none;
    color: var(--blue);
    text-decoration: underline;
    cursor: pointer;
}

.mkt-account-opp-add:hover,
.mkt-account-opp-link:hover {
    color: var(--ink);
}

.mkt-account-opp-add:focus-visible,
.mkt-account-opp-link:focus-visible {
    outline: none;
    border-radius: 4px;
    box-shadow: 0 0 0 3px rgba(26, 172, 232, 0.25);
}

.mkt-hidden {
    display: none !important;
}

body.logged-in .mkt-account {
    display: inline-flex;
}

body.logged-in .mkt-nav-marketing {
    display: none;
}

body.logged-in .mkt-menu-toggle {
    display: inline-flex;
}

.mkt-menu-dropdown {
    display: none;
    flex-direction: column;
    position: fixed;
    top: calc(var(--nav-h) + 6px);
    right: 16px;
    width: 240px;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(7, 17, 30, 0.15);
    z-index: 410;
    padding: 6px;
    overflow: hidden;
}

.mkt-menu-dropdown.open {
    display: flex;
    animation: mktDropIn 0.18s ease-out;
}

.mkt-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink2);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.mkt-menu-item:hover {
    background: var(--surface);
    color: var(--blue);
}

.mkt-menu-item i {
    color: var(--ghost);
    width: 16px;
    text-align: center;
}

.mkt-menu-item:hover i {
    color: var(--blue);
}

.mkt-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 4px;
}

.mkt-menu-cta {
    justify-content: center;
    margin: 0 4px 2px;
    width: calc(100% - 8px);
}

@keyframes mktDropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =================================================================
   FOOTER
   ================================================================= */
.mkt-footer {
    background: var(--white);
    border-top: 1px solid var(--border);
    padding: 14px 44px;
    min-height: var(--footer-h);
}

.mkt-footer-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.mkt-footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--muted);
}

.mkt-footer-brand .mkt-logo-mark {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    box-shadow: none;
}

.mkt-footer-brand .mkt-logo-mark svg {
    width: 16px;
    height: 16px;
}

.mkt-footer-links {
    display: flex;
    align-items: center;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.mkt-footer-links a {
    color: var(--muted);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 500;
}

.mkt-footer-links a:hover {
    color: var(--blue);
}

/* =================================================================
   MODAL PRIMITIVES (shared global infrastructure)
   ================================================================= */
.mkt-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(7, 17, 30, 0.55);
    z-index: 700;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.mkt-modal-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.mkt-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    z-index: 701;
    background: var(--white);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(7, 17, 30, 0.3), 0 6px 20px rgba(7, 17, 30, 0.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mkt-modal.open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.mkt-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--surface2);
    color: var(--ink2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    padding: 0;
    z-index: 2;
}

.mkt-modal-close:hover {
    background: var(--border2);
    color: var(--ink);
}

.mkt-modal-close svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    stroke-width: 2.2;
    fill: none;
}

/* =================================================================
   RESPONSIVE (header / footer)
   ================================================================= */
@media (max-width: 1199px) {
    .mkt-header { padding: 0 24px; }
    .mkt-btn-ghost {
        padding: 9px 12px;
        min-width: 40px;
        justify-content: center;
        gap: 0;
    }
    .mkt-btn-ghost .btn-txt { display: none; }
    .mkt-footer { padding: 12px 24px; }
}

@media (max-width: 899px) {
    body:not(.logged-in) .mkt-actions .mkt-nav-marketing {
        display: none;
    }

    body:not(.logged-in) .mkt-menu-toggle {
        display: inline-flex;
    }

    body.logged-in .mkt-account-id {
        display: none;
    }

    /* The account number is part of the account identity on plan pages, so it stays
       visible where the generic user-email pill is dropped. */
    body.logged-in .mkt-account--plan .mkt-account-id {
        display: inline-block;
    }

    .mkt-footer-inner { justify-content: center; text-align: center; }
}

@media (max-width: 599px) {
    :root { --nav-h: 56px; --footer-h: 48px; }
    .mkt-header { padding: 0 16px; }
    .mkt-logo-sub { display: none; }
    .mkt-footer { padding: 10px 16px; }
    .mkt-footer-links { gap: 12px; }

    .mkt-account--plan { max-width: min(60vw, 260px); padding: 5px 10px 5px 9px; }
    .mkt-account--plan .mkt-account-row { gap: 6px; }
    .mkt-account--plan .mkt-account-id { max-width: 92px; font-size: 11px; }
}

@media (max-width: 400px) {
    .mkt-account--plan { max-width: 56vw; }
    .mkt-account--plan .mkt-account-dot { display: none; }
}

/* Touch devices get a comfortable strike area on the opportunity affordance at any
   width, while a mouse-driven window keeps the tighter text sizing above.
   .mkt-header is a fixed height: var(--nav-h), so the bar has to grow with the
   target or the second chip line is clipped. The variable is raised on body, which
   is what .mkt-header inherits from. */
@media (pointer: coarse) {
    body.has-account-chip { --nav-h: 80px; }

    .mkt-account-opp-add,
    .mkt-account-opp-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =================================================================
   LEGACY HEADER (kept so any consumer of .av-header still renders)
   ================================================================= */
.av-header {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    align-items: center;
    padding: 0.25rem 1rem;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.av-header .logo { width: 21rem; }
.av-header .logo img { max-width: 100%; height: auto; }

.contact-wrapper { display: flex; align-items: center; gap: 0.75rem; }
.contact-wrapper .btn {
    background: var(--theme-color);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border: 0;
    border-radius: 8px;
    transition: all 0.3s;
}
.contact-wrapper .btn:hover { background: var(--theme-color-2); }

/* =================================================================
   LEGACY ADMIN / LOGIN STYLES (preserved for admin pages)
   ================================================================= */

/* Centering container for convert page */
.convert-page-center {
    min-height: 70vh;
    position: relative;
}

/* Footer Styles (legacy, kept for any view still using .bottom-section.footer) */
.bottom-section.footer {
    flex: 0 0 auto;
    background: #fff;
    border-top: 1px solid #ddd;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.footer-links a {
    color: #5b5b5b;
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--theme-color);
}

.footer-links-separator {
    color: #5b5b5b;
}

/* Utility Classes */
.flex-group {
    display: flex;
    align-items: center;
    column-gap: 0.75rem;
}

.btn-min-width {
    min-width: 120px;
}

/* Bootstrap card overrides used by Admin/ConvertToQuote */
.card {
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    padding: 1rem;
}

.card-body {
    padding: 1.5rem;
}

/* Convert To Quote card */
.convert-card {
    max-width: 500px;
    width: 100%;
    position: relative;
}

.convert-card .logo {
    height: 36px;
    width: 130px;
    background-image: url('https://cdn.audienceview.ai/web/assets/v1/img/logo/audience-view-logo-800x121.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0.25rem auto;
}

.convert-progress-overlay {
    position: absolute;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: inherit;
}

.convert-progress-overlay .progress { height: 1rem; width: 70%; margin: 0 auto; }
.convert-progress-overlay .progress-bar {
    background-color: var(--theme-color-2) !important;
}
.convert-progress-overlay .progress-card {
    background: transparent !important;
    border: 0;
    box-shadow: none;
}

.convert-card-header {
    background-color: var(--theme-color-2);
    padding: 1rem;
    color: #fff;
    border: 0;
}

.convert-card-footer {
    background-color: #fff;
    border-top: 0;
}

.convert-card,
.convert-card .form-label {
    color: var(--body-color);
}

.convert-card .title {
    text-align: center;
    margin-bottom: 4px;
}
.convert-card .underline {
    height: 2px;
    background-color: var(--theme-color);
    margin: 0.5rem 1rem;
}

.convert-card .form-control {
    width: 100%;
    color: var(--body-color);
    padding: 0.7rem;
    border-radius: 6px!important;
}
.convert-card p { color: var(--brand-tertiary); }
.convert-card .form-control::placeholder { color: var(--placeholder-color); opacity: 1; }
#btnConvertToQuote {
    padding: 0.65rem 2rem;
}
.convert-card .form-control::-webkit-input-placeholder {
    color: var(--placeholder-color);
}
.convert-card .form-control:-ms-input-placeholder { color: var(--placeholder-color); }

.input-group { position: relative; }
.input-group .input-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--body-color);
    left: 12px;
    z-index: 6;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.input-group .input-icon i { font-size: 1.25rem; color: var(--brand-tertiary); }

/* Bootstrap Button Overrides */
button, .btn {
    border-radius: 8px;
    transition: all 0.3s;
}

/* Make main containers transparent on Convert To Quote page only */
.convert-to-quote-page .av-shell-main {
    background-color: transparent !important;
}

.btn-primary {
    background-color: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
}

.btn-primary:hover {
    background-color: var(--theme-color-2) !important;
    border-color: var(--theme-color-2) !important;
}

a {
    color: #0366d6;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

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

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus {
    outline: none !important;
    box-shadow: none !important;
}

.card-no-border {
    --bs-card-border-width: 0 !important;
    --bs-card-cap-bg: none;
    border: none !important;
}

.modal-header {
    background-color: #D9D9D9;
    color: #323732;
}

.text-custom {
    color: #0096ed !important;
}

.placeholder-glow {
    width: 9rem;
}

.alert {
    --bs-alert-padding-x: 0.5rem;
    --bs-alert-padding-y: 0.5rem;
    --bs-alert-margin-bottom: 0.3rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.5rem;
}

.navbar {
    background-color: #002042;
    max-height: 4rem;
}

.border-primary {
    border-color: #0096ed !important;
}

.nav-link {
    color: #0096ed;
    width: 12.5rem;
    font-weight: 700;
}

.nav-link:hover {
    color: cornflowerblue;
}

.btn-custom {
    --bs-btn-font-weight: 600;
    --bs-btn-color: #0096ed;
    --bs-btn-bg: var(--bs-white);
    --bs-btn-border-color: #0096ed;
    --bs-btn-border-radius: .25rem;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #0096ed;
    --bs-btn-hover-border-color: #0096ed;
    --bs-btn-focus-shadow-rgb: none;
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: #0096ed;
    --bs-btn-active-border-color: #0096ed;
    z-index: 100;
}

.btn-blue {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0096ed;
    --bs-btn-border-color: #0096ed;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #063371;
    --bs-btn-hover-border-color: #063371;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #063371;
    --bs-btn-active-border-color: #0096ed;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #d8dee6;
    --bs-btn-disabled-border-color: #d8dee6;
    --bs-btn-border-radius: .25rem;
}

.btn-cancel {
    --bs-btn-font-weight: 500;
    --bs-btn-color: #7B8A8B;
    --bs-btn-bg: var(--bs-white);
    --bs-btn-border-color: #7B8A8B !important;
    --bs-btn-border-radius: .25rem;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #7B8A8B;
    --bs-btn-hover-border-color: #7B8A8B;
    --bs-btn-focus-shadow-rgb: none;
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: #7B8A8B;
    --bs-btn-active-border-color: #7B8A8B !important;
}

.btn-add {
    --bs-btn-color: #fff;
    --bs-btn-bg: #18bc9c;
    --bs-btn-border-color: #18bc9c;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #14a085;
    --bs-btn-hover-border-color: #13967d;
    --bs-btn-focus-shadow-rgb: 59,198,171;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #13967d;
    --bs-btn-active-border-color: #128d75;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #18bc9c;
    --bs-btn-disabled-border-color: #18bc9c;
    --bs-btn-border-radius: .25rem !important;
}

.btn-success, .btn-danger {
    --bs-btn-border-radius: .25rem !important;
}

.dropdown-menu {
    --bs-dropdown-bg: #fff;
    --bs-dropdown-link-color: #495057;
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-hover-bg: #0096ed;
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: #0096ed;
    --bs-dropdown-item-padding-x: 0;
    --bs-dropdown-item-padding-y: 0;
}

.dropdown-item {
    padding: 0 1rem;
    color: #0096ed;
}

.dropdown-item:hover {
    background-color: #0096ed !important;
    cursor: pointer;
}

.dropdown-item:hover > a {
    color: #fff !important;
}

.dropdown-item a:hover {
    color: #fff;
}

.list-unstyled {
    margin-bottom: 0 !important;
}

.ims-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 27px;
}

.page-title {
    font-weight: 700;
    font-size: 29px;
    color: #002042;
    width: 30rem;
}

.partner {
    font-size: 14.5px;
}

.lh-1-75 {
    line-height: 1.75rem;
}

.fs-7 {
    font-size: 1rem !important;
}

.neg-mt-0-5 {
    margin-top: -0.5rem !important;
}

.v-center {
    display: flex;
    align-items: center;
}

.gap {
    column-gap: 1rem;
}

.no-gap {
    column-gap: 0rem !important;
}

.big-gap {
    column-gap: 2rem !important;
}

.product-line {
    width: 6rem;
}

#searchText {
    width: 30rem !important;
}

.input-group-text {
    min-width: 0px;
    line-height: 1.2 !important;
    font-size: 1em;
}

.text-wide {
    min-width: 200px !important;
}

.fa-bars:hover {
    color: cornflowerblue !important;
}

@keyframes spin {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}

input[readonly] {
    background-color: transparent !important;
}

table {
    width: 100% !important;
}

table thead th {
    background-color: #686868 !important;
    border: 1px solid #686868;
    color: #ffffff !important;
    font-weight: 500 !important;
}

#tblSearchResult_info {
    padding-top: 1.5rem !important;
}

div.dataTables_wrapper div.dataTables_info {
    padding-top: 1.5em;
}

.btn-add, .btn-cancel, .btn-success, .btn-danger {
    width: 8rem !important;
}

#btnReconcileInventory {
    width: 12rem !important;
}

.section-header {
    padding: 0.25rem 1rem;
    font-size: 1.5rem;
    margin-bottom: 0.85rem;
}

div.dataTables_scrollHeadInner {
    background-color: #686868 !important;
}

div.dataTables_scrollBody > table {
    margin-top: -2px !important;
}

.table > thead {
    vertical-align: middle !important;
}

.row-border > tbody > tr {
    vertical-align: middle;
}

.dataTables_scroll {
    border-bottom: 1px solid var(--bs-border-color);
    border-right: 1px solid var(--bs-border-color);
}

.pr-5 {
    padding-right: 5rem;
}

#InventoryOverrideStartDateDelay {
    width: 3rem !important;
}

.pl-7 {
    padding-left: 7rem;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: 40% !important;
}

.dataTables_filter input[type="search"] {
    width: 30rem !important;
    font-family: inherit !important;
    font-size: inherit !important;
}

#templateImage {
    width: 100%;
    box-shadow: 0px 0px 8px 4px rgb(0 0 0 / 36%);
}

.startDelayItemAddOn {
    width: 17rem;
}

.users > #tblSearchResult_wrapper {
    margin-top: -2.25rem;
}

.btn-add-user {
    position: relative;
}

.project, .item-name {
    font-size: 19px;
}

.spinner,
.contact-spinner,
.modal-spinner {
    position: fixed;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 50 50'%3E%3Cpath d='M28.43 6.378C18.27 4.586 8.58 11.37 6.788 21.533c-1.791 10.161 4.994 19.851 15.155 21.643l.707-4.006C14.7 37.768 9.392 30.189 10.794 22.24c1.401-7.95 8.981-13.258 16.93-11.856l.707-4.006z'%3E%3CanimateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center / 50px no-repeat;
}

.loading {
    font-weight: 700;
    font-size: 15px;
}

.spinner-img {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 50 50'%3E%3Cpath d='M28.43 6.378C18.27 4.586 8.58 11.37 6.788 21.533c-1.791 10.161 4.994 19.851 15.155 21.643l.707-4.006C14.7 37.768 9.392 30.189 10.794 22.24c1.401-7.95 8.981-13.258 16.93-11.856l.707-4.006z'%3E%3CanimateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center / 50px no-repeat;
}

.spinner-border {
    width: 2.5rem;
    height: 2.5rem;
    z-index: 1;
}

.faded {
    opacity: 0.25;
}

.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button,
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button {
    text-transform: none !important;
    font-size: inherit !important;
    font-weight: 500 !important;
    text-shadow: none;
}

.jconfirm .jconfirm-box .jconfirm-buttons button {
    border: 1px solid !important;
}

.wide {
    width: 9.5rem !important;
}

.jconfirm-title {
    font-size: 1.25rem !important;
    font-weight: 700;
}

.jconfirm-buttons {
    display: flex;
    column-gap: 0.25rem !important;
}

.jconfirm-content {
    font-size: 1rem !important;
}