/* ========================================= */
/* GLOBAL */
/* ========================================= */

body {
    background: #f9fafb;
    font-family: Arial, Helvetica, sans-serif;
    color: #374151;
}


/* ========================================= */
/* HOMEPAGE FIX */
/* ========================================= */

#content #open-or-check {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}


/* ========================================= */
/* LOGIN PAGE */
/* ========================================= */

#check-ticket {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

#check-ticket .client-choice {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 40px auto !important;
}

#login-sign-in {
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    border-radius: 8px;
    padding: 20px;
    background: #ffffff;
}

#open-text label {
    display: block;
    margin-bottom: 12px;
    text-align: left;
}

#open-text input {
    margin-top: 4px;
    width: 100%;
}

#sign-in-button {
    background-color: #2563eb !important;
    border: none !important;
    color: #fff !important;
    border-radius: 5px;
    padding: 10px 18px;
}


/* ========================================= */
/* OPEN TICKET FORM */
/* ========================================= */

#ticketForm {
    max-width: 700px !important;
    margin: 20px auto !important;
    background: #ffffff;
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

#ticketForm table {
    width: 100% !important;
}

/* Convert table layout to modern stacked layout */
#ticketForm tr {
    display: block;
    margin-bottom: 16px;
}

#ticketForm td {
    display: block;
    width: 100% !important;
}

/* Labels */
#ticketForm td:first-child {
    margin-bottom: 4px;
    font-weight: 600;
    color: #374151;
}

/* Inputs */
#ticketForm select,
#ticketForm input,
#ticketForm textarea {
    width: 100% !important;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    padding: 8px;
    box-sizing: border-box;
}

#topicId:focus {
    outline: none;
    border-color: #2563eb;
}

/* Buttons */
#ticketForm input[type="submit"] {
    background-color: #2563eb !important;
    color: #fff !important;
    border: none !important;
    border-radius: 5px;
    padding: 10px 20px;
}

#ticketForm input[type="reset"],
#ticketForm input[type="button"] {
    background-color: #e5e7eb;
    border: none;
    border-radius: 5px;
    padding: 10px 16px;
}

.buttons {
    margin-top: 25px !important;
    text-align: center;
}

.buttons input {
    margin: 6px;
}

/* Client info cleanup */
.client-deets {
    display: block;
    margin-bottom: 8px;
}

.client-deets td {
    display: inline-block;
    width: auto !important;
    margin-right: 10px;
}


/* ========================================= */
/* TICKET VIEW PAGE */
/* ========================================= */

/* Container */
#ticketThread,
#ticketInfo {
    max-width: 900px;
    margin: 20px auto;
}

/* Ticket header */
h1 {
    font-size: 22px;
    margin-bottom: 5px;
}

/* Ticket ID badge */
h1 + div {
    display: inline-block;
    background: #e5e7eb;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 15px;
}

/* Info card */
#ticketInfo {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
}

/* Two column layout */
#ticketInfo .row {
    display: flex;
    gap: 40px;
}

/* Labels */
#ticketInfo strong {
    color: #6b7280;
    font-weight: 600;
}


/* ========================================= */
/* REMOVE GREY SECTION BARS */
/* ========================================= */

#ticketInfo h3,
#ticketInfo .section-title {
    background: none !important;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 6px;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 600;
}


/* ========================================= */
/* CUSTOM FORM DISPLAY */
/* ========================================= */

#ticketInfo table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

#ticketInfo table tr {
    display: block;
    margin-bottom: 10px;
}

#ticketInfo table td {
    display: block;
    padding: 0;
}

#ticketInfo table td:first-child {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 3px;
}

#ticketInfo table td:last-child {
    font-size: 14px;
    font-weight: 500;
}


/* ========================================= */
/* THREAD / COMMENTS */
/* ========================================= */

.thread-entry {
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    margin-bottom: 15px;
}

/* Reply header */
.thread-entry .header {
    background: #e0ecff !important;
    color: #1e3a8a !important;
    border-bottom: 1px solid #dbeafe !important;
    font-weight: 600;
    padding: 10px;
}

/* Reply body */
.thread-entry .body {
    background: #ffffff !important;
    padding: 12px;
}

/* Remove avatar */
.thread-entry .avatar {
    display: none !important;
}


/* ========================================= */
/* TIMELINE */
/* ========================================= */

#ticketThread .event {
    border-left: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    opacity: 0.8;
}

#ticketThread .event:before {
    display: none !important;
}


/* ========================================= */
/* REPLY BOX */
/* ========================================= */

#reply {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

#reply h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Editor */
.redactor-toolbar {
    border-radius: 6px 6px 0 0 !important;
}

.redactor-box {
    border-radius: 0 0 6px 6px !important;
}


/* ========================================= */
/* FILE UPLOAD */
/* ========================================= */

.attachments {
    border: 2px dashed #d1d5db;
    border-radius: 6px;
    padding: 15px;
    text-align: center;
}


/* ========================================= */
/* BUTTONS */
/* ========================================= */

#reply input[type="submit"] {
    background-color: #2563eb !important;
    color: #fff !important;
    border-radius: 6px;
    padding: 10px 20px;
}

#reply input[type="reset"],
#reply input[type="button"] {
    background-color: #e5e7eb;
    border-radius: 6px;
    padding: 10px 16px;
}



/* ========================================= */
/* 🔥 HARD OVERRIDES FOR OSTICKET AWESOME */
/* ========================================= */

/* Remove grey "End User Details" bar */
#content #ticketInfo h3,
#content #ticketInfo .title,
#content #ticketInfo .section-title,
#content #ticketInfo table thead,
#content #ticketInfo table tr:first-child {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove left shaded column */
#content #ticketInfo table td:first-child {
    background: transparent !important;
}


/* ========================================= */
/* 🔥 FIX ORANGE REPLY HEADER */
/* ========================================= */

#content .thread-entry .header,
#content .thread-entry .thread-header {
    background: #e0ecff !important;
    color: #1e3a8a !important;
    border: 1px solid #dbeafe !important;
}


/* ========================================= */
/* 🔥 REMOVE AVATAR COLUMN */
/* ========================================= */

#content .thread-entry .avatar,
#content .thread-entry .user,
#content .thread-entry .gravatar {
    display: none !important;
}

#content .thread-entry {
    margin-left: 0 !important;
}


/* ========================================= */
/* 🔥 REMOVE TIMELINE */
/* ========================================= */

#content #ticketThread .event,
#content #ticketThread .thread-event {
    border-left: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

#content #ticketThread .event:before,
#content #ticketThread .thread-event:before {
    display: none !important;
}


/* ========================================= */
/* 🔥 FORCE CARD STYLE */
/* ========================================= */

#content .thread-entry {
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
    overflow: hidden;
}

#content .thread-entry .body {
    background: #ffffff !important;
}


/* ========================================= */
/* 🔥 DEBUG TEST (TEMPORARY) */
/* ========================================= */

/* Uncomment this to confirm CSS is loading */
/*
#ticketInfo {
    border: 5px solid red !important;
}
*/
/* ========================================================================== */
/* VITORE WEBSITE-STYLE CLIENT BRANDING - 2026-08-30                        */
/* ========================================================================== */

:root {
    --vitore-navy: #061526;
    --vitore-navy-2: #102c56;
    --vitore-blue: #2e82cb;
    --vitore-cyan: #48afe0;
    --vitore-text: #172033;
    --vitore-muted: #667085;
    --vitore-line: #e3e8ef;
    --vitore-pale: #f5f8fb;
}

body.client-side {
    background: #ffffff !important;
    color: var(--vitore-text);
    font-family: 'Poppins', 'Montserrat', Arial, Helvetica, sans-serif !important;
}

/* Header: closer to the main Vitore website */
.client-side #container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    background: #fff;
}

.client-side #header {
    background: linear-gradient(112deg, #061325 0%, #10274b 52%, #315f9e 100%) !important;
    border: 0 !important;
    min-height: 78px !important;
    box-shadow: none !important;
}

.client-side #header-inner,
.client-side #nav-inner {
    width: min(1180px, calc(100% - 48px)) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
}

.client-side #header-inner {
    min-height: 78px !important;
    display: flex;
    align-items: center;
    position: relative;
}

.client-side #left-logo {
    display: flex !important;
    align-items: center !important;
    min-height: 78px !important;
}

.client-side #header-title {
    color: #51b4e6 !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    letter-spacing: .01em;
    line-height: 1.05 !important;
}

.client-side #header-subtitle {
    color: #51b4e6 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: .26em !important;
    text-transform: uppercase;
    margin-top: 4px !important;
}

.client-side #header-image img {
    max-height: 53px !important;
}

.client-side #header .pull-right.flush-right {
    margin-left: auto !important;
}

.client-side #header .pull-right.flush-right p,
.client-side #header .pull-right.flush-right a {
    color: #fff !important;
}

.client-side #header .pull-right.flush-right a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 15px !important;
    margin-left: 10px;
    border: 1px solid rgba(72, 175, 224, .9) !important;
    border-radius: 5px !important;
    color: #55b8e8 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: .2s ease;
}

.client-side #header .pull-right.flush-right a:hover {
    color: #fff !important;
    background: rgba(72,175,224,.16) !important;
}

.client-side #nav-wrapper {
    background: #07111f !important;
    border: 0 !important;
    box-shadow: none !important;
    min-height: 46px !important;
}

.client-side #nav-inner {
    min-height: 46px !important;
}

.client-side ul#nav {
    min-height: 46px !important;
    display: flex !important;
    align-items: stretch !important;
}

.client-side ul#nav li,
.client-side ul#nav li a {
    min-height: 46px !important;
}

.client-side ul#nav li a {
    display: flex !important;
    align-items: center !important;
    padding: 0 18px !important;
    color: rgba(255,255,255,.92) !important;
    background: transparent !important;
    border: 0 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background .2s ease, color .2s ease;
}

.client-side ul#nav li a:hover,
.client-side ul#nav li a.active {
    color: #fff !important;
    background: rgba(72,175,224,.17) !important;
    box-shadow: inset 0 -3px 0 var(--vitore-cyan);
}

/* Homepage is intentionally edge-to-edge, unlike internal osTicket pages. */
.index-page #content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
}

.index-page #content > #msg_error,
.index-page #content > #msg_notice,
.index-page #content > #msg_warning {
    max-width: 1180px;
    margin: 18px auto;
}

/* Hero */
.vitore-support-home {
    width: 100%;
    overflow: hidden;
}

.vitore-hero {
    position: relative;
    min-height: 470px;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at 76% 28%, rgba(54,123,194,.29), transparent 24%),
        radial-gradient(circle at 60% 78%, rgba(22,104,153,.18), transparent 31%),
        linear-gradient(90deg, rgba(2,15,29,.98) 0%, rgba(3,24,42,.95) 45%, rgba(5,35,58,.90) 100%);
    isolation: isolate;
}

.vitore-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .38;
    background-image:
        linear-gradient(rgba(69,157,209,.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(69,157,209,.08) 1px, transparent 1px);
    background-size: 74px 74px;
    transform: perspective(550px) rotateX(62deg) scale(1.5) translateY(22%);
    transform-origin: center bottom;
}

.vitore-hero::after {
    content: '';
    position: absolute;
    right: 8%;
    top: 14%;
    width: 410px;
    height: 260px;
    z-index: -1;
    opacity: .26;
    border: 1px solid rgba(76,175,224,.24);
    background:
        linear-gradient(180deg, rgba(60,156,211,.12), rgba(2,19,34,.03)),
        repeating-linear-gradient(0deg, transparent 0 25px, rgba(71,168,223,.15) 26px 27px),
        repeating-linear-gradient(90deg, transparent 0 45px, rgba(71,168,223,.10) 46px 47px);
    box-shadow: 0 0 80px rgba(29,108,170,.18);
}

.vitore-hero-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 55%);
}

.vitore-hero-inner,
.vitore-section-inner {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.vitore-hero-copy {
    max-width: 790px;
    padding: 70px 0 74px;
}

.vitore-eyebrow {
    color: var(--vitore-cyan);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: 17px;
}

.vitore-hero h1 {
    color: #fff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: clamp(38px, 4.3vw, 61px) !important;
    font-weight: 600 !important;
    line-height: 1.12 !important;
    letter-spacing: -.025em;
    max-width: 760px;
    margin: 0 0 20px !important;
    padding: 0 !important;
}

.vitore-hero p {
    max-width: 780px;
    color: rgba(255,255,255,.91);
    font-size: 17px;
    line-height: 1.75;
    margin: 0 0 32px;
}

.vitore-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.vitore-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 29px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.vitore-btn:hover {
    transform: translateY(-2px);
}

.vitore-btn-primary {
    color: #fff !important;
    background: #07516e;
    box-shadow: 0 10px 30px rgba(0, 77, 105, .24);
}

.vitore-btn-primary:hover {
    background: #08627f;
    color: #fff !important;
}

.vitore-btn-secondary {
    color: #fff !important;
    background: #49aee0;
    box-shadow: 0 10px 30px rgba(72, 175, 224, .20);
}

.vitore-btn-secondary:hover {
    background: #5bb9e5;
    color: #fff !important;
}

/* Main support section */
.vitore-help {
    padding: 78px 0 88px;
    background: #fff;
}

.vitore-section-heading {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-bottom: 38px;
}

.vitore-section-icon {
    width: 45px;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 45px;
}

.vitore-section-icon svg {
    width: 44px;
    height: 44px;
    fill: #4eb0df;
}

.vitore-eyebrow-light {
    margin-bottom: 5px;
    font-size: 10px;
}

.vitore-section-heading h2 {
    margin: 0 !important;
    padding: 0 !important;
    color: #171b22 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 26px !important;
    font-weight: 500 !important;
}

.vitore-help-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-bottom: 28px;
}

.vitore-help-card {
    min-height: 220px;
    position: relative;
    padding: 27px 28px 25px;
    background: #fff;
    border: 1px solid var(--vitore-line);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(12, 38, 68, .055);
}

.vitore-card-number {
    color: #47addd;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    margin-bottom: 18px;
}

.vitore-help-card h3 {
    color: #111827 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 0 9px !important;
    padding: 0 !important;
}

.vitore-help-card p {
    min-height: 66px;
    color: var(--vitore-muted);
    font-size: 14px;
    line-height: 1.62;
    margin: 0 0 18px;
}

.vitore-help-card a {
    color: #167aae !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
}

.vitore-help-card a:hover {
    color: #0d5a82 !important;
}

.vitore-tip {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px 19px;
    background: #eef7ff;
    border: 1px solid #cfe8fb;
    border-radius: 6px;
    color: #264b70;
    font-size: 13px;
}

.vitore-tip-icon {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #4caedf;
    color: #fff;
    font-weight: 700;
    font-family: Georgia, serif;
}

.vitore-kb {
    margin-top: 38px;
    padding: 30px;
    display: grid;
    grid-template-columns: 1fr minmax(380px, 520px);
    gap: 35px;
    align-items: center;
    background: var(--vitore-pale);
    border-radius: 8px;
}

.vitore-kb h3 {
    color: #111827 !important;
    font-size: 18px !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
}

.vitore-kb p {
    color: var(--vitore-muted);
    margin: 0;
    font-size: 13px;
}

.vitore-kb-search {
    display: flex;
    align-items: stretch;
}

.vitore-kb-search input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 15px;
    border: 1px solid #cbd5e1;
    border-right: 0;
    border-radius: 5px 0 0 5px;
    background: #fff;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

.vitore-kb-search button {
    height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: 0 5px 5px 0;
    background: #116b93;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    cursor: pointer;
}

/* The old landing controls are not used by the new homepage. */
.index-page #landing_page,
.index-page #landing-search,
.index-page #open-or-check,
.index-page #more-options {
    display: none !important;
}

/* Footer polish */
.client-side #pre-footer {
    border-top: 1px solid #e4e8ee !important;
}

.client-side #footer {
    border-top: 0 !important;
}

@media (max-width: 800px) {
    .client-side #header-inner,
    .client-side #nav-inner,
    .vitore-hero-inner,
    .vitore-section-inner {
        width: min(100% - 32px, 1180px) !important;
    }

    .vitore-hero {
        min-height: 420px;
    }

    .vitore-hero::after {
        width: 280px;
        height: 190px;
        right: -80px;
        opacity: .16;
    }

    .vitore-hero-copy {
        padding: 60px 0;
    }

    .vitore-help-grid {
        grid-template-columns: 1fr;
    }

    .vitore-help-card {
        min-height: 0;
    }

    .vitore-help-card p {
        min-height: 0;
    }

    .vitore-kb {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .vitore-hero h1 {
        font-size: 37px !important;
    }

    .vitore-hero p {
        font-size: 15px;
    }

    .vitore-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .vitore-btn {
        width: 100%;
        box-sizing: border-box;
    }

    .vitore-help {
        padding: 55px 0 65px;
    }

    .vitore-section-heading {
        align-items: flex-start;
    }

    .vitore-kb {
        padding: 22px;
    }

    .vitore-kb-search {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .vitore-kb-search input[type="text"],
    .vitore-kb-search button {
        width: 100%;
        border: 1px solid #cbd5e1;
        border-radius: 5px;
    }
}

/* ========================================================================== */
/* VITORE LANDING PAGE LAYOUT FIXES - revision 2 - 2026-08-30               */
/* ========================================================================== */

/* osTicket Awesome gives all H1 elements a white background.  On the dark
   landing hero this appeared as a large white rectangle behind the title. */
.index-page .vitore-hero h1,
.index-page #content .vitore-hero h1 {
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* The Awesome desktop stylesheet fixes #header-inner at 60px and vertically
   translates the sign-in block.  Explicitly reset those rules so the branding
   and sign-in button sit cleanly on a single 78px row. */
.client-side #header,
.client-side #header-inner {
    height: 78px !important;
    min-height: 78px !important;
}

.client-side #header-inner {
    overflow: visible !important;
}

.client-side #header-logo {
    float: none !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2;
    text-decoration: none !important;
}

.client-side #left-logo {
    margin: 0 !important;
    min-height: 0 !important;
}

.client-side #header .pull-right.flush-right {
    float: none !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 3;
}

.client-side #header .pull-right.flush-right p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* Keep the nav on its own row rather than allowing legacy fixed heights to
   compress its contents. */
.client-side #nav-wrapper,
.client-side #nav-inner,
.client-side ul#nav {
    height: 46px !important;
    min-height: 46px !important;
}

.client-side #nav-inner {
    overflow: visible !important;
    position: relative !important;
}

.client-side ul#nav {
    width: auto !important;
    line-height: normal !important;
    margin: 0 !important;
}

/* Awesome forces the first nav LI into a tiny 20px square. Remove that fixed
   size while retaining the home icon naturally. */
.client-side #nav-wrapper ul#nav li:first-child {
    width: auto !important;
    height: 46px !important;
    top: 0 !important;
    margin: 0 !important;
}

/* Make the hero breathe a little more at desktop widths. */
.vitore-hero-copy {
    max-width: 900px !important;
}

.vitore-hero-actions {
    align-items: center;
    gap: 14px !important;
}

.vitore-btn {
    white-space: nowrap;
}

/* Third CTA: intentionally an outlined pill so remote support is obvious
   without competing with the primary ticket action. */
.vitore-btn-remote {
    color: #ffffff !important;
    background: rgba(4, 22, 38, .34) !important;
    border: 2px solid #49aee0 !important;
    box-shadow: 0 10px 30px rgba(10, 73, 109, .18);
}

.vitore-btn-remote:hover {
    color: #ffffff !important;
    background: rgba(73, 174, 224, .18) !important;
    border-color: #63bee8 !important;
}

/* Intermediate widths: keep all three CTAs usable without squeezing text. */
@media (max-width: 1050px) and (min-width: 601px) {
    .vitore-hero-copy {
        max-width: 760px !important;
    }

    .vitore-hero-actions {
        max-width: 760px;
    }

    .vitore-btn {
        min-height: 52px;
        padding-left: 22px;
        padding-right: 22px;
    }
}

@media (max-width: 800px) {
    .client-side #header-logo {
        left: 0 !important;
        max-width: calc(100% - 100px);
    }

    .client-side #header .pull-right.flush-right {
        right: 0 !important;
    }
}

@media (max-width: 600px) {
    .client-side #header,
    .client-side #header-inner {
        height: 70px !important;
        min-height: 70px !important;
    }

    .client-side #header .pull-right.flush-right {
        display: none !important;
    }

    .client-side #header-logo {
        max-width: calc(100% - 60px);
    }

    .vitore-hero-actions {
        gap: 12px !important;
    }
}


/* v4: keep the three hero CTAs visible on normal desktop widths. */
@media (min-width: 1060px) {
    .vitore-hero-actions {
        flex-wrap: nowrap !important;
        width: max-content;
        max-width: none !important;
    }
}

.vitore-btn-remote {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.vitore-btn-arrow {
    margin-left: 8px;
    font-size: 17px;
    line-height: 1;
}

/* ========================================= */
/* VITORE CLIENT ACCESS / LOGIN - 2026-08-30 */
/* ========================================= */

.vitore-auth-page {
    width: 100%;
    padding: 44px 22px 64px;
    box-sizing: border-box;
}

.vitore-auth-shell {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 55px rgba(15, 23, 42, 0.13);
    border: 1px solid rgba(148, 163, 184, 0.22);
}

.vitore-auth-intro {
    position: relative;
    padding: 52px 46px;
    color: #fff;
    background:
        radial-gradient(circle at 15% 10%, rgba(41, 196, 255, 0.22), transparent 34%),
        linear-gradient(145deg, #071b36 0%, #0b3159 58%, #075b83 100%);
}

.vitore-auth-intro::after {
    content: "";
    position: absolute;
    right: -78px;
    bottom: -95px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    border: 44px solid rgba(40, 194, 255, 0.07);
    pointer-events: none;
}

.vitore-auth-kicker {
    position: relative;
    z-index: 1;
    margin-bottom: 18px;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: #55d1ff;
}

#content .vitore-auth-intro h1,
.vitore-auth-intro h1 {
    position: relative;
    z-index: 1;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: #fff !important;
    font-size: clamp(32px, 4vw, 46px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em;
    font-weight: 750 !important;
    box-shadow: none !important;
}

.vitore-auth-intro > p {
    position: relative;
    z-index: 1;
    margin: 0 0 32px;
    max-width: 380px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    line-height: 1.7;
}

.vitore-auth-feature {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 18px;
}

.vitore-auth-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #071b36;
    background: #55d1ff;
    font-size: 14px;
    font-weight: 900;
}

.vitore-auth-feature strong,
.vitore-auth-feature span {
    display: block;
}

.vitore-auth-feature strong {
    margin: 1px 0 4px;
    color: #fff;
    font-size: 14px;
}

.vitore-auth-feature div > span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 12px;
    line-height: 1.5;
}

.vitore-remote-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 11px 18px;
    border: 1px solid rgba(85, 209, 255, 0.65);
    border-radius: 999px;
    color: #fff !important;
    background: rgba(4, 20, 39, 0.22);
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 700;
    transition: .2s ease;
}

.vitore-remote-link:hover {
    color: #071b36 !important;
    background: #55d1ff;
    border-color: #55d1ff;
    transform: translateY(-1px);
}

.vitore-auth-card {
    padding: 50px 52px 46px;
    background: #fff;
    box-sizing: border-box;
}

.vitore-auth-card-heading {
    margin-bottom: 28px;
}

.vitore-auth-card-eyebrow {
    display: block;
    margin-bottom: 9px;
    color: #1687c8;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
}

#content .vitore-auth-card h2,
.vitore-auth-card h2 {
    margin: 0 0 9px !important;
    padding: 0 !important;
    color: #0f2742 !important;
    font-size: 26px !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
}

.vitore-auth-card-heading p {
    margin: 0;
    color: #6b7c90;
    font-size: 13px;
    line-height: 1.65;
}

.vitore-auth-form {
    margin: 0;
}

.vitore-field {
    margin: 0 0 18px;
    text-align: left;
}

.vitore-field label {
    display: block;
    margin: 0 0 7px;
    color: #233c59;
    font-size: 12px;
    font-weight: 700;
}

#content .vitore-field input,
.vitore-field input {
    display: block;
    width: 100% !important;
    min-height: 46px;
    margin: 0 !important;
    padding: 11px 14px !important;
    box-sizing: border-box;
    border: 1px solid #ced9e5 !important;
    border-radius: 10px !important;
    background: #fbfdff !important;
    color: #132b46 !important;
    box-shadow: none !important;
    font: inherit;
    font-size: 14px !important;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

#content .vitore-field input:focus,
.vitore-field input:focus {
    background: #fff !important;
    border-color: #199fd4 !important;
    box-shadow: 0 0 0 3px rgba(25, 159, 212, 0.12) !important;
}

.vitore-primary-button,
#content .vitore-primary-button,
#content button.vitore-primary-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100% !important;
    min-height: 47px;
    margin: 4px 0 0 !important;
    padding: 11px 20px !important;
    box-sizing: border-box;
    border: 0 !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: linear-gradient(90deg, #127fca 0%, #17a9dc 100%) !important;
    box-shadow: 0 8px 20px rgba(18, 127, 202, 0.22) !important;
    cursor: pointer;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    -webkit-appearance: none;
}

.vitore-primary-button:hover,
#content .vitore-primary-button:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow: 0 11px 24px rgba(18, 127, 202, 0.28) !important;
}

.vitore-auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 20px;
    color: #9aa9b8;
    font-size: 11px;
    text-transform: uppercase;
}

.vitore-auth-divider::before,
.vitore-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e6edf3;
}

.vitore-account-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 16px;
    border-radius: 12px;
    background: #f5f9fc;
    border: 1px solid #e7eef5;
}

.vitore-account-option strong,
.vitore-account-option span {
    display: block;
}

.vitore-account-option strong {
    margin-bottom: 3px;
    color: #213a57;
    font-size: 12px;
}

.vitore-account-option span {
    color: #7a8b9d;
    font-size: 11px;
    line-height: 1.45;
}

.vitore-secondary-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid #1687c8;
    color: #1175ae !important;
    background: #fff;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none !important;
    white-space: nowrap;
}

.vitore-secondary-button:hover {
    color: #fff !important;
    background: #1687c8;
}

.vitore-auth-small-link,
.vitore-new-ticket-note {
    margin-top: 16px;
    color: #7a8b9d;
    font-size: 11px;
    line-height: 1.55;
    text-align: center;
}

.vitore-auth-small-link a,
.vitore-new-ticket-note a {
    color: #117fbd !important;
    font-weight: 700;
    text-decoration: none;
}

.vitore-auth-small-link a:hover,
.vitore-new-ticket-note a:hover {
    text-decoration: underline;
}

.vitore-auth-error {
    margin: -8px 0 20px;
    padding: 11px 13px;
    border: 1px solid #fecaca;
    border-radius: 9px;
    color: #9f1239;
    background: #fff1f2;
    font-size: 12px;
    line-height: 1.5;
}

.vitore-forgot-link {
    margin-top: 13px;
}

/* Retire the legacy osTicket Awesome access/login card rules only inside
   the new Vitore authentication pages. */
.vitore-auth-page #check-ticket,
.vitore-auth-page .client-choice,
.vitore-auth-page #open-title,
.vitore-auth-page #open-text {
    all: unset;
}

@media (max-width: 760px) {
    .vitore-auth-page {
        padding: 24px 14px 42px;
    }

    .vitore-auth-shell {
        grid-template-columns: 1fr;
        border-radius: 17px;
    }

    .vitore-auth-intro {
        padding: 36px 28px 34px;
    }

    #content .vitore-auth-intro h1,
    .vitore-auth-intro h1 {
        font-size: 34px !important;
    }

    .vitore-auth-card {
        padding: 34px 28px 32px;
    }
}

@media (max-width: 460px) {
    .vitore-account-option {
        align-items: flex-start;
        flex-direction: column;
    }

    .vitore-secondary-button {
        align-self: stretch;
    }
}

/* ========================================================================== */
/* VITORE CLIENT LOGIN - compatibility override v6 - 2026-08-30              */
/* Forces layout over osTicket Awesome's legacy client-login selectors.       */
/* ========================================================================== */

html body.client-side #content .vitore-auth-page,
html body #content .vitore-auth-page {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 46px 24px 70px !important;
    box-sizing: border-box !important;
    float: none !important;
    position: relative !important;
    background: linear-gradient(180deg, #f7fafc 0%, #ffffff 100%) !important;
    color: #17243a !important;
}

html body.client-side #content .vitore-auth-shell,
html body #content .vitore-auth-shell {
    display: grid !important;
    grid-template-columns: minmax(360px, .92fr) minmax(420px, 1.08fr) !important;
    width: min(100%, 1000px) !important;
    max-width: 1000px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 560px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid #dfe8f0 !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 18px 55px rgba(15, 23, 42, .12) !important;
}

html body #content .vitore-auth-intro,
html body #content .vitore-auth-card {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
    position: relative !important;
}

html body #content .vitore-auth-intro {
    padding: 54px 46px 48px !important;
    color: #fff !important;
    background: radial-gradient(circle at 15% 10%, rgba(41,196,255,.22), transparent 34%), linear-gradient(145deg,#071b36 0%,#0b3159 58%,#075b83 100%) !important;
}

html body #content .vitore-auth-card {
    padding: 52px 54px 46px !important;
    background: #fff !important;
}

html body #content .vitore-auth-kicker,
html body #content .vitore-auth-card-eyebrow {
    display: block !important;
    width: auto !important;
    height: auto !important;
}

html body #content .vitore-auth-intro h1 {
    display: block !important;
    width: auto !important;
    max-width: 390px !important;
    height: auto !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    float: none !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 43px !important;
    line-height: 1.08 !important;
    font-weight: 700 !important;
}

html body #content .vitore-auth-intro > p {
    display: block !important;
    margin: 0 0 32px !important;
    max-width: 380px !important;
    color: rgba(255,255,255,.82) !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
}

html body #content .vitore-auth-feature {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: auto !important;
    margin: 0 0 19px !important;
    padding: 0 !important;
    float: none !important;
}

html body #content .vitore-auth-feature-icon {
    display: inline-flex !important;
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 26px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #55d1ff !important;
    color: #071b36 !important;
    line-height: 26px !important;
}

html body #content .vitore-auth-feature > div {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
}

html body #content .vitore-auth-feature strong,
html body #content .vitore-auth-feature div > span {
    display: block !important;
    width: auto !important;
    float: none !important;
}

html body #content .vitore-auth-feature strong {
    margin: 1px 0 4px !important;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
}

html body #content .vitore-auth-feature div > span {
    color: rgba(255,255,255,.70) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

html body #content a.vitore-remote-link {
    display: inline-flex !important;
    width: auto !important;
    min-height: 42px !important;
    margin: 18px 0 0 !important;
    padding: 10px 18px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    float: none !important;
    border: 1px solid rgba(85,209,255,.72) !important;
    border-radius: 999px !important;
    background: rgba(4,20,39,.24) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

html body #content .vitore-auth-card-heading {
    display: block !important;
    width: auto !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
}

html body #content .vitore-auth-card h2 {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 9px !important;
    padding: 0 !important;
    float: none !important;
    color: #0f2742 !important;
    background: transparent !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

html body #content .vitore-auth-card-heading p {
    display: block !important;
    margin: 0 !important;
    color: #6b7c90 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

html body #content form.vitore-auth-form {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

html body #content .vitore-field {
    display: block !important;
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    float: none !important;
}

html body #content .vitore-field label {
    display: block !important;
    width: auto !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
    float: none !important;
    color: #233c59 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
}

html body #content .vitore-field input[type="text"],
html body #content .vitore-field input[type="password"],
html body #content .vitore-field input[type="email"] {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 47px !important;
    min-height: 47px !important;
    margin: 0 !important;
    padding: 11px 14px !important;
    float: none !important;
    box-sizing: border-box !important;
    border: 1px solid #ced9e5 !important;
    border-radius: 10px !important;
    background: #fbfdff !important;
    color: #132b46 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
}

html body #content button.vitore-primary-button,
html body #content input.vitore-primary-button {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 47px !important;
    margin: 5px 0 0 !important;
    padding: 11px 20px !important;
    float: none !important;
    position: static !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,#127fca 0%,#17a9dc 100%) !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    box-sizing: border-box !important;
}

html body #content .vitore-auth-divider {
    display: flex !important;
    width: 100% !important;
    margin: 24px 0 20px !important;
    align-items: center !important;
    gap: 12px !important;
    color: #9aa9b8 !important;
    font-size: 11px !important;
    float: none !important;
}

html body #content .vitore-account-option {
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 15px 16px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    float: none !important;
    box-sizing: border-box !important;
    border: 1px solid #e7eef5 !important;
    border-radius: 12px !important;
    background: #f5f9fc !important;
}

html body #content .vitore-account-option > div {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
}

html body #content .vitore-account-option strong,
html body #content .vitore-account-option span {
    display: block !important;
    float: none !important;
}

html body #content a.vitore-secondary-button {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 34px !important;
    padding: 6px 14px !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    border: 1px solid #1687c8 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #1175ae !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

@media (max-width: 820px) {
    html body.client-side #content .vitore-auth-page,
    html body #content .vitore-auth-page {
        padding: 28px 16px 50px !important;
    }
    html body.client-side #content .vitore-auth-shell,
    html body #content .vitore-auth-shell {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        min-height: 0 !important;
    }
    html body #content .vitore-auth-intro,
    html body #content .vitore-auth-card {
        padding: 38px 30px !important;
    }
    html body #content .vitore-auth-intro h1 {
        font-size: 34px !important;
    }
}

@media (max-width: 480px) {
    html body #content .vitore-auth-intro,
    html body #content .vitore-auth-card {
        padding: 30px 22px !important;
    }
    html body #content .vitore-account-option {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    html body #content a.vitore-secondary-button {
        width: 100% !important;
    }
}

/* ========================================================================== 
   VITORE CLIENT PORTAL THEME v7
   Open ticket + client-facing application pages
   ========================================================================== */

:root {
    --vitore-navy-950: #06172b;
    --vitore-navy-900: #08223d;
    --vitore-navy-800: #0b3457;
    --vitore-blue: #1286c5;
    --vitore-cyan: #4fc7f3;
    --vitore-cyan-2: #1fb7e8;
    --vitore-ink: #10253f;
    --vitore-text: #42566f;
    --vitore-muted: #738399;
    --vitore-line: #dfe8f0;
    --vitore-soft: #f4f8fb;
    --vitore-card: #ffffff;
    --vitore-shadow: 0 20px 55px rgba(10, 36, 61, .10);
}

/* Shared client application canvas */
html body.client-side.open-page #content,
html body.client-side.tickets-page #content,
html body.client-side.profile-page #content,
html body.client-side.account-page #content,
html body.client-side.pwreset-page #content,
html body.client-side.faq-page #content {
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100vh - 150px) !important;
    margin: 0 !important;
    padding: 42px 0 64px !important;
    box-sizing: border-box !important;
    background:
        radial-gradient(circle at 90% 5%, rgba(79,199,243,.08), transparent 28%),
        linear-gradient(180deg,#f8fbfd 0%,#fff 44%,#f7fafc 100%) !important;
}

html body.client-side.open-page #content > *:not(.vitore-open-page),
html body.client-side.tickets-page #content > *,
html body.client-side.profile-page #content > *,
html body.client-side.account-page #content > *,
html body.client-side.pwreset-page #content > *,
html body.client-side.faq-page #content > * {
    box-sizing: border-box;
}

/* --- Open ticket ---------------------------------------------------------- */
html body.open-page #content .vitore-open-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 24px 28px 36px !important;
    float: none !important;
    box-sizing: border-box !important;
}

html body.open-page #content .vitore-open-shell {
    display: grid !important;
    grid-template-columns: minmax(300px, .78fr) minmax(540px, 1.42fr) !important;
    width: min(1180px, 100%) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(20,67,103,.10) !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: var(--vitore-shadow) !important;
}

html body.open-page #content .vitore-open-intro {
    position: relative !important;
    display: block !important;
    min-width: 0 !important;
    padding: 54px 48px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 85% 80%, rgba(32,176,227,.22), transparent 34%),
        linear-gradient(145deg,#082b4c 0%,#0b3b64 55%,#0c4b74 100%) !important;
    color: #fff !important;
}

html body.open-page #content .vitore-open-intro:after {
    content: "";
    position: absolute;
    right: -100px;
    bottom: -110px;
    width: 300px;
    height: 300px;
    border: 30px solid rgba(93,204,244,.08);
    border-radius: 50%;
    pointer-events: none;
}

html body #content .vitore-eyebrow {
    margin: 0 0 16px !important;
    color: #43bdea !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
}

html body.open-page #content .vitore-open-intro h1 {
    width: auto !important;
    height: auto !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    float: none !important;
    background: transparent !important;
    color: #fff !important;
    font-size: clamp(34px, 4vw, 48px) !important;
    line-height: 1.08 !important;
    font-weight: 750 !important;
    letter-spacing: -.025em !important;
}

html body.open-page #content .vitore-open-lead {
    margin: 0 0 34px !important;
    color: rgba(255,255,255,.78) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}

html body.open-page #content .vitore-open-feature {
    display: flex !important;
    align-items: flex-start !important;
    gap: 13px !important;
    margin: 0 0 20px !important;
}

html body.open-page #content .vitore-open-feature-icon {
    display: inline-flex !important;
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #55d1ff !important;
    color: #092642 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

html body.open-page #content .vitore-open-feature strong,
html body.open-page #content .vitore-open-feature span {
    display: block !important;
}

html body.open-page #content .vitore-open-feature strong {
    margin: 1px 0 4px !important;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

html body.open-page #content .vitore-open-feature div > span {
    color: rgba(255,255,255,.67) !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
}

html body.open-page #content .vitore-open-card {
    min-width: 0 !important;
    padding: 50px 54px 46px !important;
    background: #fff !important;
}

html body.open-page #content .vitore-open-card-heading {
    margin: 0 0 23px !important;
}

html body.open-page #content .vitore-open-card h2 {
    width: auto !important;
    height: auto !important;
    margin: 0 0 9px !important;
    padding: 0 !important;
    float: none !important;
    background: transparent !important;
    color: var(--vitore-ink) !important;
    font-size: 30px !important;
    line-height: 1.15 !important;
    font-weight: 750 !important;
}

html body.open-page #content .vitore-open-card-heading p {
    margin: 0 !important;
    color: var(--vitore-muted) !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
}

html body.open-page #content .vitore-open-tip {
    display: flex !important;
    align-items: flex-start !important;
    gap: 11px !important;
    margin: 0 0 28px !important;
    padding: 13px 15px !important;
    border: 1px solid #d9ebf6 !important;
    border-radius: 11px !important;
    background: #f2f9fd !important;
    color: #35617c !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
}

html body.open-page #content .vitore-open-tip-icon {
    display: inline-flex !important;
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #42bce9 !important;
    color: #fff !important;
    font-weight: 800 !important;
}

html body.open-page #content form#ticketForm,
html body.open-page #content form.vitore-ticket-form {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.open-page #content #ticketForm table,
html body.open-page #content #ticketForm tbody,
html body.open-page #content #ticketForm tr,
html body.open-page #content #ticketForm td {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

html body.open-page #content #ticketForm table,
html body.open-page #content #ticketForm tbody {
    display: block !important;
    border: 0 !important;
}

html body.open-page #content #ticketForm tr {
    display: block !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
}

html body.open-page #content #ticketForm td {
    display: block !important;
    padding: 0 !important;
    float: none !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--vitore-text) !important;
    font-size: 13px !important;
}

html body.open-page #content #ticketForm label,
html body.open-page #content #ticketForm .required,
html body.open-page #content #ticketForm .client-required {
    color: #29415d !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    font-weight: 750 !important;
}

html body.open-page #content #ticketForm em {
    color: #7d8da0 !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
}

html body.open-page #content #ticketForm input[type="text"],
html body.open-page #content #ticketForm input[type="email"],
html body.open-page #content #ticketForm input[type="tel"],
html body.open-page #content #ticketForm input[type="password"],
html body.open-page #content #ticketForm select,
html body.open-page #content #ticketForm textarea,
html body.open-page #content #ticketForm .select2-container {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html body.open-page #content #ticketForm input[type="text"],
html body.open-page #content #ticketForm input[type="email"],
html body.open-page #content #ticketForm input[type="tel"],
html body.open-page #content #ticketForm input[type="password"],
html body.open-page #content #ticketForm select,
html body.open-page #content #ticketForm textarea {
    margin: 6px 0 0 !important;
    padding: 11px 13px !important;
    border: 1px solid #cbd9e5 !important;
    border-radius: 9px !important;
    background: #fbfdff !important;
    color: #15304d !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    box-shadow: none !important;
}

html body.open-page #content #ticketForm input[type="text"],
html body.open-page #content #ticketForm input[type="email"],
html body.open-page #content #ticketForm input[type="tel"],
html body.open-page #content #ticketForm input[type="password"],
html body.open-page #content #ticketForm select {
    min-height: 44px !important;
}

html body.open-page #content #ticketForm textarea {
    min-height: 125px !important;
    resize: vertical !important;
}

html body.open-page #content #ticketForm input:focus,
html body.open-page #content #ticketForm select:focus,
html body.open-page #content #ticketForm textarea:focus {
    outline: none !important;
    border-color: #27aee0 !important;
    box-shadow: 0 0 0 3px rgba(39,174,224,.12) !important;
}

html body.open-page #content #ticketForm hr {
    height: 1px !important;
    margin: 25px 0 20px !important;
    border: 0 !important;
    background: #e8eef4 !important;
}

html body.open-page #content #ticketForm .form-header h3,
html body.open-page #content #ticketForm .vitore-section-heading h3 {
    margin: 0 0 4px !important;
    color: var(--vitore-ink) !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 750 !important;
}

html body.open-page #content #ticketForm .form-header > div,
html body.open-page #content #ticketForm .vitore-section-heading p {
    margin: 0 !important;
    color: var(--vitore-muted) !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
}

html body.open-page #content #ticketForm .error {
    display: block !important;
    margin-top: 5px !important;
    color: #c43d4d !important;
    font-size: 11px !important;
}

html body.open-page #content #ticketForm font.error:empty,
html body.open-page #content #ticketForm div.error:empty,
html body.open-page #content #ticketForm span.error:empty {
    display: none !important;
}

html body.open-page #content #ticketForm .client-deets {
    display: grid !important;
    grid-template-columns: 110px minmax(0,1fr) !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
    padding: 11px 13px !important;
    border: 1px solid #edf2f6 !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
}

html body.open-page #content #ticketForm .client-deets td {
    width: auto !important;
}

html body.open-page #content #ticketForm .client-deets td:first-child {
    color: #718299 !important;
    font-weight: 700 !important;
}

html body.open-page #content .vitore-form-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 30px 0 0 !important;
    padding: 25px 0 0 !important;
    border-top: 1px solid #e7eef4 !important;
}

html body.open-page #content .vitore-form-actions input {
    display: inline-flex !important;
    width: auto !important;
    min-width: 130px !important;
    min-height: 43px !important;
    margin: 0 !important;
    padding: 10px 19px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

html body.open-page #content .vitore-form-actions .vitore-primary-action {
    flex: 1 1 190px !important;
    border: 0 !important;
    background: linear-gradient(90deg,#127fca,#1db8e6) !important;
    color: #fff !important;
    box-shadow: 0 9px 20px rgba(18,134,197,.20) !important;
}

html body.open-page #content .vitore-form-actions .vitore-secondary-action {
    flex: 0 1 auto !important;
    border: 1px solid #cbd9e5 !important;
    background: #fff !important;
    color: #476079 !important;
}

/* --- Shared application cards/forms -------------------------------------- */
html body.tickets-page #content,
html body.profile-page #content,
html body.account-page #content,
html body.pwreset-page #content,
html body.faq-page #content {
    padding-left: 28px !important;
    padding-right: 28px !important;
}

html body.tickets-page #content > h1,
html body.profile-page #content > h1,
html body.account-page #content > h1,
html body.pwreset-page #content > h1,
html body.faq-page #content > h1,
html body.tickets-page #content > form,
html body.profile-page #content > form,
html body.account-page #content > form,
html body.pwreset-page #content > form,
html body.faq-page #content > .row,
html body.tickets-page #content > .search,
html body.tickets-page #content > table,
html body.tickets-page #content > caption,
html body.tickets-page #content > #ticketInfo,
html body.tickets-page #content > #reply,
html body.tickets-page #content > #ticketThread,
html body.tickets-page #content > .thread,
html body.profile-page #content > p,
html body.account-page #content > p,
html body.pwreset-page #content > p {
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

html body.profile-page #content > h1,
html body.account-page #content > h1,
html body.pwreset-page #content > h1,
html body.faq-page #content h1,
html body.tickets-page #content #tickets-title,
html body.tickets-page #content > h1 {
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--vitore-ink) !important;
    font-size: 30px !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
}

html body.profile-page #content > p,
html body.account-page #content > p,
html body.pwreset-page #content > p {
    color: var(--vitore-muted) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

/* Generic client form cards */
html body.profile-page #content > form,
html body.account-page #content > form,
html body.pwreset-page #content > form,
html body.tickets-page #content > form#reply,
html body.tickets-page #content form[action*="a=edit"],
html body.tickets-page #content > form[action="tickets.php"] {
    padding: 30px 34px !important;
    border: 1px solid #e2ebf2 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 16px 40px rgba(10,36,61,.07) !important;
}

html body.profile-page #content form table,
html body.account-page #content form table,
html body.tickets-page #content form table {
    width: 100% !important;
    max-width: none !important;
}

html body.profile-page #content form td,
html body.account-page #content form td,
html body.tickets-page #content form td {
    padding: 8px 5px !important;
    color: var(--vitore-text) !important;
    font-size: 13px !important;
}

html body.profile-page #content form input[type="text"],
html body.profile-page #content form input[type="password"],
html body.profile-page #content form input[type="email"],
html body.profile-page #content form select,
html body.profile-page #content form textarea,
html body.account-page #content form input[type="text"],
html body.account-page #content form input[type="password"],
html body.account-page #content form input[type="email"],
html body.account-page #content form select,
html body.account-page #content form textarea,
html body.pwreset-page #content form input[type="text"],
html body.pwreset-page #content form input[type="password"],
html body.tickets-page #content form input[type="text"],
html body.tickets-page #content form input[type="password"],
html body.tickets-page #content form select,
html body.tickets-page #content form textarea {
    min-height: 42px !important;
    padding: 10px 12px !important;
    border: 1px solid #ccd9e4 !important;
    border-radius: 9px !important;
    background: #fbfdff !important;
    color: var(--vitore-ink) !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

html body.profile-page #content form input[type="submit"],
html body.account-page #content form input[type="submit"],
html body.pwreset-page #content form input[type="submit"],
html body.tickets-page #content form input[type="submit"] {
    min-height: 42px !important;
    padding: 9px 21px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,#127fca,#1db8e6) !important;
    color: #fff !important;
    font-weight: 800 !important;
}

html body.profile-page #content form input[type="reset"],
html body.profile-page #content form input[type="button"],
html body.account-page #content form input[type="button"],
html body.pwreset-page #content form input[type="button"],
html body.tickets-page #content form input[type="reset"],
html body.tickets-page #content form input[type="button"] {
    min-height: 42px !important;
    padding: 9px 19px !important;
    border: 1px solid #ccd9e4 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #476079 !important;
    font-weight: 750 !important;
}

/* Ticket list */
html body.tickets-page #content .search.well {
    padding: 18px 20px !important;
    border: 1px solid #e2ebf2 !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: 0 12px 30px rgba(10,36,61,.06) !important;
}

html body.tickets-page #content #ticketTable {
    width: min(1140px,100%) !important;
    overflow: hidden !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #e0e9f0 !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: 0 15px 36px rgba(10,36,61,.06) !important;
}

html body.tickets-page #content #ticketTable thead th {
    padding: 13px 15px !important;
    border: 0 !important;
    border-bottom: 1px solid #dce7ef !important;
    background: #eff6fa !important;
    color: #52677d !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

html body.tickets-page #content #ticketTable tbody td {
    padding: 14px 15px !important;
    border: 0 !important;
    border-bottom: 1px solid #edf2f6 !important;
    background: #fff !important;
    color: #42566f !important;
    font-size: 12px !important;
}

html body.tickets-page #content #ticketTable tbody tr:hover td {
    background: #f5fbfe !important;
}

html body.tickets-page #content #ticketTable a {
    color: #147ead !important;
    font-weight: 700 !important;
}

html body.tickets-page #content .states a.state {
    display: inline-flex !important;
    padding: 6px 11px !important;
    border-radius: 999px !important;
    color: #557087 !important;
}

html body.tickets-page #content .states a.state.active {
    background: #e5f5fc !important;
    color: #117cb4 !important;
}

/* Ticket detail */
html body.tickets-page #content #ticketInfo {
    width: min(1140px,100%) !important;
    margin-top: 20px !important;
    border-spacing: 14px 0 !important;
}

html body.tickets-page #content #ticketInfo .infoTable,
html body.tickets-page #content #ticketInfo .custom-data {
    overflow: hidden !important;
    border: 1px solid #e2ebf2 !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: 0 10px 26px rgba(10,36,61,.05) !important;
}

html body.tickets-page #content #ticketInfo .headline {
    padding: 11px 13px !important;
    border: 0 !important;
    background: #edf7fb !important;
    color: #1f6489 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
}

html body.tickets-page #content #ticketInfo th,
html body.tickets-page #content #ticketInfo td {
    padding: 9px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid #edf2f6 !important;
    background: #fff !important;
    color: #435972 !important;
    font-size: 12px !important;
}

html body.tickets-page #content a.action-button {
    display: inline-flex !important;
    min-height: 36px !important;
    padding: 7px 13px !important;
    align-items: center !important;
    border: 1px solid #cbd9e5 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #187cac !important;
    font-size: 11px !important;
    font-weight: 750 !important;
}

html body.tickets-page #content #reply h2 {
    color: var(--vitore-ink) !important;
    font-size: 22px !important;
    font-weight: 750 !important;
}

html body.tickets-page #content #reply textarea,
html body.tickets-page #content #reply .redactor-box {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Knowledge base */
html body.faq-page #content .row {
    display: flex !important;
    gap: 24px !important;
    width: min(1140px,100%) !important;
}

html body.faq-page #content .span8 {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 26px 30px !important;
    border: 1px solid #e2ebf2 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 13px 34px rgba(10,36,61,.06) !important;
}

html body.faq-page #content .span4 {
    flex: 0 0 280px !important;
    width: 280px !important;
}

html body.faq-page #content .sidebar {
    overflow: hidden !important;
    border: 1px solid #e2ebf2 !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: 0 13px 34px rgba(10,36,61,.05) !important;
}

html body.faq-page #content .sidebar .header,
html body.faq-page #content .sidebar strong {
    color: var(--vitore-ink) !important;
    font-weight: 750 !important;
}

html body.faq-page #content #faq ol {
    margin: 20px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

html body.faq-page #content #faq li {
    margin: 0 0 9px !important;
    padding: 11px 13px !important;
    border: 1px solid #e8eef4 !important;
    border-radius: 9px !important;
    background: #f9fbfd !important;
}

html body.faq-page #content #faq a {
    color: #147ead !important;
    font-weight: 700 !important;
}

/* Alerts */
html body.client-side #content #msg_info,
html body.client-side #content #msg_notice,
html body.client-side #content #msg_warning,
html body.client-side #content #msg_error,
html body.client-side #container > .notice_bar,
html body.client-side #container > .warning_bar,
html body.client-side #container > .error_bar {
    border-radius: 10px !important;
}

/* Responsive client portal */
@media (max-width: 920px) {
    html body.open-page #content .vitore-open-shell {
        grid-template-columns: 1fr !important;
    }
    html body.open-page #content .vitore-open-intro,
    html body.open-page #content .vitore-open-card {
        padding: 38px 34px !important;
    }
    html body.faq-page #content .row {
        flex-direction: column !important;
    }
    html body.faq-page #content .span4 {
        flex: 1 1 auto !important;
        width: 100% !important;
    }
    html body.tickets-page #content #ticketTable {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 640px) {
    html body.client-side.open-page #content,
    html body.client-side.tickets-page #content,
    html body.client-side.profile-page #content,
    html body.client-side.account-page #content,
    html body.client-side.pwreset-page #content,
    html body.client-side.faq-page #content {
        padding-top: 20px !important;
        padding-bottom: 38px !important;
    }
    html body.open-page #content .vitore-open-page,
    html body.tickets-page #content,
    html body.profile-page #content,
    html body.account-page #content,
    html body.pwreset-page #content,
    html body.faq-page #content {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    html body.open-page #content .vitore-open-intro,
    html body.open-page #content .vitore-open-card {
        padding: 30px 22px !important;
    }
    html body.open-page #content .vitore-open-intro h1 {
        font-size: 34px !important;
    }
    html body.open-page #content .vitore-form-actions {
        flex-direction: column !important;
    }
    html body.open-page #content .vitore-form-actions input {
        width: 100% !important;
    }
    html body.profile-page #content > form,
    html body.account-page #content > form,
    html body.pwreset-page #content > form,
    html body.tickets-page #content > form#reply {
        padding: 22px 18px !important;
        border-radius: 14px !important;
    }
    html body.tickets-page #content #ticketInfo,
    html body.tickets-page #content #ticketInfo > tbody,
    html body.tickets-page #content #ticketInfo > tbody > tr,
    html body.tickets-page #content #ticketInfo > tbody > tr > td {
        display: block !important;
        width: 100% !important;
    }
}