@charset "utf-8";
/* CSS Document */
/*
/*      STAFF - desktop
*/

/* ============================================================
 * osAwesome Admin Design System
 * Scoped to #content.theme. Do not weaken specificity.
 * Token reference: vault/Work/osTicket Awesome/osa-admin-design-system.md
 * ============================================================ */

#content.theme {
    /* --- Greys (text + chrome) -------------------------------- */
    --color-text-heading:      #777777;
    --color-text-body:         #4c5156;
    --color-text-muted:        #6c6c6c;
    --color-text-subtle:       #6a737d;
    --color-text-faint:        #999999;
    --color-text-inactive-tab: #444444;

    /* --- Backgrounds ------------------------------------------ */
    --color-bg-page:           #f3f3f5;
    --color-bg-panel:          #ffffff;
    --color-bg-input:          #ffffff;
    --color-bg-tab-active:     #ffffff;
    --color-bg-tab-inactive:   rgba(251, 251, 251, 0.5);
    --color-bg-warning-bar:    #000000;

    /* --- Borders ---------------------------------------------- */
    --color-border-default:    #e1e4e8;
    --color-border-input:      #d1d5da;
    --color-border-focus:      #128dbe;

    /* --- Brand / accent --------------------------------------- */
    --color-accent-link:       #128dbe;
    --color-accent-active-tab: #184e81;
    --color-accent-info:       #1f4f7a;

    /* --- Semantic --------------------------------------------- */
    --color-success-bg:         #d0e9c6;
    --color-success-bg-hover:   #c1e2b3;
    --color-success-fg:         #3c763d;
    --color-success-fg-strong:  #5a9e2f;
    --color-success-pill-bg:    #eaf3de;
    --color-danger-fg:          #c9484c;
    --color-danger-bg-hover:    #c9484c;
    --color-warning-bg:         #f0f0f0;

    /* --- Greys (button + chrome roles) ------------------------ */
    --color-grey-light:         #dcdfe2;
    --color-grey-light-hover:   #c8cdd2;
    --color-grey-mid-hover:     #c9cdd0;
    --color-grey-fg:            #6d7989;
    --color-grey-fg-strong:     #515d6d;
    --color-grey-fg-darker:     #343a42;

    /* --- Slate (Solid-action) --------------------------------- */
    --color-slate-bg:           #8591a4;
    --color-slate-bg-hover:     #73808f;

    /* --- Dark Mode feature section ---------------------------- */
    /* Left edge matches lucario.css (CodeMirror dark theme) so the
       section reads as an extension of the existing CSS editor. */
    --color-dark-mode-bg-left:    #2b3e50;
    --color-dark-mode-bg-right:   #0d1117;
    --color-dark-mode-text-heading: #e8eaed;
    --color-dark-mode-text-body:    #d8dde2;

    /* --- Spacing (4/8/12/16/24/32/48 — six-step scale) -------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    /* --- Border radius ---------------------------------------- */
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;

    /* --- Transitions ------------------------------------------ */
    --transition-fast: 120ms ease-out;
    --transition-base: 180ms ease-out;
    --transition-slow: 280ms ease-out;
}

/* DS rules below */

/* --- Toggle switch -----------------------------------------------
 * Flat 36×20px track, link-blue when on. Replaces the legacy
 * skeuomorphic green pill inherited from input.switch global rules.
 * Scope: panel only. Toggles in System Settings, Tickets, etc.
 * keep their osTicket rendering. */
#content.theme input.switch:empty ~ label {
    width: 36px;
    height: 20px;
    line-height: 20px;
    text-indent: 0;
    margin: var(--space-2) 0;
    float: none;
    display: inline-block;
    vertical-align: middle;
}
#content.theme input.switch:empty ~ label::before {
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background-color: #d6d6d6;
    box-shadow: none;
    content: '';
    text-indent: 0;
}
#content.theme input.switch:empty ~ label::after {
    width: 15px;
    height: 15px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid var(--color-border-input);
    box-shadow: none;
    top: 2px;
    left: 2px;
    transition: transform var(--transition-base), background-color var(--transition-base);
}
#content.theme input.switch:checked ~ label::before {
    background-color: var(--nav-bar-bg) !important;
}
#content.theme input.switch:checked ~ label::after {
    transform: translateX(16px);
    margin-left: 0;
}
#content.theme input.switch:focus ~ label::before {
    box-shadow: 0 0 0 3px rgba(18, 141, 190, 0.15);
}
/* Dark Mode toggle (Behavior tab) — bespoke color treatment so the
   toggle visually previews its own mode: dark track + near-black pip
   when off, navy track + bright blue pip when on (matching the dark-
   mode app palette the toggle activates). */
#content.theme .osta-dark-mode-toggle-wrap input.switch:empty ~ label::before {
    background-color: #666666;
}
#content.theme .osta-dark-mode-toggle-wrap input.switch:empty ~ label::after {
    background: #2c2c2c;
    border: 1px solid #2c2c2c;
}
#content.theme .osta-dark-mode-toggle-wrap input.switch:checked ~ label::before {
    background-color: #2d3c4f !important;
}
.dark-mode #content.theme .osta-dark-mode-toggle-wrap input.switch:empty ~ label::after {
    background: #578ccb;
    border: 1px solid #30363d;
}
#content.theme input.switch:disabled ~ label,
#content.theme input.switch[disabled] ~ label {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Button variants (5 canonical) ------------------------------
 * Primary  · Secondary · Ghost · Ghost-danger · Solid-action
 * Activate buttons (.osta-license-btn-primary) map to Primary
 * (Stevland call 2026-05-08); help-link buttons (.osta-license-link-btn)
 * map to Ghost (Stevland call 2026-05-08). */

/* Primary — Save Changes (form submit) + Activate (License CTA) */
#content.theme input.button[type="submit"],
#content.theme button[type="submit"],
#content.theme .osta-license-btn-primary {
    background-color: var(--color-success-bg);
    color: var(--color-success-fg);
    border: 1px solid var(--color-success-bg-hover);
    border-radius: var(--radius-md);
    padding: 10px 24px;
    font-size: 13.3px;
    font-weight: 700;
    letter-spacing: 0.15px;
    text-shadow: none;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
    cursor: pointer;
}
#content.theme input.button[type="submit"]:hover,
#content.theme button[type="submit"]:hover,
#content.theme .osta-license-btn-primary:hover {
    background-color: var(--color-success-bg-hover);
    color: var(--color-success-fg);
    border-color: #b3d6a3;
}
#content.theme input.button[type="submit"]:focus,
#content.theme button[type="submit"]:focus,
#content.theme .osta-license-btn-primary:focus {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}
#content.theme input.button[type="submit"]:disabled,
#content.theme .osta-license-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Secondary — Reset Changes */
#content.theme input.button[type="reset"] {
    background-color: var(--color-grey-light);
    color: var(--color-grey-fg-strong);
    border: 1px solid var(--color-grey-light-hover);
    border-radius: var(--radius-md);
    padding: 10px 24px;
    font-size: 13.3px;
    font-weight: 700;
    letter-spacing: 0.15px;
    text-shadow: none;
    transition: background-color var(--transition-fast);
    cursor: pointer;
}
#content.theme input.button[type="reset"]:hover {
    background-color: var(--color-grey-light-hover);
    color: var(--color-grey-fg-strong);
}
#content.theme input.button[type="reset"]:focus {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* Ghost — Check / Tools row / Safe Mode / Help-link buttons */
#content.theme .osta-license-btn-secondary,
#content.theme #diagnostics .osta-diagnostics-tools .osta-action-btn,
#content.theme #diagnostics .osta-diagnostics-safemode .osta-action-btn,
#content.theme .osta-license-link-btn {
    background-color: var(--color-grey-light);
    color: var(--color-grey-fg);
    border: none;
    border-radius: var(--radius-md);
    /* padding: var(--space-2) var(--space-4); */
    padding: 0 16px !important;
    height: 46px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
#content.theme .osta-license-btn-secondary:hover,
#content.theme #diagnostics .osta-diagnostics-tools .osta-action-btn:hover,
#content.theme #diagnostics .osta-diagnostics-safemode .osta-action-btn:hover,
#content.theme .osta-license-link-btn:hover {
    background-color: var(--color-grey-mid-hover);
    color: var(--color-grey-fg-darker);
}
#content.theme .osta-license-btn-secondary:focus,
#content.theme #diagnostics .osta-diagnostics-tools .osta-action-btn:focus,
#content.theme #diagnostics .osta-diagnostics-safemode .osta-action-btn:focus,
#content.theme .osta-license-link-btn:focus {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* Ghost-danger — Revoke */
#content.theme .osta-license-btn-ghost-danger {
    background-color: #ebafaf;
    color: #885a59;
    border: initial;
    border-radius: var(--radius-md);
    padding: 0 16px !important;
    height: 46px;
    font-size: 12px;
    font-weight: 600;
    line-height: initial;
    letter-spacing: 0.15px;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
#content.theme .osta-license-btn-ghost-danger:hover {
    background-color: #e6696c;
    color: #ffffff;
    /* border-color: var(--color-danger-bg-hover); */
}
#content.theme .osta-license-btn-ghost-danger:focus {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* --- Form inputs (text + color picker) --------------------------
 * Body grey text (was pure black), 1px input border, blue focus
 * ring. Color picker hex input + swatch addon joined via -1px
 * margin per spec § Form input. */
#content.theme input[type="text"],
#content.theme input[type="email"],
#content.theme input[type="password"],
#content.theme input[type="url"],
#content.theme input.form-control,
#content.theme textarea {
    background-color: var(--color-bg-input);
    color: var(--color-text-body);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 14px;
    font-weight: 400;
    height: 32px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
#content.theme textarea {
    height: auto;
    min-height: 64px;
    line-height: 1.5;
}
#content.theme input.form-control.input-lg {
    height: 40px;
    font-size: 14px;
    padding: var(--space-2) var(--space-3);
}
#content.theme input[type="text"]:focus,
#content.theme input[type="email"]:focus,
#content.theme input[type="password"]:focus,
#content.theme input[type="url"]:focus,
#content.theme input.form-control:focus,
#content.theme textarea:focus {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px rgba(18, 141, 190, 0.15);
    outline: none;
}
#content.theme input[type="text"]:disabled,
#content.theme input.form-control:disabled,
#content.theme input[type="text"][readonly],
#content.theme input.form-control[readonly] {
    background-color: var(--color-bg-page);
    color: var(--color-text-faint);
    cursor: not-allowed;
}
#content.theme input::placeholder,
#content.theme textarea::placeholder {
    color: var(--color-text-faint);
}

/* --- File upload — styled label wrapper -------------------------
 * Native input is sr-hidden; the label is the click target. The
 * label uses the Ghost button visual treatment plus a sibling span
 * for the selected filename (caption text token). */
#content.theme .osta-file-upload {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    margin: 0;
}
#content.theme .osta-file-upload input[type="file"] {
    /* sr-only — visually hidden, still focusable / clickable via label */
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
#content.theme .osta-file-upload-btn {
    /* Ghost button visual treatment */
    display: inline-block;
    background-color: var(--color-grey-light);
    color: var(--color-grey-fg);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15px;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
#content.theme .osta-file-upload:hover .osta-file-upload-btn {
    background-color: var(--color-grey-mid-hover);
    color: var(--color-grey-fg-darker);
}
#content.theme .osta-file-upload input[type="file"]:focus + .osta-file-upload-btn {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}
#content.theme .osta-file-upload-name {
    color: var(--color-text-muted);
    font-size: 14px;
    max-width: 280px;
    margin: 0 0 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Reusable tab section primitive ------------------------------
 * Replaces 2010-era table-for-layout markup. Three pieces:
 *   .osta-tab-section          — outer wrapper, vertical rhythm
 *   .osta-tab-section-heading  — full-width row, h2 left, optional
 *                                .osta-tab-section-toggle right
 *   .osta-tab-section-body     — content with 26px h-margins
 * Used by Appearance starting in -106; intended for Branding,
 * Login Page, Custom CSS as those tables get refactored. */
.osta-tab-section {
    margin-top: 35px;
}
.osta-tab-section:first-of-type {
    margin-top: 0;
}
#content.theme .osta-tab-section-heading {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    /* margin-bottom: var(--space-5); */
}
#content.theme .osta-tab-section-heading h2 {
    margin: 0;
    flex: 1 1 auto;
}
/* Optional inline icon inside a section heading. Each SVG self-declares
   `fill="currentColor"` (MDI fill-based) or `fill="none" stroke="currentColor"`
   (Lucide-style stroke), so the class only controls sizing/position.
   Scoped broadly to `#content.theme h2 .osta-section-icon` so it works
   in any h2 context (the standard .osta-tab-section-heading and one-off
   wrappers like Custom CSS's #osta-settings-title). */
#content.theme h2 .osta-section-icon {
    width: 22px;
    height: 22px;
    vertical-align: middle;
    margin-right: 0px;
    display: inline-block;
    position: relative;
    top: -3px;
}
/* Smaller variant for card-title context (e.g., Custom Print Logo
   title inside a Logo Options card — `.title` is smaller than an h2). */
#content.theme .title .osta-section-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    top: -2px;
}
#content.theme .osta-tab-section-toggle {
    flex: 0 0 auto;
}
/* Sample-logo preview toggle — swaps customer's configured logo for the
   theme-color-aware osTA SVG while they're on the Appearance tab, so
   palette evaluation isn't distorted by a logo that doesn't recolor.
   Only rendered when logo-options is custom-text or custom-logo. */
#content.theme .osta-sample-logo-control {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    /* background: var(--color-bg-page); */
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
}
#content.theme .osta-sample-logo-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
#color-theme input.switch:empty ~ label[for="osta-sample-logo-toggle"] {
    top: 0px;
}
#color-theme .osta-sample-logo-control + .osta-tab-section {
    margin-top: 24px;
}
#content.theme .osta-sample-logo-label {
    font-weight: 600;
    font-size: 14px;
}
#content.theme .osta-sample-logo-hint {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-left: -3px;
}
/* Body class applied by theme.inc.php JS when the toggle is on. Overrides
   logo-options-{text,image}.css to reveal the default-logo SVG instead.
   Removed automatically on PJAX navigate-away from theme.php. */
body.osta-sample-logo #header-text,
body.osta-sample-logo #header-image {
    display: none !important;
}
body.osta-sample-logo #header-default {
    display: inline-block !important;
}
/* Section-heading reset button — small ghost button that sits between the
   h2 and the section toggle. Currently only used by Create a Custom Theme
   to restore default colour values; designed to be reusable on any section
   that wants a "revert to defaults" affordance. */
#content.theme .osta-tab-section-heading .osta-reset-btn {
    margin-left: auto;
}
#content.theme .osta-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
#content.theme .osta-reset-btn:hover {
    color: #DC2626;
    border-color: #DC2626;
}
#content.theme .osta-reset-btn:hover svg {
    fill: #DC2626;
}
#content.theme .osta-reset-btn svg {
    width: 14px;
    height: 14px;
}
#content.theme .osta-tab-section-body {
    margin: 26px;
    display: flow-root;
    /* background: #e5e3e3; */
}
#content.theme .osta-tab-section-body.custom {
    margin: 26px 26px 11px 26px;
}

/* --- Backdrop "Use Solid Color" disable state -------------------
 * Replaces the legacy `table[style="display: none;"]` hack
 * (CSS that re-showed jQuery-hidden tables at 50% opacity).
 * Driven by inline JS in theme.inc.php #backdrops tab — toggles
 * `.is-disabled` on `.osta-backdrop-toggle` elements when the
 * Login Background segmented radio is set to "Use Solid Color".
 * Intent: signal "still here, just inactive" without removing
 * options from view. */
#content.theme .osta-backdrop-toggle.is-disabled {
    opacity: .5;
    pointer-events: none;
}

/* --- Dark Mode contextual note (Appearance tab) -----------------
 * Server-side rendered when the current staff has dark_mode='on'.
 * Force block-flow so it falls below the "Pick a Color Theme"
 * heading+toggle row instead of inline-blocking alongside it. This
 * also normalizes positioning across full-refresh vs PJAX swaps
 * (where body class state can differ and the legacy CSS toggles
 * between display:none and display:inline-block based on
 * .dark-mode.theme-page presence). */
#content.theme #color-theme #dark-mode-message {
    display: block !important;
    clear: both;
}

/* --- 8-tab strip — collapse labels to icon-only at narrow widths -
 * Matches osTicket admin convention (`font-size: 0` on the li hides
 * the label text while icon-font glyphs render at their own size).
 * Core uses 830px as the breakpoint; with 8 tabs we need to fire
 * earlier so the strip stays in one row. The legacy override block
 * was retired in favor of the `osta-tabs` rebuild below — a tight,
 * single-source-icon implementation scoped to ul.osta-tabs so other
 * tabbed pages in osTicket (Company, Tickets, Tasks, Users) are
 * unaffected. */

/* ============================================================
   osAwesome Settings — tab strip (rebuilt)
   Inline-SVG icons from Pictogrammers MDI (single source, no font
   alignment quirks). All styling lives in this block; copyable
   verbatim if/when other tabbed pages get the same treatment.
   ============================================================ */
#content.theme ul.osta-tabs {
    list-style: none;
    margin: 14px 0 0px 14px;
    padding: 0px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid var(--color-border-default);
    position: relative;
    z-index: 1;
}
#content.theme ul.osta-tabs li {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    list-style: none;
    min-width: 0;
    top: -4px;
    height: 33px !important;
}
#content.theme ul.osta-tabs li.active {
    background: #fff;
    border-top: 3px solid #7eb900;
    border-bottom: 3px solid #ffffff;
    top: -7px;
}
#content.theme ul.osta-tabs li a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px 12px;
    color: var(--color-text-body);
    background: transparent;
    text-decoration: none;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    box-shadow: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}
#content.theme ul.osta-tabs .osta-tab-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: currentColor;
    display: block;
}
/* i18n density tiers — keep the 8-tab strip on one row in verbose languages
   without cramping short ones. The tier class is chosen server-side in
   theme.inc.php from the summed length of the translated tab labels, so
   English and short scripts (CJK, Arabic, Hebrew) keep the roomy 18px default
   and only longer languages tighten. tight = moderate (Italian/German-class),
   tighter = very long (Spanish/Portuguese/Greek/Russian-class). */
#content.theme ul.osta-tabs.osta-tabs-tight li a {
    padding: 8px 10px 12px;
}
#content.theme ul.osta-tabs.osta-tabs-tighter li a {
    padding: 8px 3px 12px;
}
#content.theme ul.osta-tabs.osta-tabs-tight,
#content.theme ul.osta-tabs.osta-tabs-tighter {
    gap: 4px;
}
/* Mobile/narrow: collapse to icon-only by hiding the label.
   Standard osTA breakpoint of 1200px so 8 tabs still fit one row. */
@media (max-width: 1200px) {
    #content.theme ul.osta-tabs li a {
        padding: 8px 12px 0px;
    }
    #content.theme ul.osta-tabs .osta-tab-label {
        display: none;
    }
}

/* --- Toggle card pattern -----------------------------------------
 * Bordered card containing icon + label + optional caption + switch.
 * Used by Behavior tab Staff Portal (2-cell grid) and Client Portal
 * (single card max-width 50%). Foundational for Section 5 of the
 * -106 final pass. */
#content.theme .osta-toggle-card {
    position: relative;
    z-index: 100 !important;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-panel);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
#content.theme .osta-toggle-card .osta-toggle-card-icon {
    flex: 0 0 auto;
    line-height: 1;
}
#content.theme .osta-toggle-card .osta-toggle-card-icon img {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
}
#content.theme .osta-toggle-card .osta-toggle-card-icon i {
    font-size: 24px;
    color: var(--color-accent-link);
    line-height: 1;
}
/* Custom lifebuoy icon for "Get Support" buttons (License tab +
   Diagnostics Tools). Carried over from 1.18.3-4. */
i.icon-copy-support {
    display: inline-block;
    width: 20px;
    height: 20px;
    top: 5px !important;
    margin: -5px 6px 0 0;
    padding: 0px;
    background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%236d7989' d='M19.79%2C15.41C20.74%2C13.24 20.74%2C10.75 19.79%2C8.59L17.05%2C9.83C17.65%2C11.21 17.65%2C12.78 17.06%2C14.17L19.79%2C15.41M15.42%2C4.21C13.25%2C3.26 10.76%2C3.26 8.59%2C4.21L9.83%2C6.94C11.22%2C6.35 12.79%2C6.35 14.18%2C6.95L15.42%2C4.21M4.21%2C8.58C3.26%2C10.76 3.26%2C13.24 4.21%2C15.42L6.95%2C14.17C6.35%2C12.79 6.35%2C11.21 6.95%2C9.82L4.21%2C8.58M8.59%2C19.79C10.76%2C20.74 13.25%2C20.74 15.42%2C19.78L14.18%2C17.05C12.8%2C17.65 11.22%2C17.65 9.84%2C17.06L8.59%2C19.79M12%2C2A10%2C10 0 0%2C1 22%2C12A10%2C10 0 0%2C1 12%2C22A10%2C10 0 0%2C1 2%2C12A10%2C10 0 0%2C1 12%2C2M12%2C8A4%2C4 0 0%2C0 8%2C12A4%2C4 0 0%2C0 12%2C16A4%2C4 0 0%2C0 16%2C12A4%2C4 0 0%2C0 12%2C8Z' /%3E %3C/svg%3E");
}

/* Custom bug icon for "Show PHP Errors" toggle card —
   carried over from 1.18.3-4. Inline SVG via background-image. */
i.icon-bug {
    display: inline-block;
    width: 28px;
    height: 28px;
    top: 5px;
    left: -4px;
    margin-right: 5px;
    padding: 0;
    background-size: 30px 30px !important;
    background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24%3B' xml:space='preserve'%3E %3Cstyle type='text/css'%3E .st0%7Bfill:%23777777%3B%7D %3C/style%3E %3Cg%3E %3Cpath class='st0' d='M11.4%2C22.1c-1.7-0.4-2.8-1.4-3.5-2.9c-0.1-0.3-0.2-0.5-0.3-0.8c0-0.3-0.2-0.4-0.5-0.4c-0.1%2C0-0.2%2C0-0.3%2C0 c0%2C0.5%2C0%2C0.9%2C0%2C1.4c0%2C0.2-0.1%2C0.3-0.2%2C0.4c-0.8%2C0.7-1.5%2C1.3-2.3%2C1.9c-0.2%2C0.2-0.4%2C0.2-0.6%2C0c-0.2-0.2-0.1-0.5%2C0.1-0.6 c0.7-0.6%2C1.3-1.1%2C2-1.7C6%2C19.3%2C6%2C19.1%2C6.1%2C18.9c0-0.6%2C0-1.1%2C0-1.7c0.5%2C0%2C0.9%2C0%2C1.4%2C0c0-0.6%2C0-1.1%2C0-1.7c-0.5%2C0-1%2C0-1.5%2C0 c-0.1%2C0-0.2%2C0.1-0.3%2C0.2c-0.4%2C0.6-0.9%2C1.1-1.3%2C1.7c-0.2%2C0.2-0.3%2C0.4-0.6%2C0.2c-0.2-0.2-0.2-0.4%2C0-0.6c0.5-0.7%2C1.1-1.4%2C1.6-2 c0.1-0.1%2C0.2-0.2%2C0.4-0.2c0.6%2C0%2C1.1%2C0%2C1.7%2C0c0-0.6%2C0-1.1%2C0-1.7c0%2C0-0.1%2C0-0.1%2C0c-0.6%2C0.1-1-0.2-1.4-0.5c-0.5-0.5-1-0.8-1.4-1.3 c-0.1-0.1-0.2-0.3-0.2-0.5c0-0.3%2C0.4-0.4%2C0.6-0.2c0.5%2C0.5%2C1.1%2C0.9%2C1.6%2C1.4C7%2C12.2%2C7%2C12.2%2C7.5%2C12.1c0-0.4%2C0-0.9%2C0-1.3 c3.1%2C0%2C6.1%2C0%2C9.2%2C0c0%2C0.4%2C0%2C0.9%2C0%2C1.3c0.3%2C0.1%2C0.5%2C0%2C0.8-0.2c0.5-0.5%2C1-0.9%2C1.6-1.4c0.2-0.2%2C0.4-0.3%2C0.6%2C0c0.2%2C0.2%2C0.1%2C0.4-0.1%2C0.6 c-0.7%2C0.6-1.3%2C1.2-2%2C1.7C17.4%2C13%2C17%2C13%2C16.7%2C13c0%2C0.5%2C0%2C1%2C0%2C1.6c0.4%2C0%2C0.9%2C0%2C1.3%2C0c0.4%2C0%2C0.6%2C0.1%2C0.9%2C0.4c0.5%2C0.6%2C1%2C1.2%2C1.4%2C1.9 c0.2%2C0.2%2C0.2%2C0.5%2C0%2C0.6c-0.2%2C0.2-0.4%2C0-0.6-0.2c-0.4-0.6-0.9-1.1-1.4-1.7c-0.1-0.1-0.3-0.2-0.5-0.2c-0.4%2C0-0.8%2C0-1.2%2C0 c0%2C0.6%2C0%2C1.1%2C0%2C1.7c0.4%2C0%2C0.9%2C0%2C1.3%2C0c0%2C0.6%2C0%2C1.2%2C0%2C1.7c0%2C0.3%2C0.1%2C0.4%2C0.3%2C0.6c0.6%2C0.5%2C1.3%2C1%2C1.9%2C1.6c0.1%2C0.1%2C0.2%2C0.3%2C0.2%2C0.4 c0%2C0.1-0.1%2C0.3-0.2%2C0.3c-0.1%2C0.1-0.3%2C0-0.4%2C0c-0.8-0.7-1.7-1.4-2.5-2.1c-0.1-0.1-0.1-0.2-0.1-0.3c0-0.4%2C0-0.9%2C0-1.4 c-0.2%2C0-0.4%2C0-0.7%2C0c-0.5%2C2.1-1.6%2C3.5-3.8%2C4.1c0-0.2%2C0-0.3%2C0-0.4c0-2.2%2C0-4.5%2C0-6.7c0-0.3-0.1-0.6-0.3-0.8c-0.5-0.3-1%2C0-1%2C0.6 c0%2C0.6%2C0%2C1.2%2C0%2C1.9c0%2C1.7%2C0%2C3.3%2C0%2C5C11.4%2C21.8%2C11.4%2C21.9%2C11.4%2C22.1z'/%3E %3Cpath class='st0' d='M15.4%2C9.8c-2.2%2C0-4.4%2C0-6.6%2C0c0-1.1%2C0.5-2%2C1.3-2.7C10%2C6.9%2C9.9%2C6.6%2C9.8%2C6.4C9.1%2C4.9%2C8.1%2C3.6%2C6.7%2C2.8 C6.4%2C2.7%2C6.3%2C2.5%2C6.5%2C2.2C6.6%2C2%2C6.8%2C2%2C7.1%2C2.1c1.2%2C0.7%2C2.1%2C1.6%2C2.8%2C2.7c0.4%2C0.6%2C0.7%2C1.2%2C1%2C1.9c0.7-0.3%2C1.5-0.3%2C2.3%2C0 c0.1-0.1%2C0.1-0.2%2C0.2-0.3c0.7-1.6%2C1.7-2.9%2C3.1-3.9c0.2-0.1%2C0.3-0.2%2C0.5-0.3c0.2-0.1%2C0.4-0.1%2C0.6%2C0.1c0.1%2C0.2%2C0%2C0.4-0.2%2C0.6 c-0.3%2C0.2-0.5%2C0.3-0.8%2C0.5c-1.2%2C0.9-1.9%2C2.1-2.6%2C3.5C13.9%2C7%2C14%2C7%2C14.1%2C7.1c0.8%2C0.6%2C1.2%2C1.4%2C1.3%2C2.5C15.4%2C9.6%2C15.4%2C9.7%2C15.4%2C9.8 C15.4%2C9.7%2C15.4%2C9.7%2C15.4%2C9.8z'/%3E %3C/g%3E %3C/svg%3E ");
}
#content.theme .osta-toggle-card .osta-toggle-card-body {
    flex: 1 1 auto;
    min-width: 0;
}
#content.theme .osta-toggle-card .osta-toggle-card-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-body);
    line-height: 1.3;
}
#content.theme .osta-toggle-card .osta-toggle-card-caption {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: var(--space-1);
    line-height: 1.45;
}
#content.theme .osta-toggle-card .osta-toggle-card-switch {
    flex: 0 0 auto;
    margin-left: auto;
}

/* Multi-toggle 2-cell grid (Staff Portal) */
#content.theme .osta-toggle-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

/* Single-toggle context (Client Portal) — half width, left-aligned */
#content.theme .osta-section-single-toggle .osta-toggle-card {
    max-width: 491px;
}

@media (max-width: 720px) {
    #content.theme .osta-toggle-grid {
        grid-template-columns: 1fr;
    }
    #content.theme .osta-section-single-toggle .osta-toggle-card {
        max-width: 100%;
    }
}

/* --- Dark Mode featured section ---------------------------------
 * Terminal-blue gradient + sparse static stars + h2 + 3 paragraphs
 * + standard DS toggle. Discrete <section> so reorder is one move
 * in theme.inc.php. */
#content.theme .osta-dark-mode-feature {
    position: relative;
    overflow: hidden;
    /* margin: var(--space-6) 0; */
    padding: var(--space-7) var(--space-6);
    border-radius: var(--radius-lg);
    background: linear-gradient(
        to right,
        var(--color-dark-mode-bg-left),
        var(--color-dark-mode-bg-right)
    );
}
#content.theme .osta-dark-mode-feature .osta-dark-mode-stars {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
#content.theme .osta-dark-mode-feature .osta-dark-mode-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-5);
}
#content.theme .osta-dark-mode-feature .osta-dark-mode-copy {
    flex: 0 0 80%;
    max-width: 80%;
}
#content.theme .osta-dark-mode-feature .osta-dark-mode-copy h2 {
    color: var(--color-dark-mode-text-heading);
    margin: 0 0 var(--space-3) 0;
}
#content.theme .osta-dark-mode-feature .osta-dark-mode-copy p {
    color: var(--color-dark-mode-text-body);
    font-size: 12px;
    line-height: 16.8px;
    margin: 0 0 var(--space-2) 0;
}
#content.theme .osta-dark-mode-feature .osta-dark-mode-copy p:last-child {
    margin-bottom: 0;
}
#content.theme .osta-dark-mode-feature .osta-dark-mode-copy em {
    font-style: italic;
    opacity: 0.85;
}
#content.theme .osta-dark-mode-feature .osta-dark-mode-toggle-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}
@media (max-width: 720px) {
    #content.theme .osta-dark-mode-feature .osta-dark-mode-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }
    #content.theme .osta-dark-mode-feature .osta-dark-mode-copy {
        flex: 1 1 auto;
        max-width: 100%;
    }
    #content.theme .osta-dark-mode-feature .osta-dark-mode-toggle-wrap {
        margin-left: 0;
    }
}

/* --- Behavior tab — sub-options panels below toggle cards --------
   Accordion pattern from the FAQ page (style.css L538): outer is a grid
   whose single auto-row collapses from 1fr → 0fr. Inner wrapper has
   overflow:hidden so its padded content clips during the transition.
   Padding/border/background live on the inner so the collapsed state
   leaves no visible chrome behind. */
#content.theme .osta-scroll-options,
#content.theme .osta-cookie-consent-options {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 300ms ease, margin-top 300ms ease;
    margin-top: -26px;
}
#content.theme .osta-scroll-options.is-expanded,
#content.theme .osta-cookie-consent-options.is-expanded {
    grid-template-rows: 1fr;
    margin-top: var(--space-3);
}
#content.theme .osta-scroll-options > .osta-accordion-inner,
#content.theme .osta-cookie-consent-options > .osta-accordion-inner {
    overflow: hidden;
    min-height: 0;
    padding: var(--space-3);
    background: var(--color-bg-page);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
}
.osta-cookie-consent-options {
    max-width: 515px;
}
.osta-scroll-options {
    max-width: 515px;
}
/* Scroll-to-Top device toggles bumped 30% larger. Base toggle uses
   fixed pixel dimensions (line 97+), so we scale each piece directly:
   36×20 → 47×26 track, 16×16 → 21×21 pip, translation 16px → 21px. */
#content.theme .osta-scroll-options input.switch:empty ~ label {
    width: 47px;
    height: 26px;
    line-height: 26px;
}
#content.theme .osta-scroll-options input.switch:empty ~ label::before {
    width: 47px;
    height: 26px;
    border-radius: 13px;
}
#content.theme .osta-scroll-options input.switch:empty ~ label::after {
    width: 21px;
    height: 21px;
    border-radius: 21px;
}
#content.theme .osta-scroll-options input.switch:checked ~ label::after {
    transform: translateX(21px);
}

/* --- Diagnostics tab — Installation + Server side-by-side -------- */
#content.theme #diagnostics .osta-diagnostics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    /* margin-bottom: var(--space-6); */
}
/* Suppress the stacked-section 35px top margin for the two side-by-side
   grid children — they sit on the same row, no top offset needed. */
#content.theme #diagnostics .osta-diagnostics-grid > .osta-tab-section {
    margin-top: 0;
}
.osta-tab-section.osta-diagnostics-tools {
    margin-top: 0px;
}

/* --- Diagnostics tab — Safe Mode featured rectangle --------------
 * Renamed from "Compare with vanilla osTicket" in -106 final pass.
 * Same SHIFT+O mechanism, new surface metaphor matching Windows /
 * macOS Safe Mode. Spec: handoff §4 "Safe Mode featured section".
 *
 * Visual: keycap pair on the left (anchor), body copy + Ghost
 * buttons on the right. Press-down hover animation depresses both
 * keycaps simultaneously when the section is hovered (mirrors the
 * actual SHIFT+O chord). */
#content.theme .osta-safemode-feature {
    /* Three-row layout: keycaps+preview, copy, kbd-line+buttons */
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: rgb(243 243 245 / 73%);
    border: 1px solid #dfdddd;
}
/* TOP ROW — keycaps left, preview right */
#content.theme .osta-safemode-top {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}
#content.theme .osta-safemode-keycaps {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
}
#content.theme .osta-keycap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    min-height: 60px;
    padding: 8px 12px;
    background: var(--color-grey-light);
    border-radius: var(--radius-md);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgb(0 0 0 / 17%), 0 2px 0 rgb(0 0 0 / 44%);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    color: var(--color-text-body);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
/* Shift is wide-rectangular (mirrors the physical key) with the
   glyph and "Shift" label side-by-side. */
#content.theme .osta-keycap-shift {
    gap: 10px;
    padding: 8px 18px;
    min-width: 120px;
}
#content.theme .osta-keycap-shift .osta-keycap-glyph {
    font-size: 20px;
    line-height: 1;
    font-weight: 900;
}
#content.theme .osta-keycap-shift .osta-keycap-label {
    font-size: 21px;
    line-height: 1;
    font-weight: 900;
}
#content.theme .osta-keycap-letter {
    font-size: 28px;
    font-weight: 600;
    /* Override the keycap monospace stack — monospace O often reads as
       a zero. Round-O sans-serifs in priority order: Trebuchet MS
       (Windows), Avenir / Avenir Next (macOS), Lucida Sans Unicode
       (Linux), with Helvetica / Arial as last-resort fallbacks. */
    font-family: "Trebuchet MS", "Avenir Next", "Avenir",
                 "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#content.theme .osta-safemode-plus {
    font-size: 24px;
    color: var(--color-text-muted);
    font-weight: 300;
    line-height: 1;
}
/* Press-down: hover anywhere on the section depresses both keycaps
   simultaneously (the SHIFT+O chord is a pair, not two events). */
#content.theme .osta-safemode-feature:hover .osta-keycap {
    transform: translateY(2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgb(0 0 0 / 41%), 0 0 0 rgb(0 0 0 / 21%);
    background: #ebecee !important;
}
/* PREVIEW PANE — shows osTA by default, swaps to vanilla on hover.
   Both screenshots layered absolutely; the vanilla layer sits underneath
   and is revealed when the osTA layer fades. The flash overlay pulses
   white at the swap-point to mimic the actual SHIFT+O page reload. */
#content.theme .osta-safemode-preview {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 140px;
    border-radius: var(--radius-md);
    border: 1px solid #dfdddd;
    background: #fff;
    overflow: hidden;
}
#content.theme .osta-safemode-preview-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    display: block;
}
/* Default state: osTA on top, vanilla underneath. */
#content.theme .osta-safemode-preview-osta {
    z-index: 2;
    opacity: 1;
    /* Zero-duration with 110ms delay = instant snap at the flash
       peak (35-65% of the 220ms flash = ~77-143ms). The previous
       `220ms steps(1, end)` + 110ms delay totaled 330ms, so the
       swap landed AFTER the flash had already faded — user saw
       "flash, osTA reappears, then cuts to vanilla." */
    transition: opacity 0s linear 110ms;
}
#content.theme .osta-safemode-preview-vanilla {
    z-index: 1;
}
#content.theme .osta-safemode-preview-flash {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: #ffffff;
    opacity: 0;
    pointer-events: none;
}
/* Hover-in: osTA layer snaps to opacity 0 at the flash peak. */
#content.theme .osta-safemode-feature:hover .osta-safemode-preview-osta {
    opacity: 0;
}
#content.theme .osta-safemode-feature:hover .osta-safemode-preview-flash {
    animation: osta-safemode-flash 220ms ease-out forwards;
}
@keyframes osta-safemode-flash {
    0%   { opacity: 0; }
    35%  { opacity: 1; }
    65%  { opacity: 1; }
    100% { opacity: 0; }
}

/* BODY COPY (middle row) */
#content.theme .osta-safemode-copy {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-body);
}
p.osta-safemode-copy {
    margin: 10px 0 0 0 !important;
}

/* BOTTOM ROW — kbd line left, buttons right (justify-between) */
#content.theme .osta-safemode-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
#content.theme .osta-safemode-press {
    margin: 0;
    font-size: 14px;
    color: var(--color-text-body);
}
p.osta-safemode-press {
    margin: 0 0 0 22px !important;
    zoom: 1.2;
}
#content.theme .osta-safemode-bottom .osta-actions {
    display: flex;
    gap: var(--space-2);
    flex: 0 0 auto;
}

/* Inline mini keycaps for "Press [Shift]+[O]" — same chrome
   aesthetic as the section's big keycap pair, scaled down for
   text flow. Static (no press-down) since the big pair carries
   the SHIFT+O metaphor visually. */
#content.theme .osta-safemode-feature .osta-kbd {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--color-grey-light);
    border-radius: var(--radius-sm);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(0, 0, 0, 0.06),
        0 1px 0 rgba(0, 0, 0, 0.08);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-body);
    vertical-align: baseline;
}

/* MOBILE — hide entirely below 768px. Hover is the demonstration;
   without it the preview is meaningless and the keycap animation
   never fires. Better to hide than show a degraded version. */
@media (max-width: 768px) {
    #content.theme .osta-safemode-section {
        display: none;
    }
}
@media (max-width: 720px) {
    #content.theme #diagnostics .osta-diagnostics-grid {
        grid-template-columns: 1fr;
    }
}

/* --- License tab — centered ~50% card ---------------------------
 * License is the front door of the panel; treat it as a focal
 * card rather than a full-width section. Centered horizontally with
 * generous top breathing room. */
#content.theme #theme-info .osta-license-card {
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--space-7);
}
/* Mobile / narrow viewports — release the 50% constraint so the card
   gets the room it needs. */
@media (max-width: 960px) {
    #content.theme #theme-info .osta-license-card {
        max-width: 100%;
    }
}

/* License action buttons — Manage License + Get Support
 * Ghost-variant treatment with leading icon, side-by-side row. */
#content.theme .osta-license-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
#content.theme .osta-license-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background-color: var(--color-grey-light);
    color: var(--color-grey-fg);
    border: none;
    border-radius: var(--radius-md);
    padding: 0 16px;
    height: 46px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
#content.theme .osta-license-action-btn:hover {
    background-color: var(--color-grey-mid-hover);
    color: var(--color-grey-fg-darker);
    text-decoration: none;
}
#content.theme .osta-license-action-btn:focus {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}
#content.theme .osta-license-action-btn svg {
    flex: 0 0 auto;
}

/* --- About tab ---------------------------------------------------
 * Brand identity surface — wordmark logo, body copy, services grid,
 * Enterprise + Reseller callouts, categorized link-pill grids,
 * Acknowledgements footer. */
/* Bg image lives on a ::before pseudo so its opacity can be dimmed
   independently of the content (CSS has no `background-image-opacity`).
   When the inner body carries `osta-tab-unactivated`, the pseudo fades
   to 50% — slightly more muted than the content's 0.7 dim. */
div#about {
    position: relative;
}
div#about::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(../img/osawesome-mobile-sm.png);
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: 300px;
    pointer-events: none;
    transition: opacity 200ms ease;
}
div#about:has(.osta-tab-unactivated)::before {
    opacity: 0.5;
}
#content.theme #about .osta-about-body {
    position: relative;
    /* padding: var(--space-6); */
    overflow: hidden;
}
/* About intro — logo column + copy column side-by-side, capped
   to the same max-width as the body copy so the layout doesn't
   stretch on wide viewports. */
#content.theme .osta-about-intro {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    /* max-width: 832px; */
}
#content.theme .osta-about-intro-logo {
    flex: 0 0 auto;
    margin: -4px 40px 0 0;
}
#content.theme .osta-about-intro-copy {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 760px;
}
#content.theme .osta-about-intro .osta-about-logo {
    height: auto;
    width: 220px;
    margin: 39px 0 0 0;
    display: block;
}
/* Legacy single-logo rule (kept as fallback if logo is rendered
   outside .osta-about-intro elsewhere). */
#content.theme .osta-about-logo {
    height: 44px;
    width: auto;
    display: block;
    margin-bottom: var(--space-5);
}
#content.theme .osta-about-body-p {
    font-size: 14px;
    line-height: 21px;
    color: var(--color-text-body);
    /* max-width: 832px; */
    margin: 0 0 var(--space-3);
}
p.osta-about-body-p:last-of-type {
    margin-bottom: 0 !important;
}

/* Services 3-card grid */
#content.theme .osta-about-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    /* margin: var(--space-5) 0 var(--space-6); */
}
#content.theme .osta-about-service-card {
    position: relative;
    overflow: hidden;
    text-decoration: none;
    padding: var(--space-5) var(--space-4);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-panel);
    display: block;
    transition: border-color var(--transition-fast);
    color: var(--color-text-body);
    min-height: 57px;
}
#content.theme .osta-about-service-card:hover {
    border-color: var(--color-text-subtle);
    text-decoration: none;
    color: var(--color-text-body);
}
/* Watermark icon: oversized, faded, top-right of the card. Stroke-based
   Lucide SVGs scale crisply at this size. Hover bumps opacity and adds
   a subtle rotate/scale for life. */
#content.theme .osta-about-service-card .osta-about-service-bg {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 96px;
    height: 96px;
    color: var(--color-accent-link);
    opacity: 0.12;
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
}
#content.theme .osta-about-service-card:hover .osta-about-service-bg {
    opacity: 0.22;
    transform: rotate(8deg) scale(1.08);
}
#content.theme .osta-about-service-card .osta-card-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-body);
    margin-bottom: var(--space-1);
}
#content.theme .osta-about-service-card .osta-card-desc {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* Enterprise + Reseller callouts — paired side-by-side wrapper.
   Background + border match the Safe Mode body for visual coherence
   across the two adjacent diagnostic-vs-info treatments. */
#content.theme .osta-about-programs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 1100px;
}
#content.theme .osta-about-callout {
    position: relative;
    overflow: hidden;
    padding: var(--space-5) var(--space-5) var(--space-5);
    background: rgb(243 243 245 / 73%);
    border: 1px solid #dfdddd;
    border-radius: var(--radius-lg);
    min-height: 180px;
}
/* Programs callout watermark — bolder, larger than the Services watermark.
   Anchored bottom-right, ~180px Lucide stroke icon, higher opacity so it
   reads as a deliberate visual element rather than a subtle hint. */
#content.theme .osta-about-callout .osta-about-callout-bg {
    position: absolute;
    bottom: -1px;
    right: -7px;
    width: 140px;
    height: 140px;
    color: var(--color-accent-link);
    opacity: 0.18;
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
}
#content.theme .osta-about-callout:hover .osta-about-callout-bg {
    opacity: 0.30;
    transform: translateY(-6px);
}
@media (max-width: 720px) {
    #content.theme .osta-about-programs {
        grid-template-columns: 1fr;
    }
}
#content.theme .osta-about-callout p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-body);
    margin: 0 0 var(--space-2);
}
#content.theme .osta-about-callout .osta-about-callout-emph {
    font-weight: 600;
    font-size: 14px;
}
#content.theme .osta-about-callout a {
    margin: 20px 0 0 0;
    font-size: 14px !important;
    color: var(--color-accent-link);
    text-decoration: none;
}
#content.theme .osta-about-callout a:hover {
    text-decoration: underline;
}

/* Categorized link pills */
#content.theme .osta-about-link-category {
    margin-top: var(--space-5);
    margin-bottom: var(--space-4);
    max-width: 760px;
}
.osta-about-link-category:first-of-type {
    margin-top: 0 !important;
}
.osta-about-link-category:last-of-type {
    margin-bottom: 0 !important;
}
#content.theme .osta-about-cat-heading {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--color-text-faint);
    margin-bottom: var(--space-2);
}
#content.theme .osta-about-pill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}
#content.theme .osta-about-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--color-accent-link);
    text-decoration: none;
    background: var(--color-bg-panel);
    transition: border-color var(--transition-fast);
}
#content.theme .osta-about-pill:hover {
    text-decoration: none;
    transition: all 0.3s ease;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.0);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.0);
    position: relative;
    top: -1px;
    border: .5px solid #659505;
    color: #659505 !important;
}

/* Acknowledgements footer (within About tab) */
#content.theme .osta-about-acks {
    /* margin-top: var(--space-6); */
    /* padding-top: var(--space-5); */
    /* border-top: 1px solid var(--color-border-default); */
    max-width: 760px;
}
#content.theme .osta-about-acks .osta-ack-intro {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-5);
}
#content.theme .osta-about-acks-pills .osta-about-pill {
    color: var(--color-text-subtle);
}
@media (max-width: 1100px) {
    #content.theme .osta-about-services {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
 * End osAwesome Admin Design System block
 * ============================================================ */

table.list tbody td a {
    font-weight: 500;
}
table.list tbody tr:nth-child(2n+1) td {
    background-color: #ffffff;
}
table.list tbody tr:nth-child(2n+1) td {
    background-color: #f0faff;
}
table.list tbody tr.highlight:nth-child(2n+1) td {
    background-color: #dddddd;
}
form table.list + div b {
    margin-right: 5px;
}

.dark-mode ul.clean.tabs li:not(.active) {
    background: initial !important;
    border: 1px solid #31363d !important;
    box-shadow: initial !important;	
}
.dark-mode ul.clean.tabs li:not(.active):hover {
    background: initial !important;
}
.dark-mode ul.tabs li.active a {
    color: #128dbe !important;
}
.dark-mode ul.clean.tabs li:not(.active):hover a {
    color: #1aaae4 !important;
}
.dark-mode ul.clean.tabs li:hover a {
    color: #1aaae4 !important;
}
.dark-mode ul.tabs li:not(.active) {
    bottom: 0px;
}

/* ==========================================================================
 GLOBAL STYLES
========================================================================== */
/* osta — Reserve space for the vertical scrollbar so pages do not reflow
 * when content height changes (notably during PJAX swaps between pages of
 * different lengths). Use thin scrollbars to minimize reserved width.
 * html background restored to nav-bar color (dark-mode.css overrides this
 * when active). Stevland 2026-05-08. */
html {
    /* bg image fills the gap below the footer with color but doesn't flash that color in the
       scrollbar gutter space during a PJAX > page load the way bg color does. a hard-won workaround! */
    background-image: linear-gradient(to right, var(--nav-bar-bg), var(--nav-bar-bg));
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #666 #f3f3f5;
}
body {
    background: #f3f3f5;
}
body,
.thread-body {
	font-family: 'Open Sans', sans-serif;
    font-size: 14px!important;
    color: #4c5156;
}
a {
    color: #128dbe;
}
a:hover, .link:hover {
    text-decoration: none !important;
}
b {
    font-weight: 600;
}
.input.attached.focus {
	outline-offset: initial;
	outline-style: initial;
	outline-width: initial;
	outline-color: initial;
}
button {
    border-width: 1px;
}
button:focus { 
	outline: none; 
}
select:focus,
input:focus {
    outline: .5px solid #606d7f;
}
input[type='radio']:checked,
input[type='checkbox']:checked {
	filter: hue-rotate(335deg) opacity(.9);
	-webkit-filter: hue-rotate(335deg) opacity(.9);
}
code {
    color: #029200;
}

/* ==========================================================================
 PAGE LAYOUT 
========================================================================== */
#container {
	width: 100%;
    margin: 0;
    /*height: 60px;*/
}
#content {
    max-width: 1200px;
    margin: 0 auto;
    background: initial;
    border: none;
    min-height: 670px;
}
th {
    font-family: 'Open Sans', sans-serif;
}

/* ==========================================================================
 HEADER
========================================================================== */
#header {
	background-color: var(--header-bg);
    background-image: url(../../osta/img/backdrops/02.png);
	background-size: cover;
    border: initial;
    box-shadow: initial;
    width: 100%;
    height: 60px;
    top: 0;
    z-index: 4;
    position: absolute;
}
#header a {
    color: var(--header-title);
    font-weight: 400;
    font-size: 14px;
}
#header p {
    border: none;
    color: var(--header-title);
    /*background: var(--header-bg);*/  /*messes up Client header*/
    max-width: initial;
    margin: 0;
    padding: 18px;
}
p#info {
    font-weight: 100;
}
p#info strong {
    font-weight: 400;
}
div[style="margin-bottom:20px; padding-top:5px;"] {
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
 FALLBACK COLORS
========================================================================== */
.pull-right#nav a:hover, .pull-right#nav a svg:hover {
	color: var(--header-title-hover);
	fill:  var(--header-title-hover);
    font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif;	
}
#header #nav a {
    color: var(--header-title);
    font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif;
}
#header #nav a:hover {
    color: var(--header-title-hover) !important;
}
.rtl #header li:nth-child(5) {
    margin-left: -2px !important;
}
#header a[href*="login.php"]:hover {
    background: rgba(255, 255, 255, 0.10980392156862745);
}
.sidr {
	background: #f3f3f5;
}
.c-hamburger span,
.c-hamburger span::before,
.c-hamburger span::after {
  	background: #555;
}
:root {
	--header-bg: #e4e4e4;	
	--header-title: #444444;

	--nav-bar-bg: #cecece;
	--nav-bar-link: #000000;
	
	--stickybar: #444444;	

	--mobile-menu-bg: #cecece;	
	--mobile-link-color: #000000;
}

/* ==========================================================================
 NAVIGATION
========================================================================== */
#nav {
    background:  var(--header-title);
    border: none;
    padding-top: 0;
    z-index: initial;	
}
#sub_nav {
    background: var(--nav-bar-bg) !important;
    height: 12px;
    padding: 0;
    max-width: 1240px;
    margin: 57px auto;
    border: 0;
    line-height: 22px;
}
#sub_nav .small.icon-sort-down.pull-right {
	display: none;
}
nav#customQ_nav #sub_nav {
    line-height: 28px;
}
@media screen and (max-width: 1270px) {
	ul#sub_nav {
		margin-left: 12px !important;
	}
}
#sub_nav a {
    padding: initial;
}
ul#sub_nav a.active {
    font-weight: 600;
}
#sub_nav li.top-queue + li > a {
    margin-left: 14px;
}
a#new-ticket {
    margin-left: 14px !important;
}
.sidr-inner a#new-ticket {
	margin-left: 0 !important;
}
#nav a {
    margin-left: 8px;
}
a#dark-mode-link {
    margin-left: 6px;
}
a#logout {
    margin-left: 5px;
}
#nav > li:first-of-type {
    margin-left: 8px;
}
#nav li a {
    margin-left: 0;
}
#nav li:hover a,
a#agent-panel:hover,
a#admin-panel:hover {
    color: var(--header-title) !important;
    fill: var(--header-title) !important;
}

#nav li.active, #nav li.inactive:hover {
    background-color: var(--header-title);	
    box-shadow: none;
    border: none;
    padding-left: initial;
    padding-right: initial;	
}
#nav .active {
    color: var(--nav-bar-link) !important;
    font-weight: 400;
}
#nav .active, #nav .inactive {
    border-radius: initial;
    border-style: initial;	
}
#sub_nav a,
#nav .active a,
#nav .inactive a {
    color: var(--header-title);
}
#sub_nav a {
    color: var(--nav-bar-link);
}
#sub_nav a:hover {
    color: #000000;
}
#nav li.inactive > ul {
    width: initial;
    background: var(--header-title);
    border-bottom: none;
    border-left: none;
    border-right: none;
    border-radius: none;
    -moz-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}
#nav .inactive li a {
    background-position: 10px 50%;
    background-repeat: no-repeat;
    padding: 4px 34px 4px 34px;
}
.rtl #nav .inactive li a {
    padding-left: 34px;
    padding-right: 34px;
}
#nav .inactive li a:hover {
    color: var(--mobile-menu-bg);
    background-color: rgba(0,0,0,0.1);
}
#customQ_nav .jb-overflowmenu-menu-primary li.item > a {
    padding: 0;
}
#sub_nav > li > a {
    margin-left: 17px !important;
    padding: 0;
}
.rtl #sub_nav > li > a {
    margin-right: 17px !important;
	padding-right: 0 !important;
}
.rtl ul#sub_nav li:first-child a {
    margin-right: 0 !important;
    padding-right: 0 !important;
}

/* ==========================================================================
 LOGO
========================================================================== */
#left-logo {
    width: 300px;
    height: 28px;
    margin: 15px 14px;
    float: left;
    -webkit-transition: left 2s;
    transition: left 2s;
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    z-index: 0;
}
.rtl #left-logo {
	float: right;
    right: 0;
}
/* TEXT LOGO */
#header-text {
    padding: 2px;
}
#header-title {
    color: var(--header-title);
    line-height: 21px;
    padding: 0;
    font-style: normal;
    font-weight: 600;
    font-size: 21px;
    font-family: "Montserrat",sans-serif;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}
#header-subtitle {
    color: var(--header-title);
    margin: 0;
    position: relative;
    font-size: 10px;
    font-family: verdana;
    font-style: initial;
    letter-spacing: 2.4px!important;
    display: block;
    font-weight: 100;
}
/* IMAGE LOGO */
#left-logo {
    max-width: 300px;
    height: 34px;
    margin: 12px 11px;
}
#header-default svg {
    height: 22px;
    fill: var(--header-title);
    margin: 5px 0;
}
#header-default:hover svg {
    fill: var(--header-title-hover);
}
#header-text {
	display: none;
}
#header-image img {
    display: none;
}

a#header-logo:hover  > #left-logo #header-title, 
a#header-logo:focus  > #left-logo #header-title,
a#header-logo:active > #left-logo #header-title,
a#header-logo:hover  > #left-logo #header-image img, 
a#header-logo:focus  > #left-logo #header-image img,
a#header-logo:active > #left-logo #header-image img,
a#header-logo:hover  > #left-logo #header-default svg, 
a#header-logo:focus  > #left-logo #header-default svg,
a#header-logo:active > #left-logo #header-default svg {
    -webkit-animation-name: hvr-pop;
    animation-name: hvr-pop;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
} 

/* ==========================================================================
 HEADER NAV 
========================================================================== */
#nav.pull-right {
	background: initial;
    position: relative;
    top: 16px;
	color: #f3f3f5; /* fallback */
    color: var(--header-bg);
	padding: 0 calc(1% + 5px) 0 0 !important;
}
.rtl #nav.pull-right {
	padding: 0 0 0 calc(1% + 5px) !important;
}
a.no-pjax[href*="/scp/logout.php"] svg {
	fill: var(--header-title);
    display: inline-block;
    width: 18px;
    height: 18px;
    content: "";
    position: relative;
    top: 4px;
}
.rtl a.no-pjax[href*="/scp/logout.php"] svg {
    transform: rotate(180deg);
}
#nav.pull-right .active, 
#nav.pull-right .inactive {
    min-width: initial;
}
#nav.pull-right li.active, 
#nav.pull-right li.inactive:hover {
    background-color: initial;
}
#nav.pull-right li.inactive > ul {
    width: initial;
    background: var(--header-bg);
    left: -33px;
}
.rtl #nav.pull-right li.inactive > ul {
    left: -33px;
    right: initial;
}
#nav.pull-right .active, 
#nav.pull-right .inactive,
#nav.pull-right li.active, 
#nav.pull-right  li.inactive:hover {
    padding-left: initial;
    padding-right: initial;
}
.rtl #nav li:first-child {
    margin-left: 8px !important;
}
.rtl #nav.pull-right li > ul li:first-child {
    margin-left: 0 !important;
}
#nav > li + li:nth-child(5) {
    /*margin-left: 0;*/  /*what was this for?!*/
}
#nav.pull-right .active a {
    font-weight: 500;
}

/* ==========================================================================
 TOP MARGIN
========================================================================== */
.pull-left {
    float: left;
    margin: 0;
}
.rtl .pull-left {
    float: right !important;
}
p.full-width .pull-right {
    margin: 9px 0 0 0; /*target*/
    margin: 0 0 0 0;	
}
.pull-right.flush-right.page-top {
    float: left;
}

/* ==========================================================================
 TYPOGRAPHY
========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Product Sans', 'Open Sans', sans-serif;;
}
h2 {
    color: #777777;
    font-weight: 400;
    font-size: 25px;
	margin: 0;		
}
h2 a {
    line-height: 33px;	
}
h3 {
    padding: 5px 0;
    color: #777777;
    font-weight: 400;
    font-size: 19px;
    margin: 0;
}
.pull-left.flush-left h2 a {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px transparent;
	position: relative;
	/* padding-right: 2.2em; */
	padding-right: 4px;
}
.flush-left h2 svg {
    display: inline-block;
    position: relative;
    top: 4px;
    left: 0;
	-webkit-transition-duration: 1s;
	transition-duration: 1s;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
	fill: #8BCB0D;	
}
.flush-left h2 a:hover > svg, 
.flush-left h2 a:focus > svg, 
.flush-left h2 a:active > svg {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
}
.sticky.bar.fixed .flush-left h2 a svg {
    fill: var(--nav-bar-link); /* osta: was var(--header-title); match footer scheme */
}
label {
    color: #4c5156 !important;
}
.error {
    color: #d62705;
    font-size: 13px;
    font-weight: 500;
}
li.error a:before {
    display: none;
}
.faded strong {
    font-weight: 500;
}

/* ==========================================================================
 ICONS
========================================================================== */
a [class^="icon-"], a [class*=" icon-"] {
    color: #128dbe;
}
.pull-right i[class^="icon-"], .pull-right i[class*=" icon-"] {
    display: inline-block;
    float: left;
}
.rtl .pull-right i[class^="icon-"], 
.rtl .pull-right i[class*=" icon-"] {
    float: right;
}
i.icon-refresh {
    display: none;
}
.configureQ {
    margin: 16px 0 0 4px;
}
[class^="icon-"].icon-fixed-width, [class*=" icon-"].icon-fixed-width {
    padding: 0; /* Completed Tasks */
    margin: 0 6px 0 3px;
    width: 20px;
}
#sort-dropdown [class^="icon-"].icon-fixed-width, #sort-dropdown [class*=" icon-"].icon-fixed-width {
    margin: 0 4px 0 3px;
}
.configureQ > .noclick-dropdown {
    padding: 25px 0 0 0;
    margin-top: -3px;
    margin-left: -7px;
}
.configureQ i.icon-fixed-width.icon-pencil {
    background-position: 1px -2px;
}
.floating-options i.icon-edit, .floating-options i.icon-share {
    padding: 15px !important;
    background-position: center center;
	float: right;
    top: 0;
}
.floating-options i.icon-share {
    background-size: 24px !important;
    top: 1px;
}
.floating-options i.icon-share:after {
	clear: both;
}
.quicknote .body a {
    margin: 0 0 15px 0;
}
.quicknote {
    margin: 10px 0;
    border: .5px solid rgba(0,0,0,0.2);
    border-radius: 4px;
}
.quicknote .body {
    padding: 0 10px;
}
#new-note {
    margin-top: 10px;
    background: rgba(219, 243, 255, 0.6509803921568628);
}
#quick-notes i.note-type.icon-user {
    margin-left: 0;
}
.re-icon i:before { /*Redactor Toolbar trash icon*/
    top: -4px;
}
.delete-draft:hover {
    background-color: rgba(212, 8, 8, 0.9294117647058824) !important;
}
.faded {
    margin: 3px 0 0 0 !important;
    /* font-size: 18px; */ /*target*/
    color: #888;
}
.thread-event .faded {
    margin: 3px 0 0 0 !important;
    font-size: 18px;
}
.thread-event .type-icon i {
    top: 0 !important;
}
.thread-entry .muted-button {
    border-radius: 5px;
    padding: 3px 5px;
    margin: -4px 0 -1px 5px;
    border: .5px solid rgba(0, 0, 0, 0.21);
    color: #666;
    color: rgba(0,0,0,0.5);
    background: rgba(255, 255, 255, 0.21);
}
.label.label-bare:hover,
.thread-entry .muted-button:hover {
    background: rgba(255, 255, 255, 0.48);
}
a[href="#moreoptions"] i.icon-reorder {
    padding-right: 2px;
}

/* ==========================================================================
 TICKET PAGES
========================================================================== */
form[action="tickets.php"] {
    display: inline;
}
form#reply {
    width: 98% !important;
}
#resp_sec tr:first-of-type td[colspan="2"]:first-of-type {
    display: none;
}
#resp_sec .redactor-box {
    margin-top: 10px !important;
}
.redactor-styles,
.redactor-styles p,
.-redactor-container .redactor-styles {
	font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    color: #000;
    max-width: initial !important;
}
.redactor-styles {
    padding: 5px 12px 0px 12px;
}
.redactor-styles h1, 
.redactor-styles h2, 
.redactor-styles h3, 
.redactor-styles h4, 
.redactor-styles h5, 
.redactor-styles h6  {
    font-family: 'Open Sans', sans-serif;
    line-height: initial;
}
.redactor-box.redactor-styles-on {
    border: 1px solid #aaaaaa;
}
.inner br:nth-child(2) {
    /* display: none; */ /*breaks signature line breaks*/
}
#tasks.tab_content {
    min-height: 80px;
}
.redactor-box.redactor-styles-on .redactor-toolbar.redactor-toolbar {
    padding: 0 0 0 0;
    border-radius: 6px 6px 0 0;	
	box-shadow: 0 4px 6px -3px rgba(0, 0, 0, 0.22);	
}
.redactor-box.redactor-styles-on {
    border: 1px solid #aaaaaa !important;
}
.tixTitle h3 {
    font-weight: 400;
	color: #777777;
	font-size: 22px;	
}
.avatar.pull-left {
    margin-left: -60px;
    display: inline-block;
    width: 100px; /*target*/
    height: auto;
}
.thread-entry .avatar.pull-left.avatar {
    width: 50px;
}

/* ==========================================================================
 UNIVERSAL TABLE STYLES
========================================================================== */
/* HEAD */
table[width="940"] {
    width: 100%;
}
table.list, 
#ticketTable {
    width: 100%;
    border: 1px solid #cfd4d6;
    border-radius: 6px;
    margin: 5px 0 0 0;
    background: initial;
    background-color: #fff;
    border-spacing: 0;
    border-collapse: separate;
}
.logs-page table.list {
	table-layout: fixed;	
}
table.list thead th {
    background-color: #fff;
    color: #686868;
}
table.list th:not(:first-child) a:hover {
    background: #cfe6ff url(../../osta/icons/asc-desc.svg) 100% 50% no-repeat;
    background-size: 20px;
}
table.list thead th.osta_priority a:hover {
    background-position: 3px 14px !important;
}
.rtl table.list th:nth-child(3) a:hover, 
.rtl table.list th:nth-child(4) a:hover, 
.rtl table.list th:nth-child(5) a:hover, 
.rtl table.list th:nth-child(6) a:hover,
.rtl table.list th:nth-child(7) a:hover {
    background: #cfe6ff url(../../osta/icons/asc-desc.svg) 8px 50% no-repeat;
    background-size: 20px;	
}
table.list th:first-child {
	border-radius: 6px 0 0 0;
    background-image: url(../icons/checkmark.svg);
    background-repeat: no-repeat;
    background-position: 20px center;
    background-size: 16px;
    height: 40px;
    content: "";
    width: 30px !important;
}
table.list.queue.tickets th:first-child { /*target*/
	background-position: center left 12px;
}
.rtl table.list th:first-child {
    border-radius: 0 6px 0 0;
}
table.list th:last-child {
    border-radius: 0 6px 0 0;
}
table.ticket_info table {
    background: #fff;
    padding: 4px;
    border-radius: 6px;	
}
table.list th {
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    height: 30px;
}
table.list thead th a {
    display: block; /* helps with asc-desc bg images */	
    color: #128dbe;
    font-weight: normal;
    font-size: 16px;
    background: url(../../osta/icons/asc-desc.svg) 100% 50% no-repeat;
    background-size: 20px;
    will-change: background;
    transition: all 0.3s ease-in-out;	
    margin: 0; 
    height: 30px;
    padding: 8px 0 2px 10px; /* this positions the text */
    text-shadow: -1px -1px 0 #FFF, 0 -1px 0 #FFF, 1px -1px 0 #FFF, 1px 0 0 #FFF, 1px 1px 0 #FFF, 0 1px 0 #FFF, -1px 1px 0 #FFF, -1px 0 0 #FFF;
}
.rtl table.list thead th a {
    background-position: 8px 50%;
    padding-right: 15px;
    padding-left: 0;
}
table.list thead th a.asc {
    background: #cfe6ff url(../../osta/icons/asc.svg) 100% 50% no-repeat;
    background-size: 20px;
}
.rtl table.list thead th a.asc {
    background: #cfe6ff url(../../osta/icons/asc.svg) 8px 50% no-repeat;
    background-size: 20px;
}
table.list thead th a.desc {
    background: #cfe6ff url(../../osta/icons/desc.svg) 100% 50% no-repeat;
    background-size: 20px;
}
.rtl table.list thead th a.desc {
    background: #cfe6ff url(../../osta/icons/desc.svg) 8px 50% no-repeat;
    background-size: 20px;
}
th.osta_ticket a {
    margin-left: 5px !important;
    padding-left: 22px !important;
    line-height: 24px;
    font-style: initial;
    font-family: Montserrat;
    font-size: 14px !important;
    font-weight: 600 !important;
}
@media screen and (max-width: 1000px) {
	table.list thead th a,
	table.list thead th a.asc,	
	table.list thead th a.desc {
		background-image: initial;
	}
}
/* BODY */
table.list tbody td {
    margin: 0;
	padding: 0 10px 0 10px;
    vertical-align: middle;
    border: initial;
    font-size: 11px;
    color: #686868;
}
table.list td.checkbox-cell {
    padding: 18px 0px;
}
table.list tbody td.osta_ticket {
    padding: 0 10px 0 4px;
}
a[style="display:inline"] {
    font-size: 14px;
    font-weight: 500;
}
table.list td div.wrap {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
/* FOOT */
table.list tfoot td {
    font-size: 14px;
    background: #fff;
    border-radius: 0 0 6px 6px;
    padding: 12px;
    border-top: .5px solid #e0e0e0;
}
td.empty:before {
    display: none;
}
.truncate {
    display: initial;
    width: auto;
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.osta_ticket .truncate {
    white-space: initial !important;
}

/* ==========================================================================
 TICKET LIST COLUMN WIDTHS
========================================================================== */
form[action="tickets.php"] table.list thead th {
	width: initial !important;
}
form[action="tickets.php"] table.list thead th:first-child,
form[action="tickets.php"] table.list thead th:nth-child(2) {
    text-align: center;
}
form[action="tickets.php"] table.list th:first-child,
form[action="tickets.php"] table.list td:first-child {
	max-width: 1vw;
}
form[action="tickets.php"] table.list th:nth-child(2),
form[action="tickets.php"] table.list td:nth-child(2) {
	max-width: 2vw;
}
form[action="tickets.php"] table.list th:nth-child(3),
form[action="tickets.php"] table.list td:nth-child(4) { /* <-acount for hidden mobile td */
	max-width: 9vw;
}
form[action="tickets.php"] table.list th:nth-child(4),
form[action="tickets.php"] table.list td:nth-child(5) {
	max-width: 10vw;
}
form[action="tickets.php"] table.list th:nth-child(5),
form[action="tickets.php"] table.list td:nth-child(6) {
	max-width: 20vw;
}
form[action="tickets.php"] table.list th:nth-child(6),
form[action="tickets.php"] table.list td:nth-child(7) {
	max-width: 10vw;
}
form[action="tickets.php"] table.list th:nth-child(7),
form[action="tickets.php"] table.list td:nth-child(8) {
    max-width: 4vw;
}
form[action="tickets.php"] table.list th > .wrap,
form[action="tickets.php"] table.list th > .wrap a {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
form[action="tickets.php"] table.list td:nth-child(6) div.wrap {
    max-width: 75%;
}
.rtl form[action="tickets.php"] table.list td:nth-child(6) div.wrap {
    float: right;
}
form[action="tickets.php"] table.list td:nth-child(6) div.overdueTicket.wrap {
    max-width: calc(75% - 20px);
}
@media screen and (max-width: 1080px) {
	.tickets-page table.list thead th a {
	    padding: 8px 0 2px 0 !important;
	}
	.tickets-page table.list tbody td {
		/*padding-left: 0 !important;*/
	}	
}
@media screen and (max-width: 860px) {
	.tickets-page table.list thead th a {
	/* background-image: initial !important;	 */
	}
}

/* ==========================================================================
 TICKET LIST HEAD
========================================================================== */
table.list thead th.osta_priority a {
    color: #fff;
    font-size: 1px;
    background-image: url(../icons/exclaimation.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 6px;
    content: "";
}
table.list thead th:first-child a.desc {
    height: 39px !important;
}
form[action="tickets.php"] table.list thead th:first-child:hover {
    background-color: #cfe6ff;
    box-shadow: inset 0 -1px 0 0 #fff;
}
form[action="tickets.php"] table.list thead th:first-child a {
    background-image: initial;
}
form[action="tickets.php"] table.list thead th:first-child a {
	background-image: none;
}
.tickets-page table.list thead th:first-child a.asc,
table.list thead th:first-child a.desc {
    background: initial;
}
/*priority*/
.tickets-page table.list th:first-child a {
	border-radius: 6px 0 0 0 !important;
}
table.list thead th a#selectToggle {
    background: initial;
}
/*checkbox*/

/*description*/

/*number*/
table.list thead th:last-child,
table.list thead th:last-child a {
    border-radius: 0 6px 0 0;
}
.rtl table.list thead th:last-child,
.rtl table.list thead th:last-child a {
    border-radius: 6px 0 0 0;
}
table.list tbody tr:hover td.osta_priority {
    opacity: .8;
}
table.list tbody tr:hover td.osta_priority_emergency {
    filter: brightness(160%);
}
table.list tbody tr:hover td.osta_priority_high {
    filter: brightness(118%);
}
table.list tbody tr:hover td.osta_priority_normal {
    filter: brightness(118%);
}
table.list tbody tr:hover td.osta_priority_low {
    filter: brightness(120%);
}

/*row color and hover hightlights*/
table.list tbody tr.highlight td {
  	background: #ddd;
    border-top: .1px solid #aaa !important;
    border-bottom: .1px solid #aaa !important;
}
table.list tbody tr:hover td {
    background: #ffe9d2;
}

/* ==========================================================================
 TICKET LIST BODY
========================================================================== */
/*priority*/
/*checkbox*/

.new-reply {
    background-size: 8px !important;
    background-repeat: no-repeat !important;
    content: '1' !important;
    display: inline-block;
    margin: 0;
    background: #fff;
    color: #000000;
    font-weight: 400;
    padding: 2px;
    border-radius: 10px;
    width: 10px;
    height: 10px;
    line-height: 10px;
    text-align: center;
    position: relative;
    left: -5px;
    border: 1px solid #8a8a8a;
    animation: new-reply-pulse 1.5s ease-in-out infinite;	
}
@-webkit-keyframes new-reply-pulse {
	0% {
		-webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(117, 178, 226, .3);
		box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(117, 178, 226, .3)
	}
	50% {
		-webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(117, 178, 226, .3);
		box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(117, 178, 226, .3)
	}
	to {
		-webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(117, 178, 226, .3);
		box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(117, 178, 226, .3)
	}
}
@keyframes new-reply-pulse {
	0% {
		-webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(117, 178, 226, .3);
		box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(117, 178, 226, .3)
	}
	50% {
		-webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(117, 178, 226, .3);
		box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(117, 178, 226, .3)
	}
	to {
		-webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(117, 178, 226, .3);
		box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(117, 178, 226, .3)
	}
}
.nowrap {
    white-space: nowrap;
}
td.osta_ticket div {
    white-space: nowrap;
    vertical-align: middle;
}
td.osta_lastupdated {
	line-height: 22px;
}
.date-text {
    position: relative;
    top: 1px;
}
/*from*/
form[action="tickets.php"] table.list tbody td:nth-child(5) {
	padding-left: 10px;
    font-size: 14px !important;
}
/*description*/
form[action="tickets.php"] table.list tbody td:nth-child(6) {
	padding-left: 10px;
}
.Icon.overdueTicket.link.truncate {
    padding: 0 0 0 20px;
}
td.table-description div {
    font-size: 14px !important;
}
i.icon-comments-alt {
    top: 5px;
    right: 4px;
}
#thread-count {
    float: right;
    position: relative;
    right: 4px;
}
.rtl #thread-count {
    float: left;
    left: 0;
}
#thread-icon {
    float: right;
    padding: 0 4% 0 4px;
}
.rtl #thread-icon {
    float: left;
    padding: 0 4px 0 4%;
}
i.icon-comments-alt {
    top: 2px;
}
/*name*/
form[action="tickets.php"] table.list tbody td:nth-child(7) {
    padding-left: 10px;
    font-size: 12px;
}
/*number*/
a.Icon.Ticket.preview,
a.Icon.apiTicket.preview,
a.Icon.emailTicket.preview,
a.Icon.phoneTicket.preview,
a.Icon.webTicket.preview,
a.Icon.otherTicket.preview {
    margin: 0 0 0 12px;
	margin: 0;
}
a.Icon.Ticket.preview b,
a.Icon.apiTicket.preview b,
a.Icon.emailTicket.preview b,
a.Icon.phoneTicket.preview b,
a.Icon.webTicket.preview b,
a.Icon.otherTicket.preview b {
    font-weight: normal;
    font-size: 10px;
    font-family: 'Open Sans', sans-serif;
}
a[data-preview^="#tasks"],
.orgs #tickets .list a.preview,
.users #tickets .list a.preview,
table.list.queue.tickets a.preview,
#relations a.Ticket.preview,
.tasks .list td:not(.task-number) a[href^="tickets.php"] {
    font-weight: 400;
    border: .5px solid #128dbe;
    border-radius: 2px;
    padding: 2px 3px 2px 3px;
    background: #ffffff7a;
    margin: 0;
    font-size: 10px;
} 
a.preview:empty {
    display: none !important;
}
.orgs #tickets .list a.preview,
.users #tickets .list a.preview {
	padding: 2px 3px 0 3px;
}
.orgs #users .list tbody td {
	padding: 14px 0;
    font-size: 14px;
}
.orgs #users .list tbody td:nth-child(3) {
    font-size: 13px;
}
.orgs #users i.icon-fixed-width.icon-file-text-alt {
    top: 4px;
}
.users #tickets .list thead th a {
    padding: 8px 0 2px 0;
}
.users #tickets .list th:first-child {
    background-image: none;
    width: 6% !important;
}
.users #tickets .list th:nth-child(2) {
	width: 13% !important;
}
.users #tickets .list th:nth-child(3) {
	width: 11% !important;
}
.users #tickets .list th:nth-child(4) {
	width: 42% !important;
}
.users #tickets .list th:nth-child(5),
.users #tickets .list th:nth-child(6) {
	width: 14% !important;
}
.users #tickets .list td{
	padding: 14px 0;
    /* font-size: 14px !important; */ /* messing up User view Tickets tab */
}
.users #tickets .pull-right.faded-more {
    padding-right: 20px;
}
.preview {
	float: left;
}
.rtl .preview {
    float: right;
}
_::-webkit-full-page-media, _:future, :root a.preview {
    border: 1px solid #128dbe;
}

/* ==========================================================================
 TICKET LIST - FOOT
========================================================================== */
form[action="tickets.php"] table.list tfoot td {
    padding: 10px 8px 6px 0 !important;
    border-top: .5px solid rgba(0, 0, 0, 0.09) !important;
    border-radius: 0 0 6px 6px;
    font-size: 14px !important;
}
table.list + div,
table.list ~ div {
    font-size: 14px;
    padding: 12px 12px 0 12px;
}
table.list ~ div b {
    margin-right: 10px;
}
table.list + div a#queue-export,
#table-foot-options a#queue-export,
table.list.queue.tickets ~ div a#queue-export {
    margin-left: 10px !important;
}

/* ==========================================================================
 TICKET VIEW
========================================================================== */
.ticket_info {
    background: #fff;
    border: 1px solid #cfd4d6;
    border-radius: 6px;
    margin: 0;
    padding: 0;
}
.ticket_info th {
    color: #4c5156 !important;
	font-weight: 600;
}
.ticket_info td {
    border-radius: 6px;
    background: #fff;
}
.ticket_info {
	margin: 0 0 10px 0;
}	
.ticket_info td {
	padding: 3px 8px;
}
.ticket_infotr:first-child td {
	padding-top: 7px;
}
.ticket_info tr:last-child td {
	padding-bottom: 9px !important;
}
.has_bottom_border {
    padding-bottom: 5px;
    border-bottom: none;
}
.flush-left h2 {
    margin: 0;
}
.clear.tixTitle.has_bottom_border h3 {
    margin: -8px 0 3px -4px;
}
.templates .pull-left.flush-left,
.emails .pull-left.flush-left,
.staff .pull-left.flush-left,
.teams .pull-left,
.roles .pull-left,
.departments .pull-left,
.directory .pull-left,
.dashboard .pull-left,
.users .pull-left,
.orgs .pull-left,
.tasks .pull-left.flush-left,
.kb .pull-left,
.categories .pull-left,
.canned .pull-left {
    margin-top: 0;
}
#ticketThread::before {
    margin-left: 83px;
}
.thread-entry .thread-body {
    width: calc(100% - 27px);
}
.thread-entry::before {
    border-top: 2px solid #f3f3f5;
}
.thread-entry::after {
    /*border-bottom: 2px solid #f3f3f5;*/
}
.thread-entry.message .header,
.thread-preview-entry.message .header {
    background: #ffddba;	
}
.thread-entry.avatar.message .header:after {
    border-left: 7px solid #ffddba;
}
.thread-entry .header,
.thread-preview-entry .header {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 5px 5px 0 0;
}
.thread-entry .header .title {
    margin-left: 0;
}
.thread-entry.note .header,
.thread-preview-entry.note .header,
.thread-preview-entry.collapsed .header {
    background: #dae9eb;
}
.thread-entry.response .header,
.thread-preview.entry.response .header {
    background: #b2e9f1;
}
.thread-entry.avatar .header:before {
    border-left: 8px solid #dddddd;
}
.textra.light {
    float: right;
    padding-left: 5px;
}
.thread-entry .label-bare {
    display: inline-block;
    padding: 5px 9px 3px 9px;
    border: 0.5px solid #99bbc0;
    background: rgba(255, 255, 255, 0.21);
    margin: -3px 0 0 0;
    color: #3b8ebd;
}
.thread-entry .label-bare i.icon-user, 
.thread-entry .label-bare i.icon-code-fork {
    width: 13px;
    height: 13px;
    background-size: 13px !important;
    margin: -2px 0 6px 0;
}
.thread-entry .label-bare .icon-code-fork:before {
    content: "\f126";
    top: 0px !important;
    left: 3px;
    font-size: 14px;
}
.thread-entry.message .header a.white.button.action-button.show-images {
	padding: 1px 4px 4px 4px;
    border: .5px solid #c9b49e;
    background: initial;
    float: right;
    background: rgba(255, 255, 255, 0.21);
}
.thread-preview-entry.collapsed.response .header .thread-name span:first-child {
    color: #4c5156;
}
.thread-entry.message .header a.white.button.action-button.show-images:hover {
    border: .5px solid #c9b49e !important;
    background: rgba(255, 255, 255, 0.37);
}
.thread-event .description {
    margin: 11px 0 0 5px !important;
    padding-top: 0;
    padding-left: 0;
    display: block;
    width: calc(100% - 114px);
    line-height: initial !important;
    color: #3b4450;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    float: left;
}
.thread-entry.avatar.response .header:before {
    border-right-color: #afebf3;
    z-index: 9
}
.thread-entry.avatar.response .header:after, .thread-entry.avatar.note .header:after {
    /* border-right: 7px solid #dae9eb !important; */ /*target*/
}
.thread-event {
    background-color: #fff0 !important;
    padding: 0 2px 9px;
    margin: 0 0 16px 60px;
    overflow: hidden;
}
.thread-event i {
    color: #6a798c !important;
}
.thread-event .type-icon {
	border: .5px solid #d8d8d8;
    padding: 9px 12px;
    background-color: #fff;
    position: relative;
    left: -2px;
    top: 0;
    float: left;
}
#thread-items::before {
    margin-left: 79px;
}
#response_options > form { /* Ticket View */
	border: .5px solid #cfd4d6;
    /* border-top: none; */
    border-radius: 6px;
}
#response_options > form > table {
    table-layout: fixed;
    padding: 12px;
}
#response_options > form > table td {
    padding: 0 0 10px 0;
}
tbody#to_sec select,
tbody#resp_sec select {
    width: 400px;
}
#ticket_thread.tab_content {
    position: initial;
}
.dropzone {
    z-index: 1;
    position: relative;
    top: -2px;
}
.dropzone .redactor-box {
    margin-top: 14px;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
}
.redactor-box {
    margin: 0 0 0 0 !important;
    border-radius: 6px 6px 0 0 !important;
}
.redactor-toolbar {
    background: #f7f7f7;
}
.redactor-toolbar li a {
    color: #128dbe;
}
.redactor-toolbar li a:hover {
    background-color: #128dbe;
}
.redactor-editor {
	font-family: 'Open Sans', sans-serif !important;	
}
.filedrop .dropzone {
    border: 1.5px dashed #75a4b1!important;
    padding: 4px 10px 10px 10px !important;
    border-radius: 0 0 5px 5px !important;
    background-color: #e8f6fa!important;
    color: #7f7f7f !important;
}
.filedrop .dropzone a {
    color: rgb(18, 141, 190);
    text-decoration: underline !important;
}
#response_options > form {
    background: #ffffff;
}
table.ticket_info.custom-data th {
	padding: 13px 17px;
    border-radius: 5px 5px 0 0;
    border-bottom: 1px solid #ccc;
    background-color: initial;
}

table.ticket_info.custom-data tr td {
    padding: 0 0 17px 17px;
}
table.ticket_info.custom-data tr:first-child td {
    padding: 17px 0 17px 17px;
}
table.ticket_info.custom-data tr:only-child td {
	padding: 17px 0 17px 17px;
}
#tasks_content .list td a,
#tasks_content .list td:nth-child(5) {
    font-size: 14px;
}
.tasks .list .task-number a, 
#tasks_content .list td a[title="Preview Task"] {
	font-size: 10px;
    padding: 1px 3px 0 13px;
    min-height: 16px;
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: top 2px left 2px;
background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23128dbe' d='M21%2C7L9%2C19L3.5%2C13.5L4.91%2C12.09L9%2C16.17L19.59%2C5.59L21%2C7Z' /%3E %3C/svg%3E");
}
a#reload-task {
    float: none;
    border: initial;
    font-size: inherit;
}
.merged-parent,
.merged-child {
    font-size: 15px;
    border: 1px solid #777777;
    padding: 2px 6px;
    position: relative;
    top: -3px;
    background: #00000003;
    border-radius: 2px;
}
#relations a.Ticket.preview {
    position: relative;
    top: 2px;	
}
#ticket_tabs_container #relations td {
    padding-left: 0;
}
#ticket_tabs_container #relations table.list th:first-child {
    background-image: initial;
    width: 2% !important;
}
#ticket_tabs_container #relations table.list th:nth-child(2) {
	width: 8% !important;
}
#ticket_tabs_container #relations table.list th:nth-child(3) {
	width: 50%;
    font-size: 14px;
}
#ticket_tabs_container #relations table.list th:nth-child(4),
#ticket_tabs_container #relations table.list th:nth-child(5),
#ticket_tabs_container #relations table.list th:nth-child(6) {
	width: 12% !important;
}	
	
/* ==========================================================================
 PRIORITY POPUP (osTicket Awesome mod)
========================================================================== */
table.list th.head-priority a {
    width: 3px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 6px !important;
}
td.cursor.priority {
    padding: 0;
}
table.list tbody tr:nth-child(2n+1):hover td {
    background: #ffe9d2;
}
td.Emergency,
table.list tbody tr:hover td.Emergency,
table.list tbody tr:nth-child(2n+1):hover td.Emergency {
	background: url(../../osta/img/priority-pattern-overlay.png) #fc6872!important;
}
td.High,
table.list tbody tr:hover td.High,
table.list tbody tr:nth-child(2n+1):hover td.High {
	background: url(../../osta/img/priority-pattern-overlay.png) #e5bc61!important
}
td.Normal,
table.list tbody tr:hover td.Normal,
table.list tbody tr:nth-child(2n+1):hover td.Normal {
	background: url(../../osta/img/priority-pattern-overlay.png) #a5cb59!important;
}
td.Low,
table.list tbody tr:hover td.Low,
table.list tbody tr:nth-child(2n+1):hover td.Low {
	background: url(../../osta/img/priority-pattern-overlay.png) #5bb3f5!important;
}
table.list tbody tr.highlight td {
	/* background: #ddd !important; */
}
table.list tbody tr.highlight td {
    border-top: .1px solid #aaa !important;
    border-bottom: .1px solid #aaa !important;
    background-color: #ddd;
}
td.priority {
	margin: 0!important;
	padding: 0!important;
    width: 14px;
	overflow: hidden;
	border-left: 1px solid #DCDCDC!important;
}
td.priority a {
	border-collapse: collapse;
    display: block;
    text-decoration: none;
    font-size: 1px;
    margin: 0!important;
    height: 34px;
    width: 15px;
}
.priority-popup {
    font-size: 17px;
    line-height: 30px;
}
.tip_content h2,
.priority-popup h3 {
    margin: 4px 0 9px 0; /*conflicts with Status link on individual Ticket margin: */
    color: #777777;
    font-weight: 400;
    font-size: 20px;
}
.tip_content.tickets h2 {
    margin: 0;
}
.priority-popup input[type="radio"] {
    margin: 0 5px 0 0;
}
.color {
    float: left;
    margin-right: 5px;
    padding: 0 0 0 0;
    border-bottom: 6px solid #fff;
}
div#priority-4,
div#priority-3,
div#priority-2, 
div#priority-1 {
	clear: both;
}	
div#priority-4 .color,
div#priority-3 .color,
div#priority-2 .color,
div#priority-1 .color {
    width: 10px;
    height: 24px;
    position: relative;
    top: 4px;
}
td.priority.Emergency a {
	color: #fc6872;
}
div#priority-4 .color {
    background: #fc6872;
}
td.priority.High a {
	color: #e5bc61;
}
div#priority-3 .color {
    background: #e5bc61;
}
td.priority.Normal a {
	color: #a5cb59;
}
div#priority-2 .color {
    background: #a5cb59;
}
div#priority-1 .color {
    background: #5bb3f5;
}
.priority-levels {
    display: flex;
}
.priority-levels .group {
    margin: 0 40px 0 0;
}
.priority-levels .group .input-wrap {
    float: left;
    margin: 3px 0 0 0;
}

td.osta-ticket-action {
    cursor: url(../../osta/icons/edit.png) 10 15, url(../../osta/icons/edit.svg), pointer!important;
    padding: 0 !important;	
}
div.body #msg_warning,
div.body #msg_error, 
div.body #msg_notice,
div.body #msg_alert {
    margin: 0 0 8px 0;
}

/* ==========================================================================
 TICKET VIEW - 2019
========================================================================== */
input.ckb {
    margin: 0 auto;
}
table.list tbody td.osta_username {
    font-size: 14px;
}
th.osta_priority,
th.osta_priority a {
    width: 16px;
}
th.osta_priority a {
    text-shadow: initial !important;
    font-size: 0 !important;
}
table.list thead th.osta_priority a {
	padding: 0;
    height: 39px;
}
table.list tbody tr.highlight td.osta_priority {
	filter: grayscale(90%);
}
table.list tbody tr.highlight td.osta_priority_emergency {
    filter: grayscale(100%) brightness(125%);
}
table.list tbody td.osta_priority {
    padding: 0;
    border: 2px solid #fff !important;
    border-top: 1px solid #fff !important;
    border-bottom: 1px solid #fff !important;	
}
td.osta_priority.osta_priority_emergency {
    background: url(../img/priority-pattern-overlay.png) #fc6872!important;
}
td.osta_priority_high {
    background: url(../img/priority-pattern-overlay.png) #e5bc61!important;
}
td.osta_priority_normal {
    background: url(../img/priority-pattern-overlay.png) #a5cb59!important;
}
td.osta_priority_low {
    background: url(../img/priority-pattern-overlay.png) #5bb3f5!important;
}
td.osta_priority div {
    display: none;
} 

/* temp mobile solution - delete once Priority colors are back in mobile view */
td.cursor.priority {
    background: #bbb !important;
}

/* ==========================================================================
 INPUTS
========================================================================== */
select {
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: url(../../osta/svg/chevron-down-thin.svg) no-repeat;
    background-position: right 4px center!important;
    background-size: 20px 20px;
    background-color: #fff;
    color: #424242;
    border: .5px solid #bfbfbf !important;
    height: 32px;
    min-width: 305px;
    position: relative;
    top: -1px;
    padding: 0 17px 0 8px !important;
    font-family: 'Open Sans', sans-serif;
}
.rtl select {
    background-position: left 5px center!important;	
    padding: 0 8px 0 0 !important;
}
input[type=text], input[type=password], textarea, input {
    min-width: 100px;
    margin: 3px 0 3px 0; /*target (Staff login page)*/
    height: 32px;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    padding: 0 0 0 8px;
    border: .5px solid #bfbfbf;
    outline: none!important;	
}
textarea {
    padding: 7px 0 0 8px;
    height: initial;	
}
.rtl input[type=text], .rtl input[type=password], .rtl textarea, .rtl input {
    padding: 0 8px 0 0;
}
input[type="button"], input[type="reset"], input[type="submit"] {
    color: #898989;
    border: .5px solid #898989;
	padding: 8px 26px !important;
    height: unset;
}
input[type="submit"], input[type="reset"], input[type="button"], .action-button, .button, button, button.link.button, input[type="button"] {
    border-radius: 3px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    /*margin: 0;*/ 
    padding: 6px 16px;
    color: #898989;	
    cursor: pointer;
}
input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .action-button:hover, .button:hover, button:hover, button.link.button:hover, input[type="button"]:hover {
    /*padding: 6px 16px;*/ /*target*/
    background: #ccd1d6;
    color: #3b4450;
    border: .5px solid #8c9aac;
}
a.green.button {
    background: #fff;
    border: .5px solid #b9b9b9;
}
.green.button:hover {
    background: #ffffff !important;
    border: .5px solid #8c9aac !important;
    color: #3b4450 !important;
    box-shadow: unset;
}
form[action="profile.php"] .action-button,
form[action="profile.php"] .action-button:hover {
    /*height: 40px;*/ /*target*/
}
input[type="submit"], input[type="reset"], input[type="button"], button, button.link.button, input[type="button"] {
    will-change: background;
    transition: all 0.3s ease-in-out;
	font-family: 'Open Sans', sans-serif !important;	
}
form#login input[type="text"],
form#login input[type="password"] {
    margin: unset;
}
.action-button {
	margin: 0;
}
input.translatable {
    height: 32px;
    width: 405px;
    border: .5px solid #bfbfbf;	
    position: relative;
    top: -1px;
    color: #424242;
}
input[type="text"].translatable {
    border-right: initial !important;
}
div.translatable {
    border: .5px solid #bbb;
    border-right: .5px solid #bbb;
    border-radius: 3px;
}
.input.attached {
    height: 32px;
}
.input.attached input {
    min-width: 169px;
    height: 32px;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    padding: 0 0 0 8px;
    border: .5px solid #bfbfbf;
	border-right: 0;
    float: left;	
}
.rtl .input.attached input {
    padding: 0 8px 0 0;
}
input#user-email {
    margin: 0 0 4px 0!important;
}
.button.attached {
    margin-left: -4px;
    margin-right: -4px;
    margin: 0 -4px 5px -4px;
    box-shadow: none !important;
    border: .5px solid #bfbfbf !important;
    border-left: 0 !important;
    border-radius: 0 3px 3px 0;
	float: left;
}
.banlist .button.attached {
    margin: 3px -4px 5px -4px;
}
.input.attached .button.attached {
    height: 100%;
    box-sizing: border-box;
    border: unset !important;
}
.button.attached:after {
	clear:both;
}
a.attached.button:hover {
    border-left: 0;
}
a.attached.button i.icon-search {
    top: 5px;
}
input[type="radio"] {
    min-width: initial;
    margin: 0 3px 0 0;
    width: 16px;
    height: 15px;
    position: relative;
    top: 3px;
	-webkit-appearance: radio !important;
}
.rtl input[type="radio"] {
    margin: 0 0 0 3px;
}
input[name="title"] {
    margin: 0 !important;
}
td.required + td input,
td.required + td select,
td.required + td .select2-selection,
div#definition td.required + td div.translatable,
form[action*="change-password"] input[type="text"],
form[action*="change-password"] input[type="password"] {
    border-right: 2px solid red !important;
} 
#definition td.required + td input {
    border-right: 0 !important;
}
select[name="source"] {
    padding-left: 5px;
}
.rtl select[name="source"] {
    padding-right: 5px;
}
.settings .error {
    /*display: none;*/ /*why?!*/
} 
input[name$="-ext"] {
    min-width: 30px;
    width: 60px;
}
input[placeholder="Keywords � Optional"] {
    padding: 0 0 0 6px !important;
}
.rtl input[placeholder="Keywords � Optional"] {
    padding: 0 6px 0 0 !important;
}
#new-user-form input[type="text"],
#new-user-form input[type="email"] {
    width: 320px;
}
#new-user-form input[size="5"] {
    width: 56px !important;
}
#new-user-form select {
    min-width: 91px;
}
#sequences .manage-buttons {
    margin-right: 80px;
}
.rtl #sequences .manage-buttons {
    margin-left: 80px;
}
.settings input[type="file"] {
    height: 22px;
    margin: 0;
    padding: 5px;
}
#sequences div[style="display:inline-block"] {
    font-size: 16px !important;
    line-height: 16px;
}
input[type="file"] {
    padding: 6px 0 29px 6px;
    background: #d7f4ff;
    height: 0;	
}
.buttons input {
    min-width: 100px;
}
#theme-save-button:hover {
    background: #fff;
}
button#do_search,
input[type="submit"], 
input[type="reset"], 
input[type="button"],
form.-redactor-container button[type=submit] {
    margin: 0 4px;
    box-shadow: none;
    padding: 9px 30px !important;
    color: #515d6d;
    border: initial !important;
    background: #dcdfe2;
    letter-spacing: 1.6px;
    font-weight: 700;
}
button#do_search {
    padding: 9px 43px !important;
}
.dialog input[value="Reset"] {
    display: none;
}
#user-form form.user input[type="tel"],
#user-form form.user input[type="text"] {
    min-width: 222px;
}
td input[type="tel"] + input {
    width: 50px !important;
    min-width: 50px !important;
}
#basic_search input[type="submit"] {
    border: .5px solid rgba(166, 182, 166, 0.7294117647058823) !important;
}
.save.pending,
input[type="submit"],
input[value="Create"],
input[style="color: rgb(255, 0, 0);"],
form.-redactor-container button[type=submit] {
    color: #3c763d !important;
    background-color: #d0e9c6;
    box-shadow: unset;
	border: initial !important;
}
input[style="color: rgb(255, 0, 0);"] {
    box-shadow: unset;
    -webkit-animation: async-save-warning-pulse 1.5s ease-in-out infinite;
    animation: async-save-warning-pulse 1.5s ease-in-out infinite;
}
@-webkit-keyframes async-save-warning-pulse {
	0%{box-shadow: 0 0 0 0 #75a4b1, 0 0 0 0 rgba(77, 130, 85, 0.44)}
	50%{box-shadow: 0 0 0 0 #75a4b1, 0 0 0 4px rgba(77, 130, 85, 0.44)}
	100%{box-shadow: 0 0 0 0 #75a4b1, 0 0 0 0 rgba(77, 130, 85, 0.44)}
}
@keyframes async-save-warning-pulse {
	0%{box-shadow: 0 0 0 0 #75a4b1, 0 0 0 0 rgba(77, 130, 85, 0.44)}
	50%{box-shadow: 0 0 0 0 #75a4b1, 0 0 0 4px rgba(77, 130, 85, 0.44)}
	100%{box-shadow: 0 0 0 0 #75a4b1, 0 0 0 0 rgba(77, 130, 85, 0.44)}
}
input[type="submit"]:hover,
input[value="Create"]:hover,
.save.pending:hover {
    color: #2a3e2a !important;
    box-shadow: unset;
}
.button:hover, 
.button:active,
.save.pending:hover,
button#do_search:hover,
input[type="reset"]:hover,
input[type="button"]:hover, 
input[type="button"]:active,
input[type="reset"]:hover, 
input[type="reset"]:active,
button.link.button:active, 
form.-redactor-container button[type=submit]:hover,
form.-redactor-container button[type=submit]:active {
    box-shadow: unset;
    border: initial !important;
    background: #c9cdd0;
    color: #343a42;
    /* height: unset; */ /*target*/
}
.action-button:hover, 
.action-button:active {
    box-shadow: unset;
    background: #fff;
}
input.button[name="delete"]:hover {
    border: .5px solid #c61818 !important;
    color: #c61818 !important;
    background: #edd5d6 !important;
}
a.green.button.action-button.ticket-task-action {
    /* padding: 9px 30px !important; */ /* target */
}
.action-button.muted {
    box-shadow: none;
}
.action-button i {
    /*position: initial !important;*/
    /*background-position: 1px 1px;*/  /*whatever reason this is here, it needs to be targeted specifically*/ /*STILL NEEDED?!*/
    /*background-repeat: no-repeat;*/
}
.action-button i:hover {
    /*background-position: 1px 1px;*/  /*whatever reason this is here, it needs to be targeted specifically*/
}
.action-dropdown, 
.noclick-dropdown {
    width: fit-content;
}
.action-dropdown ul li a > i {
    background-position: 0 0 !important;
    width: 20px !important;
    height: 20px !important;
    top: 6px;
    font-size: 21px;
    background-repeat: no-repeat !important;
    margin: 0 6px 0 0;
}
.rtl .action-dropdown ul li a > i {
    margin: 0 0 0 6px;
}
.action-dropdown ul li > a {
    line-height: 30px;
}
.rtl .action-dropdown ul.bleed-left li > a {
    padding-right: 8px;
}
#msg_info i.icon-info-sign {
    display: none;
}
.action-button i.icon-caret-down,
.action-button.muted i.icon-caret-down {
    border-left: .5px solid #ccc;
    float: right !important;
    padding: 0 0 0 4px;
    height: 21px;
}
.rtl .action-button i.icon-caret-down {
    border-right: initial;
    margin-left: 6px;
    margin-right: 0;
}
span.action-button {
    margin: 0 2px;
}

/*span.action-button[data-original-title="Change Status"] {
    margin-left: 0;
}*/
a#post-note,
.icon-mail-reply:before, .icon-reply:before {
    color: #128dbe;
}
a#post-note:hover {
    background-color: #fff;
}
a.attached.button:hover {
    background: #fff;
    background: -moz-linear-gradient(top, #fafafa 0%, #e7ebf0) #ffffff;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e7e7e7)) #ffffff;
}
.link.button {
    background: #fff;
    border: .5px solid #b1b1b1;
    padding: 6px 16px;
    color: #b1b1b1;
}
.link.button:hover, .link.button:active  {
	background: #ccd1d6;
    color: #fff;	
}
.red.button.action-button {
    /*margin-right: 0;*/ /*whatever reason this is here, it needs to be targeted specifically*/
}
.red.button.action-button:hover > a [class^="icon-"] {
    color: #d01919;
}
.red.button:hover {
    box-shadow: none;
    color: #d01919;
    border: .5px solid #d01919 !important;
    background-color: #fff;
	height: 22px;	
}
button.red.button[name="delete"] {
    background: #fff;
    border-width: .5px !important;
    border: .5px solid #aa9e9e;
    box-shadow: unset;
}
button.red.button[name="delete"]:hover {
    background: #ffd9d9 !important;
    border: .5px solid #cd8f8f !important;
}
.button-text.advanced-search svg {
	width: 16px !important;
    height: 16px !important;
    position: relative;
    fill: #128dbe;
    top: 0 !important;
    left: 4px;
    margin: 2px 4px 0 0;
    float: right;
}	
.action-button.advanced-search.gray-light2 {
    margin-right: 0;
    margin-left: 8px;
    position: relative;
    /* right: -3px; */
}
.rtl .action-button.advanced-search.gray-light2 {
    right: 1px;
}
.button-text.advanced-search:hover > svg {
    fill: #0c5c7b;
}
.action-button:hover > i {
    /*color: #0c5c7b;*/ /*target*/
}
.action-button:hover > a [class^="icon-"] {
    color: #0c5c7b;
}
.action-button.danger {
    background: -moz-linear-gradient(top, #fafafa 0%, #e7ebf0) #ffffff;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f3f3f3)) #ffffff;
    border: .5px solid #aaa;
    opacity: 1;
}
.action-button.danger:hover {
    background: #ef0d0d !important;
}
#content .pull-right .action-button.muted,
.action-button.muted[data-dropdown="#sort-dropdown"] {
    float: right;
    margin: 0 0 0 6px; /* sort button on ticket pages */
}
.rtl .action-button.muted[data-dropdown="#sort-dropdown"] {
    float: left;
    margin: 6.5px 6px 0 0;	
}
.tasks .action-button.muted[data-dropdown="#sort-dropdown"] {
    margin: 0 0 0 6px;
}
.valign-helper {
    margin-top: 48px !important;
}
button.translatable {
    margin: 1px 1px 0 0;
    background: unset;
}
input ~ button.translatable {
	width: 28px;
    height: 28px;
    padding: 0;
}
input ~ button.translatable:hover {
    background: #f7db94bd !important;
    border: initial;
}
input.translatable[value="Support"] {
    width: 247px !important;
    height: 30px !important;
    padding: 0 0 0 8px !important;
}
.button-text.advanced-search,
span.sort-button-text,
.pull-right.flush-right.page-top .action-button.muted {
    letter-spacing: initial;
    color: #585858;
}
button[type=submit], 
input[type="submit"], 
.primary.button {
	box-shadow: unset;
}
button[name="remove-users"] {
    background: #fff;
}
#user-info a.inline.button {
    padding: 6px 16px;
    margin: 0 0 0 10px;
    border: .5px solid #797777;
}
#user-info a.inline.button:hover {
    height: 22px;
    line-height: 22px;
}
.action-dropdown ul li > a > i[class^="icon-"]:before {
    top: 1px !important;
    margin: 0 10px 0 0 !important;	
}
.action-dropdown ul li > a:hover > i[class^="icon-"]:before {
    color: #fff !important;
}
#advanced-search i.icon-save {
	position: relative;
    top: 1px;
    margin-right: 6px !important;
}
button.save.button {
    background: #dcdfe2;
}
button.save.button:hover {
    background: #c9cdd0;
}
form#advsearch button#do_save { /*advanced ticket search*/
	color: #3c763d !important;
    background-color: #d0e9c6;
    padding: 9px 40px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
}
form#advsearch button#do_save:hover { /*advanced ticket search*/
	color: #2a3e2a !important;
    background: #ccd1d6;
    box-shadow: initial;	
}

/* ==========================================================================
 SVG ICONS - TWEAKS
========================================================================== */
.action-button i {
    position: relative !important;
    top: 2px !important;
    left: 1px;	
    margin: 0 4px 0 0;	
}
i.icon-upload:before {
    top: 0;
    width: 32px;
}
i.icon-mail-reply {
    top: 1px !important;
}
.tip_content .links {
    border-top: .5px solid #ddd;
}
.tip_content i.icon-info-sign.faded {
    top: 0; /*target*/
    margin-right: 4px !important;
}
button.action-button.pull-right .icon-gear:before {
    top: -2px;
}
form[action="#sequence/manage"] i.icon-plus {
    float: initial;
}
input[type="submit"] i, input[type="reset"] i, input[type="button"] i, .action-button i, .button i {
    margin-right: 4px;
}

/* ==========================================================================
 TOOLTIPS
========================================================================== */
.tooltip {
  position: absolute;
  z-index: 9999999;
  display: block;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-break: auto;
  line-height: 1.428571429;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  font-size: 12px;
  opacity: 0;
  filter: alpha(opacity=0);
}
.tooltip.in {
  opacity: 0.9;
  filter: alpha(opacity=90);
}
.tooltip.top {
  margin-top: -3px;
  padding: 5px 0;
}
.tooltip.right {
  margin-left: 3px;
  padding: 0 5px;
}
.tooltip.bottom {
  margin-top: 3px;
  padding: 5px 0;
}
.tooltip.left {
  margin-left: -3px;
  padding: 0 5px;
}
.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #ffffff;
  text-align: center;
  background-color: #000000;
  border-radius: 4px;
}
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000000;
}
.tooltip.top-left .tooltip-arrow {
  bottom: 0;
  right: 5px;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000000;
}
.tooltip.top-right .tooltip-arrow {
  bottom: 0;
  left: 5px;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000000;
}
.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #000000;
}
.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #000000;
}
.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000000;
}
.tooltip.bottom-left .tooltip-arrow {
  top: 0;
  right: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000000;
}
.tooltip.bottom-right .tooltip-arrow {
  top: 0;
  left: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000000;
}
.tooltip {
    font-family: "Open Sans", Helvetica, Arial, sans-serif !important;
}
/* Tooltip palette flips header colours: bg uses --header-title (the
   header's text colour) so the tooltip stands out against the header,
   and text uses --header-bg (the contrast pair) so it stays readable.
   Effectively a swap — whatever the header is on a given theme, the
   tooltip is its inverse. */
.tooltip-inner {
    padding: 6px 10px !important;
    background-color: var(--header-title) !important;
    color: var(--header-bg) !important;
}
.tooltip.bottom {
    margin-top: 1px !important;
}
.tooltip.top {
    margin-top: 0 !important;
}
.tooltip.top .tooltip-arrow {
    border-top-color: var(--header-title) !important;
}
.tooltip.bottom .tooltip-arrow {
    border-bottom-color: var(--header-title) !important;
}
#ticket-preview_container .ticket_info {
    border: initial;
}
#ticket-preview_container .ticket_info th {
    color: #4c5156 !important;
    font-weight: 500;
}
.ticket_info .preview {
    float: none;
    padding: 0;
}
a.manage-collaborators.preview {
    border: initial !important;
}
#ticket-preview_container .tab_content {
    background: #fff;
    border: .5px solid #aaa;
    border-radius: 6px;
}
.tip_menu {
    margin: 20px 0 0 0;
    border-top: .5px solid #aaa;
}
.tip_menu li a:hover {
    color: #128dbe;
}
.tip_menu li a {
    color: #128dbe;
    display: block;
    width: auto;
    float: left;
    padding: 0 16px;
    border-right: .5px solid #ffffff;	
}

/* ==========================================================================
 ALERTS: ERRORS, NOTICES AND WARNINGS
========================================================================== */
body.tickets-page div#popup .error {
	display: none;
}
body.tickets-page div#popup div#new-task-form .error {
    display: inline;
}

/* ==========================================================================
 TICKET OPEN ticket-open.inc.php
========================================================================== */
.dialog h3 {
    color: #777777;
    font-family: 'Product Sans', 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 25px;
}
.dialog hr {
    visibility: hidden;
}
input#user-search {
    font-size: 14px;
}
#the-lookup-form #msg_info {
    margin: 0 0 20px 0;
    /*padding: 14px 10px 14px 16px;*/ /*Conflicts with Tickets > Open New > Lookup*/
}
.form_table th,
div.section-break {
    text-align: left;
    background: #eee;
    background-color: initial;
    border: initial;
    padding: 4px 10px 10px 0;
    font-size: 126%;
    color: #777777;
    /*font-family: 'Lato';*/
    font-weight: 400;
}

div.section-break {
	padding-top: 0 !important;
}

.form-header.section-break {
    margin: 20px 0 15px 0;
}
.form-header.section-break h3 {
    margin: 0;
    font-family: 'Open Sans', sans-serif;	
}
.form-header.section-break em p {
    font-size: 14px;
    margin: 0;
}

.form_table .form-instructions {
    font-size: 14px;
}
.form_table .form-instructions p {
    margin: 0;
}
.form_table {
    border: initial;
    padding-top: 10px !important;	
}
.form_table.fixed .form_table {
    padding-top: 0 !important;	
}
.form_table.fixed .form_table i.icon-retweet,
.form_table.fixed .form_table i.icon-plus {
    width: 19px;
    top: 1px;
    right: 0;
    padding: 0;
    margin: 0;
    padding: 0 6px 0 0;
    float: left;
}
.form_table.settings_table td textarea {
    padding: 8px 0 0 8px;
}
.form_table.settings_table .indented {
    padding-left: 0;
}
.form_table td {
    border-bottom: initial;
}
h3.title,
.form_table th em,
.thread-body.bleed h3 {
	display: block;
    color: #777;
    font-style: initial;
    font-size: 18px;
    margin-top: 10px;
    font-weight: 500;
    font-family: 'Open Sans', sans-serif;
}
.form_table th em strong,
.thread-body.bleed h3 {
    font-weight: 500;
}
.form_table tbody tr:first-child th em {
    margin: 0;
}
.form_table th em b {
    font-weight: normal;
}
.form_table .required {
    font-weight: 500;
}
.thread-body h1,  /*Open Ticket page */
.thread-body h2, 
.thread-body h3 {
    margin-top: 20px;
    margin-bottom: 0;
}
.thread-body.bleed {
    background: initial;
}
.time-zone-msg {
    color: #777;
    font-style: italic;
    font-size: 11px;
}
input#user-email {
    width: 336px;
}
input#user-name {
    width: 360px;
}
input[type="checkbox"] {
    min-width: initial;
}
#dynamic-form select {
    width: 330px;
    border: .5px solid #bfbfbf;	
}
select#time {
    padding-right: 29px !important;
}
table.grid.form select[name*="time"] {
    width: 173px !important;
}
.rtl select#time {
    padding-left: 29px !important;
}
#response_options input[type=text], 
#response_options textarea:not(.richtext) {
    border: .5px solid #bfbfbf;
}
form[action="tickets.php?a=open"] table.form_table.fixed tbody th[colspan="2"]:nth-child(1) {
    padding-top: 25px !important;
}
form[action="tickets.php?a=open"] table.form_table.fixed tbody:nth-child(2) th[colspan="2"]:nth-child(1) {
    padding-top: 0 !important;
}
.tickets .form_table.fixed,
.tickets-page .tickets .form_table {
    width: 100% !important;
}
.tickets .form_table {
    width: 660px;
}
.form_table.fixed select,
.form_table.fixed .select {
    width: 320px;
}
.form_table.fixed label {
    margin-right: 20px;
}
tr#ccRow td.userRow-button a.inline.button,
tr#userRow td.userRow-button a.inline.button,
.form_table.fixed .form_table .button {
    padding: 4px 0 4px 10px !important; /* Staff Open a New Ticket buttons */
}
.form_table.fixed .button,
.form_table.fixed .button:hover, 
.form_table.fixed .button:active {
    border: .5px solid #bfbfbf !important;
    /* background-color: #e4e4e4 !important; */
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f3f3f3)) #ffffff;	
}

#time-zone td {
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    top: -5px;
}
input.hasDatepicker ~ select {
    width: 103px !important;
}
.tickets a.inline.button {
    min-width: 95px;
}

/* ==========================================================================
 TABLES - MISC
========================================================================== */
table.custom-info th,
td[style="border-bottom: 1px dotted black"] {
    border: none !important;
}
table.custom-info td,
td[style="width:30%;border-bottom: 1px dotted #ccc"] {
    border-bottom: .5px solid rgba(0,0,0,0.1);
}

/* ==========================================================================
 LOADING ANIMATION
========================================================================== */
#loading {
    display: none;	
    vertical-align: middle;
    border: initial;
    padding: 0;
    width: 100px;
    height: 100px;
    background: initial;
    position: fixed;
    z-index: 3000;
    box-shadow: initial;
    left: calc(50% - 50px) !important;
    top: 50% !important;
}
#loading h1, #upgrading h1 {
    display: none;
}
.loading-icon {
	padding: 0;
    margin-left: -8px;
    margin-top: 8px;
    background-color: #fff;
    height: 18px;
    width: 18px;
    display: block;
    background-size: contain;
    border: 4px solid #fff;
    border-radius: 50%;
    position: fixed;
    z-index: 3000;
}
i.icon-spinner {
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100px;
    height: 100px;
}
i.icon-spinner:before {
	display: block !important;
}
#loading i.icon-spinner:before,
#upgrading i.icon-spinner:before {
    background-image: url(../../osta/img/loading.svg);
    content: ' ';
    background-position: center !important;
    border-radius: 50%;
    vertical-align: middle;
    width: 100px !important;
    height: 100px !important;
    background-size: 100px 100px !important;
    top: 0 !important;
}
.icon-3x {
    font-size: initial;
}
.spin {
    -webkit-animation: gi-spin 1.5s infinite linear;
    animation: gi-spin 1.5s infinite linear;
}
@-webkit-keyframes gi-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg); } 
}
@keyframes gi-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg); } 
}
#popup,
.modal.fade .modal-dialog {
	opacity: 0;
	animation-name: lightSpeedIn;
	animation-duration: 450ms;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
            transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
            transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
            transform: skewX(-5deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
            transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
            transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
            transform: skewX(-5deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

#popup,
.modal.fade .modal-dialog {
  -webkit-animation-name: lightSpeedIn;
          animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}

/* ==========================================================================
 DASHBOARD
========================================================================== */
.dashboard div[style="min-height:25px;"],
.directory div[style="min-height:25px;"] {
    float: right;
    position: relative;
    top: 1px;
    right: -13px;
}
.dashboard div[style="min-height:25px;"] {
    top: -6px;
}
.directory div[style="min-height:25px;"] input[type="text"] {
    margin: 0 6px 0 0;
    height: 30px;
}
.directory div[style="min-height:25px;"] .select2.select2-container {
    margin: 0;
    height: 35px;
}
.directory div[style="min-height:25px;"] input[type="submit"] {
    position: relative;
    top: -3px;
    height: 20px;
    padding: 4px 0 6px 0 !important;
    margin: 0 -11px 0 -6px;
}
.directory div[style="min-height:25px;"] input[type="text"] {
	margin: 0 4px 0 0;
}
form[action="directory.php"] input[type="submit"] {
    padding: 5px 16px !important;
}
#ticket-count {
	float: right;
    position: relative;
    top: 10px;
}
#user-profile .floating-options i.icon-edit, #user-profile .floating-options i.icon-share {
    /*padding: 3px !important;*/
}
table.list thead th:first-child a.desc {
    border-radius: 6px 0 0 0;
}
.directory table.list td {
    font-size: 13px !important;
}
.table tr.header {
    border-bottom: 0;
}
.thread-body i {
	width: 100%;
}
input.staff-username.typeahead {
    margin: 0;
}
.table tr:not(:last-child):not(.header) {
    border-bottom: 0;
}
.tab_content:not(.left) {
    padding: 10px; 
}
.ui-datepicker-trigger:after {
	content: ' ';
	background-image: url(../icons/calendar-clock.svg);
	background-repeat: no-repeat;
	width: 22px;
	height: 22px;
	position: relative;
	opacity: 1;
	visibility: visible;
	display: inline-block;
	top: 3px;
	left: 2px;
	background-size: 20px;
}
.ui-datepicker-trigger:hover:after {
    opacity: 1;
}
.ui-datepicker-trigger {
    width: 30px;
}
img[src="./images/cal.png"] {
    display: none;
}
button.ui-datepicker-trigger {
	border: .5px solid #aaa;
    display: inline;
    height: 32px;
    width: 40px;
    top: 3px;
    margin-left: 8px;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f3f3f3)) #ffffff;	
}
button.ui-datepicker-trigger:hover {
	padding: 0;
}
.rtl button.ui-datepicker-trigger {
    margin-right: 8px;
    margin-left: 0;
}
div[style="min-height:25px;"] {
    float: right;
}
.directory h2 {
    margin-bottom: 26px;
}
.directory select#did {
    min-width: 184px;
}
.dashboard button.link.button {
    padding: 8px 12px;
    border-color: #d3d3d3;
}
.dashboard button.link.button:hover {
    padding: 8px 12px;
    border: .5px solid #d3d3d3;
}
.dashboard input.hasDatepicker {
    min-width: 100px !important;
    margin: 0;
    height: 30px;
}
.dashboard button.ui-datepicker-trigger {
    top: 4px;
}
.dashboard .select2-selection.select2-selection--single {
    margin: 0 0 2px 0;
    height: 32px;
}
.dashboard button.green.button.action-button.muted {
    background: #fff;
    padding: 1px 9px 7px 14px;
    top: -1px;
    margin: 0 -6px 0 4px !important;
}
.dashboard button.green.button.action-button:before {
    content: "";
    position: relative;
    margin: 4px 0 0 0;
    display: inline-block;
    top: 3px;
    height: 16px;
    width: 16px;
    background-size: 18px;
    background-position: center;
	left: initial;
    right: initial;
    background-color: initial;
background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23128dbe' d='M17.65%2C6.35C16.2%2C4.9 14.21%2C4 12%2C4A8%2C8 0 0%2C0 4%2C12A8%2C8 0 0%2C0 12%2C20C15.73%2C20 18.84%2C17.45 19.73%2C14H17.65C16.83%2C16.33 14.61%2C18 12%2C18A6%2C6 0 0%2C1 6%2C12A6%2C6 0 0%2C1 12%2C6C13.66%2C6 15.14%2C6.69 16.22%2C7.78L13%2C11H20V4L17.65%2C6.35Z' /%3E %3C/svg%3E");
}

.dashboard input.hasDatepicker {
    min-width: 100px !important;
}
form[action="dashboard.php"] #basic_search .select {
	max-width: 200px !important;
}
.dashboard .tab_content {
    min-height: initial;
}
.dashboard button.link.button {
    margin: 6px 0 0 0;
}
.dashboard ul.tabs li a {
    margin-top: 4px;
    display: inline;
}
.dashboard hr {
    display: none;
}
/* My Profile */
i.icon-map-marker {
	top: -4px !important;
}
#recipients .select2-container .select2-search--inline {
    float: initial !important;
}
table.table.two-column {
    width: initial !important;
}
input[name="phone_ext"] {
	min-width: 35px !important;
    width: 35px !important;
}
button#change-pw-button {
    height: 21px;
    position: relative;
    top: -3px; /*target?*/
}
form[action="profile.php"] a.button.no-pjax {
    margin-top: 10px;
    height: 22px;
}
.grid.form tr:last-of-type input[type="password"] {
    margin-top: 9px; /* Profile > Change Password > last field */
}

/* ==========================================================================
 DATEPICKER
========================================================================== */
.ui-datepicker.ui-datepicker-multi {
    width: auto !important;
}
.ui-widget-content {
    border: .5px solid #c7c7c7;
    background: #e7e7e9;
    color: #333;
}
.ui-widget-header {
    border: none!important;
    background: var(--nav-bar-bg);
    position: relative!important;
    z-index: 100!important;
    color: var(--nav-bar-link);
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: .5px solid #ccc;
    background: #fff;
    font-weight: 500;
    color: #128dbe;
    height: 25px;
    width: 28px;
}
.ui-datepicker-calendar a.ui-state-default.ui-state-hover {
	color: #128dbe;
    font-weight: 500;
    border: .5px solid #97bdcb;
    background: #bdedff !important;
}
.ui-datepicker-close .ui-state-hover {
    border: .5px solid #ccc;
	background: #fff;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    border: 1px solid var(--nav-bar-bg) !important;
    background: var(--nav-bar-bg) !important;
    font-weight: bold;
    color: var(--nav-bar-link) !important;
}
.ui-datepicker th {
    color: var(--header-bg);
    font-weight: 300;	
}
.ui-datepicker .ui-datepicker-buttonpane button {
    line-height: 17px;
}
.ui-datepicker .ui-datepicker-title {
    line-height: 2em;
    font-family: 'Open Sans', sans-serif;
}
.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-left span.ui-icon.ui-icon-circle-triangle-w,
.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-right span.ui-icon.ui-icon-circle-triangle-e {
	background-image: initial;
    top: 12px !important;
}
span.ui-icon.ui-icon-circle-triangle-w:before,
span.ui-icon.ui-icon-circle-triangle-e:before {
    position: absolute;	
    content: '>';
    display: block;
    color: var(--nav-bar-link);
    width: 20px;
    height: 20px;
    text-indent: initial;
    font-family: monospace;
    font-size: 20px;
    font-weight: 100;
    line-height: 20px;
}
a.ui-datepicker-prev.ui-corner-all span.ui-icon.ui-icon-circle-triangle-w:before {
    content: '<';
	left: 4px;
}
a.ui-datepicker-prev.ui-corner-all:hover span.ui-icon.ui-icon-circle-triangle-w:before {
    left: 2px;
}
a.ui-datepicker-next.ui-corner-all:hover span.ui-icon.ui-icon-circle-triangle-e:before {
    left: 2px;
}
a.ui-datepicker-prev.ui-corner-all.ui-state-hover,
a.ui-datepicker-next.ui-corner-all.ui-state-hover {
    background: initial !important;
}

/* ==========================================================================
 AGENT PANEL
========================================================================== */
.dashboard h2:first-child,
.directory h2:first-child,
.users h2:first-child,
.orgs h2:first-child,
.tasks h2:first-child,
.tickets h2:first-child,
.kb h2:first-child,
.categories h2:first-child,
.canned h2:first-child,
.profile h2 {
    margin-bottom: 10px;
}
.tickets table.list {
	margin: 0;
}
.message.bar {
	background-color: #93e0ff;
    opacity: 1;
    color: #263f49;	
}
.message.bar.warning {
	border-bottom: 0;
	z-index: 999999;
}
.message.bar .body {
    margin-left: 20px;
    margin-right: 90px;
}
.message.bar.top.warning .button.inline {
	vertical-align: top;
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
    background: #b0e8ff;
    color: #445b65;
    color: #263f49;
    letter-spacing: 1.4px;
    border: .5px solid #263f49 !important;
}
.message.bar.warning {
    -webkit-animation: async-progress-bar-pulse 1.5s ease-in-out infinite;
    animation: async-progress-bar-pulse 1.5s ease-in-out infinite;
}
@-webkit-keyframes async-progress-bar-pulse {
    0%{
        box-shadow:0 0 0 2px #75a4b1,0 0 0 2px #128dbe;
    }
    50%{
        box-shadow:0 0 0 2px #75a4b1,0 0 0 10px #128dbe;
    }
    100%{
        box-shadow:0 0 0 2px #75a4b1,0 0 0 2px #128dbe;
    }
}
@keyframes async-progress-bar-pulse {
    0%{
        box-shadow:0 0 0 2px #75a4b1,0 0 0 2px #128dbe;
    }
    50%{
        box-shadow:0 0 0 2px #75a4b1,0 0 0 10px #128dbe;
    }
    100%{
        box-shadow:0 0 0 2px #75a4b1,0 0 0 2px #128dbe;
    }
}
table.list td[colspan="6"] i,
table.list td[colspan="7"] i,
table.list td[colspan="8"] i {
    width: 100%;
    padding: 10px 0;
    color: #828282 !important;
}

/* ==========================================================================
 STICKYBAR
========================================================================== */
.sticky.bar.opaque,
.sticky.bar.fixed,
.sticky.bar.fixed .flush-right {
    /* osta: mirror the footer scheme (nav-bar bg + nav-bar-link fg) instead of
       a per-theme --stickybar with hardcoded white text. Guarantees legibility
       across every theme without per-theme curation. --stickybar now unused. */
    background-color: var(--nav-bar-bg);
}
.sticky.bar.fixed {
    box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.1);
}
.sticky.bar.fixed {
    margin-top: 0;
    padding: 1% !important;
    z-index: 999999;
}
.sticky.bar.fixed .valign-helper{
    margin: 0 !important;
}
.sticky.bar.fixed .action-button.muted[data-dropdown="#sort-dropdown"] {
    margin: 0 0 0 6px;
}
.scroll-up {
    display: none;
}
.sticky.bar.fixed .pull-left h2,
.sticky.bar.fixed .pull-left h2 a,
.sticky.bar.opaque.fixed .pull-left h2,
.sticky.bar.opaque.fixed .pull-left h2 a {
    color: var(--nav-bar-link); /* osta: was #fff */
}
.sticky.bar.opaque.fixed .pull-left {
	float: left;
    margin: 0
}
.sticky.bar.fixed .action-button,
.sticky.bar.fixed .green.button {
    border: .5px solid var(--nav-bar-link); /* osta: was #ffffff */
    color: var(--nav-bar-link); /* osta: was #ffffff */
    text-shadow: none;
    background-color: var(--nav-bar-bg) !important; /* osta: was var(--stickybar) */
}
/* osta: FontAwesome glyphs set no color of their own, so they inherit the
   button color above; make that explicit on the <i>/:before/svg so no stray
   rule leaves an icon hardcoded white. Mirrors the footer scheme. */
.sticky.bar.fixed .action-button i,
.sticky.bar.fixed .action-button i:before,
.sticky.bar.fixed .action-button svg,
.sticky.bar.fixed .green.button i,
.sticky.bar.fixed .green.button i:before,
.sticky.bar.fixed .green.button svg {
    color: var(--nav-bar-link);
    fill: var(--nav-bar-link);
}
.sticky.bar.opaque.fixed .action-button i.icon-caret-down, .action-button.muted i.icon-caret-down {
    border-left: 0;
    margin-left: 0;
}
.sticky.bar.fixed .sort-button-text {
    color: var(--nav-bar-link); /* osta: was #fff */
    font-weight: 100;
}
.sort-button-text {
	text-shadow: none;
}
.sticky.bar .content {
    margin: auto;
    width: 100% !important;
    max-width: 1200px !important;
}
.sticky.bar.fixed .flush-left, .sticky.bar.fixed .pull-left.flush-left {
    display: inline-block !important;
}
.sticky.bar.fixed .merged-parent,
.sticky.bar.fixed .merged-child,
.sticky.bar.fixed .flush-left h2 a {
    /* osta: was var(--header-title) (tuned for header-bg, illegible on the
       sticky's new nav-bar-bg); use the footer scheme like the rest of the bar */
    color: var(--nav-bar-link);
    border-color: var(--nav-bar-link);
}
.sticky.bar.fixed {
    padding: 0 0;
    min-height: unset !important;
}
.sticky.bar.fixed h2:first-child {
    margin: 0 0;
    position: unset !important;
}
.sticky.bar.fixed .configureQ i.icon-cog {
	display: none;
}	
.users .sticky.bar.fixed .pull-right {
    margin-top: 0;
}
.pull-right.flush-right.page-top {
    float: right;
}
.rtl .pull-right.flush-right.page-top {
    float: left;
}

/* ==========================================================================
 KNOWLEDGEBASE
========================================================================== */
.Icon.file {
    background-image: url(../../osta/icons/paperclip.svg);
    width: 20px;
}
.icon-paperclip:before, 
.icon-paper-clip:before {
    width: 17px;
    position: relative;
    top: 2px;
    background-image: url(../../osta/icons/paperclip.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 8px;
    content: '';
    height: 17px;
}
.attachments .icon-paperclip:before, 
.attachments .icon-paper-clip:before {
    background-size: 8px !important;
}
.attachments i.icon-paperclip.icon-flip-horizontal {
    margin: 0 !important;
	top: 3px !important;	
}
.attachments small.filesize.faded {
    margin-left: 10px !important;
    display: inline-block;
    position: relative;
    top: 1px;
}
td.table-description i.small.icon-paperclip.icon-flip-horizontal {
    margin-left: 0;
    top: 3px;
    padding-left: 0;
}
#kb {
    padding: 5px 0;
}
#kb li {
	padding: 14px 10px 4px 56px;	
    background-image: url(../../osta/icons/faq.svg);
    background-size: 40px;
    background-position: 0 50%, bottom left;
    border-bottom: .5px solid #ddd;
    background-repeat: no-repeat;
}
.kb h4,
#kb li h4 a {
    font-size: 15px;
    vertical-align: initial;
    font-family: 'Open Sans', sans-serif;	
}
.canned table.form_table.fixed tr:first-child {
    display: none;
}
.canned .form_table tr:nth-child(2) th em {
    margin-top: -21px;
}
.faq-content {
/* 	width: initial;
    max-width: calc(100% - 300px) !important;
    margin: 0 15px; */
}
.faq-title.pull-left {
    color: #777777;
    font-weight: 400;
    font-size: 22px;
}
.faq #trans_container .tab_content {
    border: none !important;
}
.faq hr {
    border: 0;
}
#breadcrumbs {
    background-color: unset;
}
.sidebar {
/*     width: 220px;
    float: right;
    padding: 10px; */
    border: .5px solid #a8a6a6;
    background-color: #ebebeb !important;
    border-radius: 3px;
    margin: 0 14px 20px 0;
} 
.rtl .sidebar {
/*     float: left; */
}
.searchbar .search {
    width: 98%;
}
.pull-right.sidebar.faq-meta div:first-child {
/*     margin: 0 0 5px 0; */
}
.faq-content {
    width: initial;
}
.faq-content .thread-body.bleed {
    background: unset;
    /*width: calc(100% - 270px);*/
}
.faq button.red.button {
    margin: 0 0 2em 1em;
    border: 1px solid #b9b9b9 !important;
    background: #fff !important;	
}
#faq ol li:hover {
    background-color: unset;
}
#faq ol li {
    padding: 10px 0 4px;
    border-bottom: unset;
}
#notes.tab_content .faded:before {
    content: ' (';
}
#notes.tab_content .faded:after {
    content: ')';
}
a.previewfaq {
    font-size: 15px !important;
}
.faq-page .span8 {
/*     width: 100%; */
}
.faq-page .thread-body {
/*     width: 100%; */
    border: 0;
}
.kb strong {
    color: #777779;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
}
.categories .pull-right.flush-right .pull-right.flush-right {
	margin-top: 0;
}	
ul#trans li.empty,
ul#content-trans li.empty {
    top: -8px;
}
ul#trans,
ul#content-trans {
    display: inline-block;
}
span.count {
    font-size: 150%;
    font-weight: 200;
    position: relative;
    top: 2px;
    color: #128dbe !important;
}
.rtl span.count {
    font-size: 100%;
    top: 0;
    margin-right: 4px;
    display: inline-block;
}

/* ==========================================================================
 ADMIN PANEL
========================================================================== */
/*system.php*/
.system table.list thead:first-child th:first-child {
    border-radius: 6px 6px 0 0;
}
.system table.list th:first-child {
	padding: 0 10px !important;
    background-image: none;
    border-radius: 0;
}
.system table.list tbody tr:nth-child(2n+1) td {
    background-color: #ffffff;
}
.system table.list th {
    font-size: 16px !important;
}
.system table.list td {
    font-size: 13px !important;
    border-bottom: .5px solid #e4e4e4 !important;
    padding-left: 20px !important;
}
.system table.list tr:first-child td {
    border-top: .5px solid #e4e4e4 !important;
}
.system table.list tbody tr:hover td {
    background: #fff;
}
span[style="color:green"] i {
    margin: 0 1px 0 1px !important;
}
.system table.list i {
    top: 0;
    right: -2px;
    margin: 0 4px 0 -2px;
}
.system table.list .icon-warning-sign {
    color: #d51818 !important;
}
.system table.list .label-danger i.icon.icon-warning-sign {
    font-size: 14px;
    color: #d51818 !important;	
}
.system tbody:last-child tr:last-child td:first-child {
    border-radius: 0 0 0 6px;
}
.system tbody:last-child tr:last-child td:last-child {
    border-radius: 0 0 6px 0;
}
/*Language Packs*/
.system-page div[style="margin: 0 20px"] {
    border: .5px solid #aaa;
    border-radius: 6px;
    background: #fff;
    margin: 20px 0 0 0 !important;
    padding: 4px 12px 12px 12px;
}
.system-page .label-danger {
	padding: 0 0 6px 0;
    border: .5px solid #949495;
    opacity: .7;
    position: relative;
    top: -5px;
}
.system-page div[style="margin: 0 20px"] > div {
    padding: 10px 0 10px 10px;
    border-bottom: .5px solid #e4e4e4 !important;
    margin: 0;
    min-height: 86px;
	font-size: 13px;
}
.system .ar_EG,
.system .ar,
.system .ar_SA,
.system .az,
.system .bg,
.system .bn,
.system .bs,
.system .ca,
.system .cs,
.system .da,
.system .de,
.system .el,
.system .en_CAD,
.system .en_GB,
.system .en_US,
.system .es_AR,
.system .es_ES,
.system .es_MX,
.system .et,
.system .eu,
.system .fa,
.system .fi,
.system .fr,
.system .gl,
.system .he,
.system .hi,
.system .hr,
.system .hu,
.system .id,
.system .is,
.system .it,
.system .ja,
.system .ka,
.system .km,
.system .ko,
.system .lt,
.system .lv,
.system .mk,
.system .mn,
.system .ms,
.system .nl,
.system .no,
.system .pl,
.system .pt_BR,
.system .pt_PT,
.system .ro,
.system .ru,
.system .sk,
.system .sl,
.system .sq,
.system .sr,
.system .sr_CS,
.system .sv_SE,
.system .sw,
.system .th,
.system .tr,
.system .uk,
.system .ur_IN,
.system .ur_PK,
.system .in,
.system .pk,
.system .vi,
.system .zh_CN,
.system .zh_TW {
	background-position: top 0px right 11px !important;
}
.system-page i.icon.icon-warning-sign {
    margin: 0 8px;
}
.system-page .icon-warning-sign:before {
    content: "\f071";
    color: #5f5f5f;
}
.system-page div[style="margin: 0 20px"] h3 {
    margin-bottom: 0 !important;
    padding-bottom: 0;
    color: #7e7e7e;
}
.system table.list ~ div h3, 
.system table.list ~ div h3 strong {
    color: #707070;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;	
    font-size: 16px;
}
.advanced-search .adv-search-val .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    height: initial !important;
}
.select2-container--default .select2-selection--multiple:not(.faq-page .select2-selection--multiple) {
    background-color: white;
    border: .5px solid #cacaca;
    border-radius: 4px;
    cursor: text;
    width: 300px;
}
textarea#_3cd1c655ae15857b {
    height: 41px;
}
.select2-container .select2-search--inline .select2-search__field {
    margin-top: 0;
}
/* tr#userRow span.select2.select2-container.select2-container--default,
tr#ccRow .select2-container--default .select2-selection--multiple,
.tickets-page span.select2-dropdown.select2-dropdown--below {
    width: 505px !important;
} */

.row-item {
    border: .5px solid rgba(132, 132, 132, 0.7);
    padding: 12px;
}
.row-item .management {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #777777;
}
.icon-gear:before, .icon-cog:before {
    color: #128dbe;
}
input.-current {
    min-width: 134px !important;
}
table.form_table.settings_table td em b {
    font-weight: 500 !important;
}
table.form_table.settings_table textarea {
    height: 86px !important;
}
.settings_table select {
    margin-bottom: 10px;
}
#secondary_langs {
    margin-bottom: 10px;
}
/*AGENTS*/
select#tid,
select#did {
    width: 180px;
}
form[action="staff.php"] input.button.muted {
    /* height: 18px; */
    min-width: 50px;
    position: relative;
    top: 0;
    padding: 4px !important;
    margin: 0;
}
#agents---nav-bar-bg_container div[style="padding:2px 5px"],
#users---nav-bar-bg_container div[style="padding:2px 5px"] {
    padding: 10px !important;
}
#agents-tabs_container .pull-left,
#users-tabs_container .pull-left {
    float: left;
    width: 50px;
    height: 50px;
}
span[style^="display:inline-block;width:90%;width:calc(100% - 32px);"] {
    width: initial !important;
    padding-left: initial !important;
    display: initial !important;	
}
span[style^="display:inline-block;width:90%;width:calc(100% - 32px);"] a {
    font-size: 17px;
    display: initial;	
}
.settings_table .faded:before {
    content: '\a' attr(title);
    white-space: pre;
}
#users-tabs_container .settings_table .faded em:before {
    content: '\A';
    white-space: pre;
}
.settings_table .faded em {
    font-size: 12px;
    color: #999;
    font-style: normal;
}
.form_table.settings_table .icon-file-text:after { /*keep*/
    content: url(../../osta/icons/paper.svg);
    display: inherit;
    width: 36px !important;
    height: 36px !important;
    position: relative;
    top: 8px;
}
.form_table.settings_table i.icon-file-text {
    top: -4px;
    background: none;
}
.icon-bell-alt:before {
    content: url(../icons/alerts.svg);
    width: 16px;
    position: relative;
    top: 4px;
}
.icon-question-sign:before {
    content: url(../icons/question.svg);
    width: 16px;
    position: relative;
    top: 4px;
	opacity: .8;
}
.icon-question-sign:hover:before {
    opacity: 1;
}
ul.tabs li {
    padding: 0 6px !important;
}
ul.tabs li:not(.active) a {
    color: #128dbe;
}
#agents-tabs_container [class*=" icon-"],
#users-tabs_container [class*=" icon-"] {
    margin: 0 10px 0 0;
}

#users-tabs_container div[style="padding:2px 5px"] br {
    display: none;
}
/*Manage*/
table.list thead td[colspan="7"]:first-child {
    background: rgba(255, 255, 255, 0);
}
div[style="padding:8px 3px;border-bottom: 2px dotted #ddd;"] {
    border: 0 !important;
}
ul#topic-tabs i.icon-info-sign {
    top: 1px;
}
div[style="padding:8px 3px; margin-top: 1.6em"] {
    margin-top: .1em !important;
}
.account .table.two-column tbody tr td:first-child {
    width: 30%;
}
td[style="padding-top: 50px"] {
    padding-top: 20px !important;
}
.row-item .delete {
    border-left: 1px solid rgba(165, 165, 166, 0.61);
    border-bottom: 1px solid rgba(165, 165, 166, 0.61);
    border-radius: 0 !important;
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
    width: 35px;
}
.form_table.settings_table a[href="pages.php"] {
    margin-bottom: 10px;
}
ul#user-import-tabs {
    margin-bottom: -5px;
}
select[name="help_topic_sort_mode"] {
    width: 118px;
}
.helptopics table.list td[colspan="7"] {
    padding-bottom: 7px !important;
}
select[name="add_secondary_language"] {
    width: 280px;
}
/*Secondary Languages */
div#secondary_langs {
    width: 100% !important;
}
.secondary_lang.ui-sortable-handle {
    display: list-item;
	list-style: none;
}
.secondary-lang-sort,
.secondary-lang-flag,
.secondary-lang-text {
    float: left;
}
.secondary-lang-trash {
    float: right;
}
.secondary_lang.ui-sortable-handle {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 12px;
    margin: 0 0 8px 0;
    background: #fff;
    width: 494px !important;
    display: list-item;
    list-style: none;
    height: 25px;
    -webkit-box-shadow: 4px 4px 5px -4px rgba(0,0,0,0.3);
    -moz-box-shadow: 4px 4px 5px -4px rgba(0,0,0,0.3);
    box-shadow: 4px 4px 5px -4px rgba(0,0,0,0.3);	
}
.settings table.list .icon-sort,
.secondary-lang-sort i.icon-sort {
    display: inline-block;
    width: 20px;
    height: 20px !important;
    margin: -1px 10px 0 0;
}
.settings table.list .icon-sort:before,
.secondary_lang i.icon-sort:before {
    top: 0;
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 20px !important;	
background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23128dbe' d='M12%2C18.17L8.83%2C15L7.42%2C16.41L12%2C21L16.59%2C16.41L15.17%2C15M12%2C5.83L15.17%2C9L16.58%2C7.59L12%2C3L7.41%2C7.59L8.83%2C9L12%2C5.83Z' /%3E %3C/svg%3E");
}
.secondary-lang-flag {
    width: 36px;
    height: 24px;
    margin: 0 10px 0 0;
    display: inline-block;
}
.secondary-lang-flag .flag {
    background-size: 36px !important;
    background-position: center !important;
    width: 36px;
    height: 24px;
}
.secondary-lang-text {
    display: inline-block;
    margin: 2px 0 0 0;
}
.secondary-lang-trash {
    float: right;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 3px 0 0 0;
}
#secondary_langs i.icon-trash {
    width: 20px;
    height: 20px;
    display: inline-block;
    top: 0;
}
#secondary_langs .icon-trash:before {
    content: "";
    top: 0;	
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23128DBE' d='M21.03%2C3L18%2C20.31C17.83%2C21.27 17%2C22 16%2C22H8C7%2C22 6.17%2C21.27 6%2C20.31L2.97%2C3H21.03M5.36%2C5L8%2C20H16L18.64%2C5H5.36M9%2C18V14H13V18H9M13%2C13.18L9.82%2C10L13%2C6.82L16.18%2C10L13%2C13.18Z' /%3E%3C/svg%3E");
}

.forms table.list th {
    font-size: 15px !important;
    padding: 0 !important;
}
.forms table.form_table select {
    width: initial;
    min-width: 170px !important;
}
.forms tbody.sortable-rows.ui-sortable input {
    width: 134px !important;
}
.forms tbody.sortable-rows.ui-sortable input.delete-box {
    width: 60px !important;
}
.forms a.action-button.field-config {
    max-width: 174px;
    overflow: hidden !important;
    text-align: center;
    position: relative;
    top: -2px;
}
.manage-form a.action-button.field-config {
    padding: 4px 4px !important;
}
table.form_table td[align="center"] {
    text-align: left;
    padding: 0;
}
.form_table i.icon-edit {
    margin: 0 5px 0 0;
    padding: 0;
}
#schedule-entries i.icon-edit {
    margin: -5px 5px 0 22px !important;
}
tbody#schedule-entries i.icon-sort {
    top: -3px;
}
.form_table.settings_table table[style="width:100%"] {
    margin-bottom: 20px;
}
form[action="settings.php?t=tickets"] table.list th:first-child {
    background-position: 9px center;
}
.queues-page .queues .tabs li:nth-child(6) {
    display:  none;
}
.queues-page table.table td[style="width:60%; vertical-align:top"] {
    width: 12% !important;
}
.queues-page hr {
    border: 0;
}
.queues-page select#add-field {
    min-width: 200px !important;
}
.queues-page input.full-width,
.queues-page input[type="text"],
.queues-page select#parent-id {
	width: 230px !important;
    min-width: 230px !important;
    margin: 0 0 18px 0;
}
.queues-page select#search-add-new-field {
    width: 190px !important;		
    min-width: 190px !important;
    margin: 0 0 8px 0;	
}
.queues-page .green.button {
    background: #dcdfe2;
    position: relative;
    top: -2px;
    padding: 5px 14px;
    color: #515d6d;
}
.queues-page .green.button:hover {
    border: initial !important;
    background: #d0e9c6 !important;
}
.queues-page .grid.form tbody:nth-child(3) tr:first-child select {
    min-width: 40% !important;
}
.queues-page .grid.form tbody:nth-child(3) tr:nth-child(2) input {
    width: 100% !important;
	min-width: 100% !important;
    max-width: 100% !important;
}
.queues-page .grid.form tbody:nth-child(3) tr:nth-child(2) input {
	min-width: 185px !important;
}
.queues-page .grid.form tbody:nth-child(3) tr:nth-child(2) select {
    width: 100% !important;
	min-width: 100% !important;
    max-width: 100% !important;
}

/* ==========================================================================
 Users > <user>
========================================================================== */
.users table.ticket_info {
	border: 1px solid #cfd4d6;
    width: calc(100% - 106px);
    float: right;
}
.users table.ticket_info:after {
	clear: both;
}
#tickets.tab_content {
    border: .5px solid #aaa;
}
#user-view-tabs_container .pull-left {
    padding: 12px 0;
}
#user-view-tabs_container .pull-left strong {
    font-weight: 500;
    color: #777777;
}
#user-view-tabs_container form[action="users.php"] table.list th {
    font-family: 'Open Sans', sans-serif;
    font-size: 17px !important;
    font-weight: 400;
    height: 36px;
    padding-left: 9px !important;
}
#user-view-tabs_container table.list td {
    font-size: 11px !important;
}
#user-view-tabs_container th[width="10%"],
#user-view-tabs_container th[width="18%"],
#user-view-tabs_container th[width="8%"],
#user-view-tabs_container th[width="30%"],
#user-view-tabs_container th[width="15%"] {
	width: initial!important;
}
#user-view-tabs_container td:nth-child(4) {
	font-size:12px !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;	
}
table.list a.truncate {
    font-size: 14px;
    font-weight: 500;
}
#user-view-tabs_container a.Icon.overdueTicket {
    font-size: 14px !important;
    background-position: -1px 1px;
    margin: 0;
    padding-left: 21px !important;
}
#user-view-tabs_container table.list tr td {
    padding-left: 11px !important;
}
ul#user-view-tabs {
    margin-top: 10px;
}
#content.users td.right_align.has_bottom_border a {
    margin-right: 4px;
}
form[action="users.php"] i.icon-group {
    /* display: none; */ /*target*/
}
#user-account-tabs {
    width: 94% !important;
    margin: 0 0 -5px 8px;
    box-shadow: initial;
}
#popup #user-account-tabs {
    margin: 0 0 -7px 8px;
}
button.inline.green.button {
    border: .5px solid #a9a9a9;
    height: unset;
    background: #fff;
}
ul#user-account-tabs li.active {
    top: -5px;
}

/* ==========================================================================
 Manage > Forms
========================================================================== */
.forms [class^="icon-"], [class*=" icon-"] {
    margin: 0 7px;
}
.sortable.row-item i.icon-reorder {
    top: 0;
}
form[action*="/forms/manage"] .delete {
    height: 48px;
    width: 48px;
    border-radius: 40px;
    text-align: center;
}

form[action*="/forms/manage"] .row-item .delete:hover {
    background: #ff838e;
    color: rgba(255,255,255,0.8) !important;
    border-radius: 0 5px 0 0 !important;
}
form[action*="/forms/manage"] .row-item .delete:hover > a i.icon-trash:before {
    color: #fff !important;
    fill: #fff !important;
}
select[name="new-form"] {
    border: .5px solid #a9a9a9;
    height: 39px;
    top: 1px;
}

/* ==========================================================================
 HIDE UGLY ICONS
========================================================================== */
.Icon {
    width: auto;
    padding-left: initial;
}
.Icon.Ticket,
.Icon.apiTicket,
.Icon.emailTicket,
.Icon.phoneTicket,
.Icon.webTicket,
.Icon.otherTicket,
.Icon.staffAssigned,
.Icon.assignedTicket,
a.test,
a.Ticket,
a.assignedTickets,
a.overdueTickets,
a.answeredTickets,
a.closedTickets,
a.newTicket,
a.premade,
a.newPremade,
a.kb,
a.faq-categories,
a.canned,
a.staff,
a.user,
a.userPref,
a.userPasswd,
a.preferences,
a.attachment,
a.api,
a.newapi,
a.ticket-settings,
a.email-settings,
a.kb-settings,
a.alert-settings,
a.email-autoresponders,
a.sla,
a.newsla,
a.logs,
a.audits,
a.emails,
a.newEmail,
a.emailTemplates,
a.newEmailTemplate,
a.emailFilters,
a.ticketFilters,
a.newTicketFilter,
a.emailSettings,
a.emailDiagnostic,
a.banList,
a.users,
a.newuser,
a.groups,
a.teams,
a.newgroup,
a.helpTopics,
a.newHelpTopic,
a.departments,
a.newDepartment,
a.pages,
a.newPage,
a.forms,
a.lists,
.Icon.teamAssigned { 
    background: none;
    margin-left: 0;
}

/* ==========================================================================
 CLEAN TABS
========================================================================== */
ul.clean.tabs {
    z-index: 1;
}
ul.tabs,
ul.tabs.alt {
    background: initial;
    border-bottom: 0;
    bottom: 0;
    margin: 0 auto;
    box-shadow: initial;
}
ul#referral {
    bottom: -6px;
}
/* osta - ensure non-active tabs have consistent styling */
ul.clean.tabs li:not(.active) {
    border: 1px solid #ccc !important;
    border-bottom: none !important;
    background: rgba(251, 251, 251, 0.5) !important;
    box-shadow: inset 0 -5px 10px -9px rgba(0,0,0,0.2);
}
ul.clean.tabs li:not(.active):hover {
    background: rgba(251, 251, 251, 0.8) !important;
}
ul.clean.tabs li:not(.active) a,
ul.clean.tabs li:not(.active) a:visited,
ul.clean.tabs li:not(.active) a:hover {
    color: #128dbe !important;
}
ul.tabs li.active {
    border: 1px solid #d5d5d5;
    border-top: 2px solid #ffc386;
    border-bottom: 1px solid #fff;
    background: #fff;
    z-index: 1;
    top: -1px;
}
ul.tabs li.active a {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 500;
	color: #777777;	
}
.tab_content {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    min-height: 122px;
}
.tab_content div[style="margin-top: 5px"] {
    margin: 5px 0 0 0!important;
    background: #fff;
}
.dashboard ul.tabs {
    border-bottom: 0;
}
table.table th {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 500;
	color: #777777;		
}
table.table th[width="30%"] {
    padding-left: 8px !important;
}
table.dashboard-stats {
    border-bottom: 1px solid #ddd;
}

ul.tabs li a {
    padding: 0;
}

/* ==========================================================================
 POPUPS AND ALERTS
========================================================================== */
.dialog {
    background: #FFF;
    border: 1px solid #AAA;
    border-radius: 2px;
    box-shadow: rgba(0,0,0,0.4) 0 10px 26px;
}
.dialog th {
    background-color: initial;
    border: none;
    padding: 4px 10px 10px 0;
    padding-left: 0;
    font-size: 126%;
    color: #777777;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}
.dialog th em {
    font-style: normal;
}
.dialog th strong {
    font-weight: 600;
}
.required {
    font-weight: 600;
}
#alert {
	opacity: 0;
	animation-name: bounceIn;
	animation-duration: 450ms;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
@keyframes bounceIn {
  0%{
    opacity: 0;
    transform: scale(0.3) translate3d(0,0,0);
  }
  50%{
    opacity: 0.9;
    transform: scale(1.1);
  }
  80%{
    opacity: 1;
    transform: scale(0.89);
  }
  100%{
    opacity: 1;
    transform: scale(1) translate3d(0,0,0);
  }
}

/* ==========================================================================
 POPUP DIALOG TOOLBAR RESTORED (missing in osTicket 1.14 and later)
========================================================================== */
.redactor-toolbar-wrapper-air {
	position: initial;
	z-index: 100;
	width: 100% !important;
	display: inline-block;
	background: #f7f7f7;
	border: none;
	box-shadow: 0 1px 4px -2px rgba(0, 0, 0, 0.4);
	border-radius: 5px 5px 0 0 !important;
}
.redactor-air {
	display: inline-block !important;
	width: 100% !important;
	float: left;
	padding: 0 !important;
	margin: 0 !important;
	background: initial;
}
.redactor-air a.re-button-icon.re-button-icon {
	padding: 8px;
	margin: 0;
	background: initial;
}
.redactor-air a {
    border-radius: 0px;
}
.redactor-air a:first-child {
    border-radius: 2px 0 0 0;
}
.redactor-air a:last-child {
    border-radius: 0 2px 0 0;
}
.redactor-air a {
	color: #128dbe;
}
.redactor-air a.re-button-icon.re-button-icon:hover {
	background: #128dbe;
	color: #fff;
}
a.re-button:hover>i {
	color: #fff !important;
}
.redactor-button-active {
	background-color: #ccc !important;
}
.redactor-button-active>i {
	color: #696969 !important;
}
.redactor-air a.re-button.re-image.re-button-icon,
.redactor-air a.re-button.re-textdirection.re-button-icon {
	display: none;
}

/* ==========================================================================
 MERGE / LINK TICKETS POPUP
========================================================================== */
.dialog i.icon-code-fork:before {
    font-size: 27px !important;
    top: -1px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.dialog i.icon-link:before {
    font-size: 21px !important;
    top: -4px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.dialog .merge-tickets .row-item {
    padding: 8px;
}
 .dialog .merge-tickets .merge-tickets i.icon-reorder {
    top: 0 !important;
    margin: 0 5px 0 6px;
    padding: 0;
    width: 12px;
    right: 0;
}
.dialog .merge-tickets a[style="display: inline"] {
    position: relative;
    top: 3px;
}
.dialog .merge-tickets .row-item .delete {
    border-bottom: 0 !important;
}
.merge-tickets a.preview {
	float: none !important;
}
.merge-tickets i.icon-reorder {
    background-image: initial !important;
}
.merge-tickets i.icon-reorder:before {
    display: inline-block !important;
}
.merge-tickets i.icon-reorder:before {
    content: "\f0c9" !important;
    top: 2px;	
}
#popup a.icon-comments-alt {
    float: right;
    margin: 4px 5px 0 0;
}
form[action^="#tickets/"] i.icon-trash:before {
    top: -1px !important;
}
form[action^="#tickets/"] .row-item .delete {
    will-change: background, color !important;
    -webkit-transition: all .3s ease-out!important;
    -moz-transition: all .3s ease-out!important;
    -o-transition: all .3s ease-out!important;
    -ms-transition: all .3s ease-out!important;
    transition: all .3s ease-out!important;	
}
form[action^="#tickets/"] .row-item .delete:hover {
    background: #ea0c0c;
    color: #fff !important;
}
form[action^="#tickets/"] .row-item:last-of-type .delete:hover {
    border-radius: 0 0 6px 0 !important;
}
form[action^="#tickets/"] .row-item .delete:hover > a i.icon-trash:before {
    color: #fff !important;
}
.merge-spacer {
    margin: 0 0 0 0;
}
.merge-tickets i.icon-plus {
    background-image: initial !important;
}
form[action^="#tickets/"] button.inline.green.button {
	margin-top: 16px;
    padding: 0 4px;
    position: relative;
    top: 0;
    margin: 0;
    line-height: 28px;
}
form[action^="#tickets/"] hr {
    visibility: visible;
    opacity: .5;
}
li.row-item.ui-state-disabled, 
li.row-item.ui-sortable-handle {
    width: 576px;
}

/* ==========================================================================
 TIPS
========================================================================== */
i.help-tip {
    color: #128dbe;
    position: relative;
    top: -2px;
}
.body .icon-remove-circle:before,
a.tip_close .icon-remove-circle:before,
.dialog .icon-remove-circle:before,
.modal-header .close .icon-remove-circle:before {
    content: url(../icons/close.svg);
    height: 30px;
    width: 30px;
    top: 0 !important;	
}
i.icon-remove-circle {
    top: 12px;
    right: 8px;
}
a.tip_close i.icon-remove-circle,
.dialog a.close i.icon-remove-circle,
.modal-header .close .icon-remove-circle {
    top: 0;
    right: 0;
}
.icon-remove-circle:before {
    content: ' ';
}
.dialog a {
    color: #128dbe;
}
a.tip_close,
.dialog a.close,
.modal-header a.close {
    position: absolute;
    display: inline-block;
    right: 0; /*target?!*/
    top: 0;   /*target?!*/
    font-size: 0;
    color: #ffddb9;
    background: #ffddb9;
    width: 30px;
    height: 30px;
    line-height: 0;
    margin: 16px;
    padding: 0;
    border-radius: 10%;
    z-index: 9;	
}
.tip_content a.tip_close {
    margin: 8px;
}
.tip_content.tickets a.tip_close {
    margin: 5px;
}
.dialog a.close,
.modal-header a.close {
    font-size: 20px !important;
    padding: 0 !important;
}
.rtl .dialog a.close {
    left: 0;
}
.modal-header a.close {
    opacity: 1;
}
.tip_content .links a {
    color: #128dbe;
}
.tip_content {
    height: auto !important;
    min-height: 20px;
    /*padding: 15px 25px 10px 10px;*/ /*Specify target*/
    border: 1px solid #979696 !important;
    background: #fff;
    border-radius: 5px;
    z-index: 3;
    position: absolute;
    line-height: 1.45rem;
    top: -1px;
    left: -28px;
    max-width: 400px;
    -moz-box-shadow: 5px 5px 7px -3px rgba(0,0,0,0.3);
    -webkit-box-shadow: 5px 5px 7px -3px rgba(0,0,0,0.3);
    box-shadow: 5px 5px 7px -3px rgba(0,0,0,0.3);
}
.tip_content h2 {
    width: calc(100% - 50px);
}
.canned-page .tip_content {
    max-width: unset;
}
.templates-page .tip_content {
    max-width: initial;
}
.logs-page .tip_content {
    max-width: initial;
}
.tip_content.tickets {
    left: -24px;
}
div[style="width:600px; padding: 2px 2px 0 5px;"] {
    min-width: 264px !important;
    max-width: 400px !important;
    padding: 0 !important;	
}
.tip_content hr {
    color: #ddd0;
    background-color: #ddd0;
    height: 6px;
}
.tip_content h1 {
	border-bottom: .5px solid #e4dbc2;
    font-weight: 500;
    background: #d2f0ff;
    padding-top: 0px;
    padding: 2px 0 9px 4px;
    width: calc(100% - 40px);
}
.doc-desc-title {
    font-weight: 500;
}
.tip_arrow {
    top: 11px;	
    border: 1px solid #fff;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
}
.tip_content strong {
    font-weight: 600;
}
.form_table tr i.help-tip {
    margin-left: 5px;
    opacity: 0.7;
}
.tip_content img.avatar {
    width: 50px;
    height: 50px !important;
    max-height: 60px !important;
}
#collab.tab_content td em {
    font-size: 85%;
    font-style: normal;
}
div[style="width:650px; padding: 2px 2px 0 5px;"] {
    width: 100% !important;
    padding: 0 !important;
}
#collab.tab_content td em:before {
    content: "\A";
    white-space: pre;
}
.tip_content table,
.tip_content table th {
	border: 0
}
.tip_content table td {
	/*border: .5px solid #ddd;*/ /*target*/
}
.custom-info {
    margin: 0 0 5px 10px !important;
}
#user_tabs_container table.custom-info {
    margin-top: 7px;
}
.tip_content table,
.tip_content table th,
.tip_content table td {
    border: 0;
}
.tip_content.faq {
	max-width: unset;
}
.tip_content.faq .thread-body {
    padding: 1.8em 0.9em 0 0 !important;
}

/* ==========================================================================
 ALERTS
========================================================================== */
#msg_info, .info-banner,
#msg_notice, .success-banner, .notice-banner,
#msg_warning, .warning-banner,
#msg_error, .error-banner {
	margin: 0;
    padding: 14px 10px 14px 46px;
    margin-bottom: 10px;
    border-radius: 6px;
    font-size: 16px;
    border: .5px solid; 
    font-weight: 500;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 3px rgba(0,0,0,0.04);	
}
#msg_info, .info-banner {
    color: #31708f;
    background-color: #d9edf7;
    background: url(../icons/alert-outline-info.svg) 16px 50% no-repeat #d9edf7 !important;	
    border-color: #bce8f1;
    background-size: 22px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 3px rgba(0,0,0,0.04);	
}
#msg_notice, .success-banner, .notice-banner {
    color: #3c763d;
    background-color: #dff0d8;
    background: url(../icons/alert-outline-message.svg) 16px 50% no-repeat #dff0d8 !important;
    border-color: #bdd1ac;
    background-size: 22px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 3px rgba(0,0,0,0.04);
}
#msg_info, #msg_notice, #msg_warning, #msg_error, .success-banner, .notice-banner {
	opacity: 1;
	animation-name: bounceIn;
	animation-duration: 450ms;
	animation-timing-function: linear;
	animation-delay: .4s;	
}
@keyframes bounceIn {
  0%{
    opacity: 0;
    transform: scale(0.3) translate3d(0,0,0);
  }
  50%{
    opacity: 0.9;
    transform: scale(1.1);
  }
  80%{
    opacity: 1.1;
    transform: scale(0.89);
  }
  100%{
    opacity: 1;
    transform: scale(1) translate3d(0,0,0);
  }
}
#msg_warning, .warning-banner {
    color: #8a6d3b;
    background-color: #fcf8e3;
    background: url(../icons/alert-outline-warning.svg) 16px 50% no-repeat #fcf8e3 !important;	
    border-color: #dfd3ba;	
    background-size: 22px !important;	
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 3px rgba(0,0,0,0.04);	
}
#msg_error, .error-banner  {
    color: #a94442;
    background-color: #f2dede;
    background: url(../icons/alert-outline-error.svg) 16px 50% no-repeat #f2dede !important;	
    border-color: #ebccd1;
    background-size: 22px !important;	
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 3px rgba(0,0,0,0.04);	
}
#msg_warning .Icon.overdueTicket {
    background-image: none;
}
#msg_info .icon-info-sign:before, 
.info-banner .icon-info-sign:before {
	display: none;
}
#ticket_tabs_container #msg_warning, 
#ticket_tabs_container #msg_error, 
#ticket_tabs_container #msg_notice, 
#ticket_tabs_container #msg_alert {
    margin: 0 0 20px 0;
}
.message.bar.danger {
	border-bottom: 3px solid #ebccd1;
    color: #a94442;
    background-color: #f2dede;

    border-color: #ebccd1;
    background-size: 22px !important;
    z-index: 999999;
    opacity: 1;
}
.message.bar .avatar[class*=" oscar-"] {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%231F5B78' d='M8.5%2C2C6%2C2 4%2C4 4%2C6.5V7C2.89%2C7 2%2C7.89 2%2C9V18C2%2C19.11 2.89%2C20 4%2C20H8.72C10.18%2C21.29 12.06%2C22 14%2C22A8%2C8 0 0%2C0 22%2C14A8%2C8 0 0%2C0 14%2C6C13.66%2C6 13.32%2C6.03 13%2C6.08C12.76%2C3.77 10.82%2C2 8.5%2C2M8.5%2C4A2.5%2C2.5 0 0%2C1 11%2C6.5V7H6V6.5A2.5%2C2.5 0 0%2C1 8.5%2C4M14%2C8A6%2C6 0 0%2C1 20%2C14A6%2C6 0 0%2C1 14%2C20A6%2C6 0 0%2C1 8%2C14A6%2C6 0 0%2C1 14%2C8M13%2C10V15L16.64%2C17.19L17.42%2C15.9L14.5%2C14.15V10H13Z' /%3E %3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-size: 50px 36px;
    position: relative;
    top: 3px;
}
.message.bar.top.danger .avatar[class*=" oscar-"] {
background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23a94442' d='M8.5%2C2C6%2C2 4%2C4 4%2C6.5V7C2.89%2C7 2%2C7.89 2%2C9V18C2%2C19.11 2.89%2C20 4%2C20H8.72C10.18%2C21.29 12.06%2C22 14%2C22A8%2C8 0 0%2C0 22%2C14A8%2C8 0 0%2C0 14%2C6C13.66%2C6 13.32%2C6.03 13%2C6.08C12.76%2C3.77 10.82%2C2 8.5%2C2M8.5%2C4A2.5%2C2.5 0 0%2C1 11%2C6.5V7H6V6.5A2.5%2C2.5 0 0%2C1 8.5%2C4M14%2C8A6%2C6 0 0%2C1 20%2C14A6%2C6 0 0%2C1 14%2C20A6%2C6 0 0%2C1 8%2C14A6%2C6 0 0%2C1 14%2C8M13%2C10V15L16.64%2C17.19L17.42%2C15.9L14.5%2C14.15V10H13Z' /%3E %3C/svg%3E") !important;
}
.message.bar .avatar.pull-left {
    margin-left: 0;
}
.message.bar .avatar.oscar-boy {
    background-position: initial;
}
.avatar.oscar-borg {
    background-position: unset;
}
.message.bar.top.danger {
    background-color: rgb(255, 201, 201);
}
.message.bar.top.danger button.inline.button.red {
    top: 17px;
    position: absolute;
    right: -2px;
    background: #ffffff45;
    color: #ac4947;
    border: .5px solid #ac4947;
}
#msg_warning .Icon.lockedTicket {
    background-image: initial;
}
.logs-page #msg_warning, 
.logs-page #msg_error, 
.logs-page #msg_notice, 
.logs-page #msg_alert {
    display: block;
    margin: 23px 0 0 0;
}

/* ==========================================================================
 FOOTER
========================================================================== */
#footer {
    color: var(--nav-bar-link);
    background: var(--nav-bar-bg);
    position: relative;
    height: 60px;
}
div#footer + div {
    background: var(--nav-bar-bg) !important;
    height: 36px;
    margin: -40px 0;
}
#footer {
    width: 100%;
    background: var(--nav-bar-bg) !important;
    background: rgba(0, 0, 0, 0.05);
    height: 60px;
    bottom: 0;
    padding: 0;	
    position: static;
}
#footer #poweredBy {
	background: none;
}
#osticket {
    width: 50% !important;
    height: 100%;
    display: inline-block;
    float: left;
}
#ostawesome {
    width: 50% !important;
    height: 100%;
    display: inline-block;
    float: right;
}
div#ostawesome a svg {
    width: 103px !important;
    margin-top: 6px;
}
a#osticket-link,
a#ostawesome-link {
    position: relative;
    top: 57%;
    transform: perspective(1px) translateY(-20%);
    padding: 0 20px;
}
a#osticket-link {
    float: right;
}
a#ostawesome-link {
    float: left;
}
#footer #osticket svg,
#footer #ostawesome svg {
    fill: var(--nav-bar-link);
    width: 122px;
}
#ostawesome svg {
    width: 111px;
    position: relative;
    top: 2px;
}
/* jump */
@-webkit-keyframes jump {
  50% {
    -webkit-transform: translateY(-6px) scale(1.07);
    transform: translateY(-6px) scale(1.07);
  }
}
@keyframes jump {
  50% {
    -webkit-transform: translateY(-6px) scale(1.07);
    transform: translateY(-6px) scale(1.07);
  }
}
.jump {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.jump:hover, .jump:focus, .jump:active {
  -webkit-animation-name: jump;
  animation-name: jump;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* ==========================================================================
 LOGIN
========================================================================== */
#loginBody {
    background: var(--header-bg) !important;
}
#loginBody #brickwall {
	background-image: url("../../osta/img/backdrops/01.png");
}
#loginBody #loginBox {
    box-shadow: initial;
    width: 360px;
	margin-left: -181px;
}
#loginBody #loginBox:after {
    background-color: initial;
    border: none;
}
#loginBody #blur {
	-webkit-filter: initial;
    filter: inital;
    filter: initial;
    background: var(--nav-bar-bg);
    border-radius: 3px;
}
#loginBody #background {
    background-image: initial;
}
#loginBody #company .content {
    display: none;
}
#login-title {
    margin: 22px 0 -12px 0;
}
#login-title div#header-text #header-title {
    margin: 0;
    padding: 0;
    color: var(--header-title);
    text-decoration: none;
    line-height: 120%;
    font-style: normal;
    font-weight: 600;
    font-size: 30px;
    display: inline-block;
    font-family: "Montserrat",sans-serif;
    white-space: initial;	
}
#login-title #header-image img {
    display: inline-block !important;
    width: 100%;
}
#loginBody #logo .valign-helper {
    padding: 0;
    display: inline;
}
#login-title #header-default svg {
    width: 100% !important;
    height: initial;
}
#loginBody fieldset input {
    background: rgba(255, 255, 255, 0.5);
}
#loginBody fieldset input {
    display: block;
    margin-bottom: 0 !important;
    border: 0;
    /*padding: 18px 14px!important;*/ /*target*/
    letter-spacing: 1.4px;
    width: calc(100% - 37px) !important;
    height: 36px;	
}
#loginBody form {
    width: 270px;
    margin: 0 auto;
}
#loginBody fieldset {
    border: 0;
    width: 270px;
    margin: 0 auto !important
}
#loginBody input[type=password] {
    border-radius: 0 0 3px 0 !important;
}
#loginBody fieldset input:first-child  {
	border: 0;
}
#loginBody fieldset input:nth-child(2) {
    border-radius: 0 3px 0 0 !important;
    border: 0;
	width: calc(100% - 37px) !important;
    height: 37px;
    margin-bottom: 1px !important;	
}
#login-userid {
    background: rgba(255, 255, 255, 0.3);
    display: inline-block;
    width: 36px;
    height: 37px;
    float: left;
    border-radius: 3px 0 0 0;
    background-size: 22px;
    background-repeat: no-repeat;
    background-position: 7px 7px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(0%2C 0%2C 0%2C 0.1)' d='M12%2C19.2C9.5%2C19.2 7.29%2C17.92 6%2C16C6.03%2C14 10%2C12.9 12%2C12.9C14%2C12.9 17.97%2C14 18%2C16C16.71%2C17.92 14.5%2C19.2 12%2C19.2M12%2C5A3%2C3 0 0%2C1 15%2C8A3%2C3 0 0%2C1 12%2C11A3%2C3 0 0%2C1 9%2C8A3%2C3 0 0%2C1 12%2C5M12%2C2A10%2C10 0 0%2C0 2%2C12A10%2C10 0 0%2C0 12%2C22A10%2C10 0 0%2C0 22%2C12C22%2C6.47 17.5%2C2 12%2C2Z' /%3E%3C/svg%3E");
}
#login-password {
    background: rgba(255, 255, 255, 0.3);
    display: inline-block;
    width: 36px;
    height: 36px;
    float: left;
    border-radius: 0 0 0 3px;
}
#login-password:after {
    background-image: url(../svg/key.svg);
    content: ' ';
    display: inline-block;
    width: 36px;
    height: 36px;
    background-repeat: no-repeat;
    background-position: 6px;
    opacity: .12;
}
#loginBody fieldset input::-webkit-input-placeholder, 	/* Chrome/Opera/Safari */
#loginBody fieldset input::-moz-placeholder, 			/* Firefox 19+ */
#loginBody fieldset input:-ms-input-placeholder, 		/* IE 10+ */
#loginBody fieldset input:-moz-placeholder { 			/* Firefox 18- */
  color: #ddd;
}
#loginBox h3 {
	font-size: 21px;
	text-shadow: none;
    color: var(--header-title);
    font-family: monospace, courier;
    letter-spacing: initial;
    margin: 28px 0;
    font-weight: 100;
    opacity: .7;
}
#loginBox button[type=submit], 
#loginBox input[type="submit"], 
#loginBox .primary.button {
    box-shadow: none;
    margin: 2px 0 0 0;
    padding: 6px 20px!important;
    height: 36px;
    background: #128dbe;
    text-shadow: initial;
    border: none;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4588235294117647) !important;
    letter-spacing: 1.5px;
    width: 100%;
    font-size: 18px;
}
form#login i.icon-signin,
#loginBody i.icon-signin:before {
    display: none !important;
}
#loginBox h3[style="color:black;"] em { /*pw reset confirmation sent page*/
	font-size: 17px;
    font-style: initial;
    font-family: 'Open Sans';
    font-weight: 500;
    line-height: initial;
}
/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.08627450980392157) inset;
	box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.08627450980392157) inset;
    border: .5px solid #bfbfbf;
    transition: background-color 5000s ease-in-out 0s;
}
#loginBody form#login button,
#loginBody input[value="Send Email"] {
    float: initial;
    margin: 27px auto 21px auto !important
}
h3[style="display:inline"] {
    margin: 0 0 -12px 0 !important;
    display: block !important;
}
#pw-reset {
    position: relative;
    top: -6px;
}
#loginBox #pw-reset h3 {
    margin: 0;
}
h3 a[href="pwreset.php"] {
    margin-top: 0 !important;
    font-size: 15px;
    text-shadow: none;
    color: var(--header-title);
    letter-spacing: initial;
    margin: 0 0;
    font-weight: 100;
    text-decoration: none;
}
#loginBody #poweredBy .osticket-logo {
    border: none;
    -webkit-filter: none;
    filter: none;
    ms-filter: none;
}
#loginBody #poweredBy {
	display: none;
}
/* 2FA Verification */
#loginBody .form-simple .field-label.required {
    display: none;
}
#loginBody .form-simple em {
    font-size: 15px;
    text-shadow: none;
    color: var(--header-title) !important;
    font-family: 'Open Sans', monospace, courier;
    letter-spacing: initial;
    margin: 0 0 14px;
    font-weight: 100;
    opacity: .7;
    font-style: initial !important;
    line-height: initial;
}
input[autocomplete="one-time-code"] {
    width: 62px !important;
    min-width: 20px;
    text-align: center;
    padding: 0;
}

/* ==========================================================================
  PASSWORD RESET PAGE pwreset.php
========================================================================== */
form[action="pwreset.php"] input.submit {
    margin: 20px !important;
}
#loginBody form[action="pwreset.php"] fieldset input {
    width: 100% !important;
}
#loginBody form[action="pwreset.php"] fieldset input:first-child {
	background-image: unset;
    padding-left: 10px !important;	
}

/* ==========================================================================
 MISC.
========================================================================== */
.quicknote a.action, .floating-options a.action {
    width: initial;
    margin: 4px 2px;
    padding: 3px;
    color: black !important;
	background: -webkit-linear-gradient(#fafafa 0%, #e7ebf0) #ffffff;
	background: -o-linear-gradient(#fafafa 0%, #e7ebf0) #ffffff;
	background: linear-gradient(#fafafa 0%, #e7ebf0) #ffffff;
    border: .5px solid #cdd2d4;
    border-radius: 3px;
}
.quicknote a.action:hover, .floating-options a.action:hover {
    border: .5px solid #aaa;
}
.avatar > img.avatar {
    width: 100%;
    height: auto;
}
div#user-profile .avatar > img.avatar,
form[action="#users/lookup"] .avatar > img.avatar {
    width: 100px;
}
.users-page .tip_content.users .avatar.pull-left,
.users-page .tip_content.users #user-profile .avatar > img.avatar {
    width: 50px;
    height: 50px;
}
.users-page .tip_content.users .floating-options i.icon-edit, 
.users-page .tip_content.users .floating-options i.icon-share {
    padding: 4px !important;
}
.users-page .tip_content.users .quicknote .body {
    padding: 0;
}
div#user-email a {
    color: #128dbe;
}
.code-green {
    font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
    font-weight: 400;
    font-size: 14px;
    color: #3ead08;
}
.forslash {
    margin: 0 6px;
    font-weight: bold;
    color: #bfbfbf;
}
.current-version.highlight {
    font-weight: 700;
    padding: 1px 6px 3px 6px;
    color: #816700;
    background-color: #ffefac;
    border-radius: 3px;
    font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
    font-size: 14px;
}
.current-version.checked:after {
    content: ' ';	
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23128DBE' d='M21%2C7L9%2C19L3.5%2C13.5L4.91%2C12.09L9%2C16.17L19.59%2C5.59L21%2C7Z' /%3E %3C/svg%3E");
    background-position: center center;
    fill: #128dbe !important;
    color: #128dbe !important;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 20px 20px !important;
    background-repeat: no-repeat !important;
    position: relative;
    top: 4px;
    margin-left: 6px;
}
#version-msg {
    margin: 24px 0 0 0;
}
#version-msg a:after {
	content: ' ';
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23128dbe' d='M17%2C13L12%2C18L7%2C13H10V9H14V13M19.35%2C10.03C18.67%2C6.59 15.64%2C4 12%2C4C9.11%2C4 6.6%2C5.64 5.35%2C8.03C2.34%2C8.36 0%2C10.9 0%2C14A6%2C6 0 0%2C0 6%2C20H19A5%2C5 0 0%2C0 24%2C15C24%2C12.36 21.95%2C10.22 19.35%2C10.03Z' /%3E%3C/svg%3E");
    background-size: 23px;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    display: inline-block;
    position: relative;
    top: 6px;
    margin-right: 0;
    margin-left: 9px;
}
#version-msg a {
    transition: color .5s ease !important;
}
#version-msg a:hover {
	color: #8ac70f	
}
#version-msg a:hover:after {
	content: ' ';
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%238ac70f' d='M17%2C13L12%2C18L7%2C13H10V9H14V13M19.35%2C10.03C18.67%2C6.59 15.64%2C4 12%2C4C9.11%2C4 6.6%2C5.64 5.35%2C8.03C2.34%2C8.36 0%2C10.9 0%2C14A6%2C6 0 0%2C0 6%2C20H19A5%2C5 0 0%2C0 24%2C15C24%2C12.36 21.95%2C10.22 19.35%2C10.03Z' /%3E%3C/svg%3E");
}
i.icon-sort-by-attributes-alt.icon-flip-vertical {
    -webkit-transform: rotate(180deg) !important;
    -moz-transform: rotate(180deg) !important;
    -ms-transform: rotate(180deg) !important;
    -o-transform: rotate(180deg) !important;
     transform: rotate(180deg) !important;
}
#client-side-language-bar {
    font-weight: 500;
    margin: 0 0 6px 0;
}
div#profile tr:first-child {
    display: none;
}
.users .green.button:hover {
    box-shadow: none;
}
#upload table th:first-child {
    background: none;
}
#upload table th {
    font-size: 13px;
}
#upload table td {
    padding: 10px 0;
    font-size: 13px;	
}
#upload table {
	border: initial;
}

/* ==========================================================================
 POPUP: LOADING SMALL SPINNER
========================================================================== */
.dialog#popup {
    width: 650px;
    min-height: 128px;
}
#popup i.icon-spinner {
    margin: 0 14px !important;
    padding: 0 !important;
    width: 50px;
    height: 50px;
    top: 15px;
}
#popup i.icon-spinner.icon-spin.icon-large:before {
    background-image: url(../../osta/img/loading.svg);
    content: ' ';
    background-position: center !important;
    border-radius: 50%;
    vertical-align: middle;
    width: 50px !important;
    height: 50px !important;
    background-size: 50px 50px !important;
    top: 0 !important;
}

/* ==========================================================================
 OVERLAY
========================================================================== */
#overlay {
    background: #000 !important;
    opacity: .1 !important;
} 
#loadingbar {
  background: var(--header-title) !important;
}

/* ==========================================================================
 THEME PAGE
========================================================================== */
#color-themes,
#custom-theme {
    width: 100%;
}
#color-themes tr:first-child td:first-child,
#custom-theme tr:first-child td:first-child {
    width: 100%;
    /* background: #ccc; */
}
#choose-theme.show,
#custom-theme.show {
    opacity: 1;
    pointer-events: auto;
}
#choose-theme.hide,
#custom-theme.hide {
    opacity: .4;
    pointer-events: none;
}
@media (max-width: 1000px) {
	table#color-themes {
		width: 100%;
	}
}
.tab_content h2 {
    line-height: 28px;
}
#color-themes h2 {
    margin: 0 0 -10px 0;
}
.theme-card {
    width: 184px;
    height: 100px;
    background: #ddd;
    border: .5px solid #ddd;
    z-index: 1;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.12);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    float: left;
    margin: 20px 20px 15px 20px;
}
.rtl .theme-card {
	float: right;
    margin: 20px 30px 15px 15px;
}
.theme-card-lid {
	opacity: 1;
	width: 184px;
    height: 100px;
	background: #fff;
	overflow: hidden;
	position: relative;
	top: 0;
	z-index: 2;
	border-radius: 2px;
	transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    background-size: 130px;
    background-repeat: no-repeat;
    background-position: center 25px;
}
/* Hover: lid slides up just enough to reveal the buttons in the bottom
   layer. Swatches keep their size (no shrink) and travel up with the
   lid — natural physics, single property transitions cleanly via the
   shared easing curve. */
.theme-card:hover > .theme-card-lid {
    top: -51px;
}
.theme-card-bottom {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    position: relative;
    top: -49px;
    height: 51px;
    z-index: 1;
    color: #999;
    font-weight: 500;
    width: 100%;
    background: #eee;
}
/* Footer-row layout — flexbox replaces the old float pair so the two
   buttons (Switch left, Customize right) sit on opposite edges and
   shrink gracefully on longer translations. flex-wrap is a safety
   net for pathological translation widths. */
.theme-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 0 10px;
    gap: 4px;
    box-sizing: border-box;
}
.theme-card-bottom .switch,
.theme-card-bottom .theme-preview {
    padding: 0;
    float: none;
}
/* Visual order — DOM has .theme-preview (Customize) first, .switch
   (Activate) second, but Activate is the primary action and belongs
   on the left. Flex `order` overrides without touching markup. */
.theme-card-bottom .switch { order: 1; }
.theme-card-bottom .theme-preview { order: 2; }
/* Customize button — subordinate to the primary Switch/Active pill.
   Renders as a ghost text-button: no border at rest, only a soft
   underline + colour change on hover so it reads as a secondary
   action without competing with the green Active state. */
.theme-preview button.osta-theme-customize {
    background: transparent;
    border: 0;
    padding: 4px 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: #666;
    transition: color 0.15s ease;
}
.theme-preview button.osta-theme-customize:hover {
    color: #2a3540;
    text-decoration: underline;
}
/* Instant-switch button on theme cards. Replaces the legacy radio +
   "Save Changes" round-trip with a single click that AJAX-saves the
   choice and swaps the live CSS link immediately. The .is-active
   variant renders on the card whose theme is currently selected. */
.switch button.osta-theme-switch {
    background: transparent;
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    padding: 4px 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.switch button.osta-theme-switch:hover {
    background: #f5f5f5;
    border-color: #999;
    color: #333;
}
.switch button.osta-theme-switch.is-active {
    background: #7eb900;
    border-color: #7eb900;
    color: #ffffff;
    cursor: default;
}
.switch button.osta-theme-switch.is-active:hover {
    background: #7eb900;
    border-color: #7eb900;
}
html[lang="ru"] a.pink {
    font-size: 75%;
    display: table-caption;
}
html[lang="ru"] .theme-preview {
    padding: 20px 0 0 10px;
    position: relative;
    bottom: 6px;
}
html[lang="ru"] .theme-preview a {
    font-size: 80%;
    display: table-caption;	
}
html[lang="ru"] .switch {
    padding: 20px 10px 20px 0;
    font-size: 80%;
}
.use-custom-theme {
	display: inline-block;
    margin: 20px 15px 15px 20px;
    padding: 16px;
    color: #4c5156 !important;
    text-transform: uppercase;
    opacity: 1;
    width: fit-content;
    background: #fff;
    overflow: hidden;
    z-index: 2;
    font-weight: 400;
    border-radius: 2px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.12);
}
.rtl .use-custom-theme {
    margin: 20px 30px 15px 15px;
}
.use-custom-theme input[type="radio"] {
    margin: 0 0 0 6px ;
}
.rtl .use-custom-theme input[type="radio"] {
    margin: 0 6px 0 0 ;
}
.use-custom-theme:hover {
    transition: all 0.3s ease;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}
button[value="Save Theme"],
button#save-custom-colors {
    margin: 15px 30px 20px 20px;
    padding: 14px 20px 10px 20px!important;
    font-size: 16px;
    color: #3c763d;
    background-color: #d0e9c6;
    border: initial;
}
button[value="Save Theme"]:hover,
button#save-custom-colors:hover {
    background: #b4e6a0 !important;
    color: #2a3e2a !important;
    border: initial;
	box-shadow: unset;
}
.rtl button[value="Save Theme"],
.rtl button#save-custom-colors {
    margin: 15px 30px 20px 15px;
}
#color-theme input.switch:empty ~ label {
    top: 3px;
}
#theme-black {
    background-image: url("../../osta/css/themes/black/black-theme.svg");
}
#theme-mint {
    background-image: url("../../osta/css/themes/mint/mint-theme.svg");
}
#theme-ice {
    background-image: url("../../osta/css/themes/ice/ice-theme.svg");
}
#theme-soft {
    background-image: url("../../osta/css/themes/soft/soft-theme.svg");
}
#theme-pink {
    background-image: url("../../osta/css/themes/pink/pink-theme.svg");
}
#theme-earth {
    background-image: url("../../osta/css/themes/earth/earth-theme.svg");
}
#theme-brown {
    background-image: url("../../osta/css/themes/brown/brown-theme.svg");
}
#theme-blue {
    background-image: url("../../osta/css/themes/blue/blue-theme.svg");
}
#theme-cool {
    background-image: url("../../osta/css/themes/cool/cool-theme.svg");
}
#theme-bright {
    background-image: url("../../osta/css/themes/bright/bright-theme.svg");
}
#theme-ivory {
    background-image: url("../../osta/css/themes/ivory/ivory-theme.svg");
}
#theme-cozy {
    background-image: url("../../osta/css/themes/cozy/cozy-theme.svg");
}
#theme-moonlit {
    background-image: url("../../osta/css/themes/moonlit/moonlit-theme.svg");
}
#theme-ocean {
    background-image: url("../../osta/css/themes/ocean/ocean-theme.svg");
}
#theme-dreamland {
    background-image: url("../../osta/css/themes/dreamland/dreamland-theme.svg");
}
#theme-magic {
    background-image: url("../../osta/css/themes/magic/magic-theme.svg");
}
#theme-beach {
    background-image: url("../../osta/css/themes/beach/beach-theme.svg");
}
#theme-morning {
    background-image: url("../../osta/css/themes/morning/morning-theme.svg");
}
#theme-serene {
    background-image: url("../../osta/css/themes/serene/serene-theme.svg");
}
#theme-glow {
    background-image: url("../../osta/css/themes/glow/glow-theme.svg");
}
#theme-pearl {
    background-image: url("../../osta/css/themes/pearl/pearl-theme.svg");
}
#theme-cotton {
    background-image: url("../../osta/css/themes/cotton/cotton-theme.svg");
}
#logo-options,
#additional-options,
#theme3 {
    margin: 0 0 10px 0;
}
#theme4 {
    margin: 20px 0 0 0;
}
#theme5 {
    margin-top: 44px;
}
#theme6 {
    margin-top: 40px;
}
#theme7 {
    margin-top: 40px;
}
table#theme5 a {
    transition: all 0.3s ease;	
    font-size: 90%;
    border: .5px solid;
    background: #fff;
    padding: 0 4px 1px 4px;
	margin-bottom: 10px;		
}
table#theme5 a:hover {
    transition: all 0.3s ease;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.0);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.0);
    position: relative;
    top: -1px;
    border: .5px solid #659505;
    color: #659505;	
}
#additional-options input[type=text] {
    margin: 0 5px 0 0 !important;
    height: 33px !important;
	padding: 0 0 0 8px !important;
}
#custom-theme {
    margin-top: 20px;
}
#color-pickers {
    padding: 0 0 0 20px;
}
.rtl #color-pickers {
    padding: 0 20px 0 0;
}
input.form-control.input-lg {
    padding: 0 0 0 8px !important;
    margin: 0 0 10px 0;
}
.rtl input.form-control.input-lg {
    padding: 0 8px 0 0 !important;
}
#logo-options input[type="radio"] {
    margin: 0 10px 0 4px;
}
.rtl #logo-options input[type="radio"] {
    margin: 0 4px 0 10px;
}
#additional-options input[type="radio"] {
    margin: 0 10px 0 4px;
}
.rtl #additional-options input[type="radio"] {
    margin: 0 4px 0 10px;
}
#logo-options tr:first-child td,
#additional-options tr:first-child td,
#theme3 tr:first-child td,
#theme4 tr:first-child td {
    padding: 0;
}
#logo-options td,
#additional-options td,
#theme2a tr:nth-child(2) td,
#theme3 td,
#theme4 td,
#theme5 tr:nth-child(2) td,
#theme6 tr:nth-child(2) td,
#theme7 tr:nth-child(2) td {
    padding: 0 0 20px 20px;
}
.rtl #logo-options td,
.rtl #additional-options td,
.rtl #theme2a tr:nth-child(2) td,
.rtl #theme3 td,
.rtl #theme4 td,
.rtl #theme5 tr:nth-child(2) td {
    padding: 0 20px 20px 0;
}
#custom-header-bg-button, 
#theme-title-button,
#theme-subtitle-button,
#mobile-text-button,
#mobile-link-button,
#language-bar-save-button,
#logo-options-save-button {
    margin: 0;
    height: 32px !important;
    min-width: 204px;
    font-size: 16px;
    color: #515d6d;
    border: initial !important;
    background: #dcdfe2 !important;
}
#custom-header-bg-button:hover, 
#theme-title-button:hover,
#theme-subtitle-button:hover,
#mobile-text-button:hover,
#mobile-link-button:hover,
#language-bar-save-button:hover,
#logo-options-save-button:hover {
	background: #b4e6a0 !important;
    color: #2a3e2a !important;
    border: initial;
    box-shadow: unset;
}
#theme-title-button:before, 
#theme-subtitle-button:before,
#mobile-text-button:before,
#mobile-link-button:before {
    width: 20px;
    height: 20px;
    background-size: 10px !important;
    float: left;
    padding: 0 0 0 2px;
    position: relative;
    top: -3px;
}
#custom-text-and-links button {
    margin: 0 0 0 7px;
}
#theme6 button,
#theme7 button {
	background: #dcdfe2;
    color: #6d7989;
    border: medium none;
    margin: 0px auto;
    left: 0;
    right: 0;
    bottom: 40px;
    width: fit-content;
    text-align: center;
    padding: 14px 30px 14px 30px;
    display: inline-block;
    border-radius: 3px;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 13px;
}
#theme6 button:hover,
#theme7 button:hover {
    background: #c9cdd0;
    color: #343a42;
}	
button#old-client {
    margin-right: 16px;
    background: #ff7563;
    color: #fff;
}
button#old-staff {
    background: #8391A3;
	color: #fff;	
}
form#header-bg {
    margin: 3px 30px 15px 30px;
}
#show-errors {
	position: absolute;
    top: 29px;
    right: 29px;
    width: 354px;
    border: 1px solid #cdcdcd;
    border-radius: 4px;
    padding: 20px;
}
@media screen and (max-width: 1145px) {
#show-errors {
		width: 25vw;
	}
}
@media screen and (max-width: 1056px) {
#show-errors {
		display: none;
	}
}
.show-php-errors {
    vertical-align: top;
    line-height: 32px;
    font-size: 18px;
    height: 42px;
}
#show-errors-title {
    position: relative;
    top: -7px;
}
#logo-options .checkcontainer,
#additional-options .checkcontainer {
    margin: 0 20px 0 0;
}
#custom-text-and-links .responsive-div-theme {
    margin: 0 0 0 20px;
}
.responsive-div-theme {
     width:100%;
}
 .responsive-div-theme div {
     -moz-box-sizing:border-box;
     box-sizing:border-box;	 
}
 #one-theme, #two-theme {
     width:50%;
     float:left;
     height:100%;
}
 #two-theme {
}
.responsive-div-theme form {
    margin: 0 0 9px 0;
}
 @media screen and (max-width: 850px) {
     #one-theme, #two-theme {
         width:auto;
         float:none;
    }
}
a#subnav7.theme {
   -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; 
  -webkit-animation-name: none;
  animation-name: none;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -8px, 0);
    transform: translate3d(0, -8px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
  90% {
    -webkit-transform: translate3d(0,-2px,0);
    transform: translate3d(0,-2px,0);
  }
}
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -8px, 0);
    transform: translate3d(0, -8px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
  90% {
    -webkit-transform: translate3d(0,-2px,0);
    transform: translate3d(0,-2px,0);
  }
}
#theme-picker li {
    height: 26px;
    font-size: 18px;
}
#theme-picker input[type="radio"] {
    margin: 0 3px 0 0;
}
/* Custom CSS Code Mirror */
.cm-s-lucario span.cm-property,
.cm-s-lucario span.cm-variable-2 {
    color: #a1bad2 !important;
}
.cm-s-lucario span.cm-atom, 
.cm-s-lucario span.cm-number {
    color: #9a7bc7 !important;
}
.cm-s-lucario span.cm-string, 
.cm-s-lucario span.cm-string-2 {
    color: #c5c5c5 !important;
}
/* Custom labels: the container */
.checkcontainer {
    position: relative;
    cursor: pointer;
    padding-left: 27px;
    -webkit-user-select: none; /* Chrome, Opera, Safari */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}
/* Hide the browser's default checkbox */
.checkcontainer input {
  	position: absolute;
	opacity: 0;
	cursor: pointer;}
/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}
/* On mouse-over, add a grey background color */
.checkcontainer:hover input ~ .checkmark {
    background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.checkcontainer input:checked ~ .checkmark {
    background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Show the checkmark when checked */
.checkcontainer input:checked ~ .checkmark:after {
    display: block;
}
/* Style the checkmark/indicator */
.checkcontainer .checkmark:after {
    left: 10px;
    top: 6px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/* Create a custom radio button */
.radiobtn{
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #eee;
    border-radius: 50%;
    border: .5px solid #b8bdbf;
    will-change: background-color!important;
    -webkit-transition: all .3s ease-out!important;
    -moz-transition: all .3s ease-out!important;
    -o-transition: all .3s ease-out!important;
    -ms-transition: all .3s ease-out!important;
    transition: all .3s ease-out!important;	
}
.rtl .radiobtn {
    left: initial;
    right: 0;
}
.switch .radiobtn {
    top: 0;
}
/* On mouse-over, add a grey background color */
.checkcontainer:hover input ~ .radiobtn{
  	background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.checkcontainer input:checked ~ .radiobtn{

}
/* Create the indicator (the dot/circle - hidden when not checked) */
.radiobtn:after {
	content: "";
	position: absolute;
	display: none;
}
/* Show the indicator (dot/circle) when checked */
.checkcontainer input:checked ~ .radiobtn:after {
	display: block;
}
/* Style the indicator (dot/circle) */
.checkcontainer .radiobtn:after {
    top: 6px;
    left: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #128dbe;
}
.action-button {
	position: relative;
	overflow: hidden;	
}
/* Icon Hang */
@-webkit-keyframes hvr-icon-hang {
  0% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
  }
  50% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
  }
}
@keyframes hvr-icon-hang {
  0% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
  }
  50% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
  }
}
@-webkit-keyframes hvr-icon-hang-sink {
  100% {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
  }
}
@keyframes hvr-icon-hang-sink {
  100% {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
  }
}
i.icon-caret-down:before {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  padding-right: 2.2em;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
i.icon-caret-down:before {
	content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 24 24'%3E %3Cpath fill='%23128DBE' d='M7.41%2C8.58L12%2C13.17L16.59%2C8.58L18%2C10L12%2C16L6%2C10L7.41%2C8.58Z' /%3E %3C/svg%3E");
  	position: absolute;
  	right: 1em;
  	padding: 0 1px;
  	font-family: FontAwesome;
  	-webkit-transform: translateZ(0);
  	transform: translateZ(0);
}
.action-button:hover > i.icon-caret-down:before, 
.action-button:focus > i.icon-caret-down:before, 
.action-button:active > i.icon-caret-down:before {
  	-webkit-animation-name: hvr-icon-hang-sink, hvr-icon-hang;
  	animation-name: hvr-icon-hang-sink, hvr-icon-hang;
  	-webkit-animation-duration: .3s, 1.5s;
  	animation-duration: .3s, 1.5s;
  	-webkit-animation-delay: 0s, .3s;
  	animation-delay: 0s, .3s;
  	-webkit-animation-timing-function: ease-in-out, ease-in-out;
  	animation-timing-function: ease-in-out, ease-in-out;
  	-webkit-animation-iteration-count: 1, infinite;
  	animation-iteration-count: 1, infinite;
  	-webkit-animation-fill-mode: forwards;
  	animation-fill-mode: forwards;
  	-webkit-animation-direction: normal, alternate;
  	animation-direction: normal, alternate;
}
/* Underline From Center */
.action-button {
	display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: relative;
    overflow: hidden;
    background: #fff /*!important*/;
    color: #898989;
    border: .5px solid #b9b9b9;
    letter-spacing: 1.6px;
    -webkit-transition: background-color 0s ease !important;	
    transition: background-color 0s ease !important;	
}
.action-button:before {
  	content: "";
  	position: absolute;
  	z-index: -1;
  	left: 50%;
  	right: 50%;
 	 bottom: 0;
  	background: #128DBE;
  	height: 1px;
  	-webkit-transition-property: left, right;
  	transition-property: left, right;
  	-webkit-transition-duration: 0.3s;
  	transition-duration: 0.3s;
  	-webkit-transition-timing-function: ease-out;
  	transition-timing-function: ease-out;
}
.red.button.action-button:before {
    background: #d01919;
}
span.red.button.action-button:before,
button.red.button.action-button:before {
  	background: #d01919;
}
.action-button:hover:before, .action-button:focus:before, .action-button:active:before {
  	left: 0;
  	right: 0;
}
a.button.action-button.add-user:hover {
    border: .5px solid #b9b9b9;
}
a.green.button.action-button:before {
	background: #128dbe;
}
a.green.button.action-button:hover {
    color: #128dbe;
}
/* Icon Drop */
@-webkit-keyframes hvr-icon-drop {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
  }
}
@keyframes hvr-icon-drop {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  51%,
	100% {
    opacity: 1;
  }
}
/* Icon Drop */
button.action-button i.icon-map-marker {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  padding-right: 2.2em;
}
button.action-button i.icon-map-marker:before {
    content: '';
    position: absolute;
	left: 3px;
    top: -7px;
    opacity: 1;
    padding: 0 1px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23128DBE' d='M12%2C11.5A2.5%2C2.5 0 0%2C1 9.5%2C9A2.5%2C2.5 0 0%2C1 12%2C6.5A2.5%2C2.5 0 0%2C1 14.5%2C9A2.5%2C2.5 0 0%2C1 12%2C11.5M12%2C2A7%2C7 0 0%2C0 5%2C9C5%2C14.25 12%2C22 12%2C22C12%2C22 19%2C14.25 19%2C9A7%2C7 0 0%2C0 12%2C2Z' /%3E %3C/svg%3E");
}
button.action-button:hover > i.icon-map-marker:before, button.action-button:focus > i.icon-map-marker:before, button.action-button:active > i.icon-map-marker:before {
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-animation-name: hvr-icon-drop;
  animation-name: hvr-icon-drop;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
a#new-ticket:after {
    content: "\f0f6";
    display: inline;
    font-size: 14px;
    font-weight: 500;
    margin-left: 5px;
    font-family: fontawesome;
}
.demo-disabled {
    display: block;
    color: #777;
    font-style: initial;
    font-size: 18px;
    margin: 30px 0 20px;
    text-align: center;
}
/* Pop */
@-webkit-keyframes hvr-pop {
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@keyframes hvr-pop {
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
a#new-ticket {
  display: inline-block;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
}
a#new-ticket:hover, a#new-ticket:focus, a#new-ticket:active {
  -webkit-animation-name: hvr-pop;
  animation-name: hvr-pop;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
/* SEARCH FORM */
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
	display: none; 
}
input[type=search] {

}
input[type=search]:focus {

}
input:-moz-placeholder {
	color: #999;
}
input::-webkit-input-placeholder {
	color: #999;
}
p[style="text-align:center;"] .button.action-button {
    margin: 0 4px 4px 4px;
    box-shadow: none;
    padding: 9px 30px !important;
    color: #515d6d;
    border: initial !important;
    background: #dcdfe2;
    letter-spacing: 1.6px;
    font-weight: 700;
    -webkit-transform: initial;
    transform: initial;	
}
p[style="text-align:center;"] .button.action-button:hover,
p[style="text-align:center;"] .button.action-button:active {
    box-shadow: unset;
    border: initial;
    background: #c9cdd0;
    color: #343a42;
    height: unset;
}
p[style="text-align:center;"] button.red.button.action-button:hover,
p[style="text-align:center;"] button.red.button.action-button:active {
    color: #b04242;
}
p[style="text-align:center;"] .button.action-button[type="submit"] {
    color: #3c763d;
    background-color: #d0e9c6;
}
p[style="text-align:center;"] .button.action-button[type="submit"]:hover, 
p[style="text-align:center;"] .button.action-button[type="submit"]:active {
    background: #b4e6a0 !important;
    color: #2a3e2a !important;
    box-shadow: unset;
}

/* ==========================================================================
 SEARCH FIELD
========================================================================== */
form[action="kb.php"] .attached.input,
form[action="orgs.php"] .attached.input,
form[action="users.php"] .attached.input,
form[action="tasks.php"] .attached.input,
form[action="tickets.php"] .attached.input {
    position: relative;
    float: right;
    top: -32px;
    right: -20px;		
    border: none !important;
    height: 24px;
    margin: 0 0 0 -300px;
    outline: none;
    /*-webkit-appearance: textfield;*/ /*messses up seach boxes in mobile*/
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
form[action="tickets.php"] .attached.input {
    top: -34px;
    right: calc(1% + -7px);
}
@media screen and (min-width: 600px) and (max-width: 1260px) {
	form[action="tickets.php"] .attached.input {
	    right: -10px;
	}
}
@media screen and (min-width: 600px) and (max-width: 1222px) {
	form[action="tickets.php"] .attached.input {
	    right: 10px;
	}
}
/* move again when warning, error etc message */
.attached.input.move-search {
	top: -95px !important;
}
.rtl #kbSearch,
.rtl #basic_search {
    float: left;
}
form[action="logs.php"] #msg_warning, 
form[action="audits.php"] #msg_error, 
form[action="banlist.php"] #msg_notice,
form[action="logs.php"] #msg_error, 
form[action="audits.php"] #msg_warning, 
form[action="banlist.php"] #msg_alert,
form[action="logs.php"] #msg_alert, 
form[action="audits.php"] #msg_notice, 
form[action="banlist.php"] #msg_warning,
form[action="logs.php"] #msg_notice, 
form[action="audits.php"] #msg_alert, 
form[action="banlist.php"] #msg_error {
    margin-top: 10px;
}
.rtl form[action="kb.php"] .attached.input,
.rtl form[action="orgs.php"] .attached.input,
.rtl form[action="users.php"] .attached.input,
.rtl form[action="tasks.php"] .attached.input,
.rtl form[action="tickets.php"] .attached.input {
    float: left;
    right: initial !important;
    left: 0 !important;
    margin: 0 !important;
    margin-right: -189px !important;
}
form[action="kb.php"] #basic_search .input.attached input,
form[action="orgs.php"] .input.attached input,
form[action="users.php"] .input.attached input,
form[action="tasks.php"] .input.attached input,
form[action="tickets.php"] .input.attached input {
    margin: 0 !important;
    border: 0;
	background-color: rgba(255, 255, 255, 0.3);
    border-right: 0;
    height: 24px;
	padding: 0 0 0 9px;
	width: 140px !important;
	-webkit-border-radius: 10em;
	-moz-border-radius: 10em;
    border-radius: 3px 0 0 3px;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;	
}
.rtl form[action="kb.php"] #basic_search .input.attached input,
.rtl form[action="orgs.php"] .input.attached input,
.rtl form[action="users.php"] .input.attached input,
.rtl form[action="tasks.php"] .input.attached input,
.rtl form[action="tickets.php"] .input.attached input {
	background-position: left 4px center;
	padding: 0 9px 0 0;	
}
form[action="kb.php"] #basic_search .input.attached input:focus,
form[action="orgs.php"] .input.attached input:focus,
form[action="users.php"] .input.attached input:focus,
form[action="tasks.php"] .input.attached input:focus,
form[action="tickets.php"] .input.attached input:focus {
	min-width: 230px;
	background-color: #fff;
	border-color: #66CC75;
	-webkit-box-shadow: initial;
	-moz-box-shadow: initial;
	box-shadow: initial;
}
form[action="kb.php"] #basic_search .input.attached input:focus + .button.attached,
form[action="orgs.php"] .input.attached input:focus + .button.attached,
form[action="users.php"] .input.attached input:focus + .button.attached,
form[action="tasks.php"] .input.attached input:focus + .button.attached,
form[action="tickets.php"] .input.attached input:focus + .button.attached {
	background-color: #fff;
	height: 24px;
}
form[action="kb.php"] .button.attached i.icon-search,
form[action="orgs.php"] .button.attached i.icon-search,
form[action="users.php"] .button.attached i.icon-search,
form[action="tasks.php"] .button.attached i.icon-search,
form[action="tickets.php"] .button.attached i.icon-search {
    background-image: initial;
}
form[action="kb.php"] .button.attached,
form[action="orgs.php"] .button.attached,
form[action="users.php"] .button.attached,
form[action="tasks.php"] .button.attached,
form[action="tickets.php"] .button.attached {
    opacity: .8 !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23128DBE' d='M9.5%2C3A6.5%2C6.5 0 0%2C1 16%2C9.5C16%2C11.11 15.41%2C12.59 14.44%2C13.73L14.71%2C14H15.5L20.5%2C19L19%2C20.5L14%2C15.5V14.71L13.73%2C14.44C12.59%2C15.41 11.11%2C16 9.5%2C16A6.5%2C6.5 0 0%2C1 3%2C9.5A6.5%2C6.5 0 0%2C1 9.5%2C3M9.5%2C5C7%2C5 5%2C7 5%2C9.5C5%2C12 7%2C14 9.5%2C14C12%2C14 14%2C12 14%2C9.5C14%2C7 12%2C5 9.5%2C5Z' /%3E%3C/svg%3E");
    background-position: right 1px center;
    background-size: 20px;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.3);	
    border: initial !important;	
    margin: 0;
    width: 24px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;	
}
form[action="kb.php"] i.icon-search,
form[action="orgs.php"] i.icon-search,
form[action="users.php"] i.icon-search,
form[action="tasks.php"] i.icon-search,
form[action="tickets.php"] i.icon-search {
    top: 0;
    opacity: .7;
}
form[action="kb.php"] input#query:placeholder-shown,
form[action="orgs.php"] input.basic-search:placeholder-shown,
form[action="users.php"] input.basic-search:placeholder-shown,
form[action="tasks.php"] input.basic-search:placeholder-shown,
form[action='tickets.php'] input.basic-search:placeholder-shown {
    /*color: var(--mobile-link-color) !important;*/ /*hides text cursor*/
    opacity: .8 !important;
    font-size: 13px !important;
    font-style: italic !important;
}
form[action="kb.php"] input#query::placeholder,
form[action="orgs.php"] input.basic-search::placeholder,
form[action="users.php"] input.basic-search::placeholder,
form[action="tasks.php"] input.basic-search::placeholder,
form[action="tickets.php"] input.basic-search::placeholder {
    color: var(--nav-bar-link) !important;
    opacity: .8 !important;
    font-size: 13px !important;
    font-style: italic !important;
}
form[action="kb.php"] input#query::-moz-placeholder,
form[action="orgs.php"] input.basic-search::-moz-placeholder,
form[action="users.php"] input.basic-search::-moz-placeholder,
form[action="tasks.php"] input.basic-search::-moz-placeholder,
form[action='tickets.php'] input.basic-search::-moz-placeholder {
    color: var(--nav-bar-link) !important;
    opacity: .8 !important;
    font-size: 13px !important;
    font-style: italic !important;
}
form[action="kb.php"] input#query::-ms-input-placeholder,
form[action="orgs.php"] input.basic-search::-ms-input-placeholder,
form[action="users.php"] input.basic-search::-ms-input-placeholder,
form[action="tasks.php"] input.basic-search::-ms-input-placeholder,
form[action='tickets.php'] input.basic-search::-ms-input-placeholder {
    color: var(--nav-bar-link) !important;
    opacity: .8 !important;
    font-size: 13px !important;
    font-style: italic !important;
}
#basic_search {
    background-color: #f4f4f4;
    box-shadow: none;
    border-bottom: none;
    border-radius: 0 0 5px 5px;
    height: 0;
    margin-bottom: -1%;
}
/* #basic_search .attached.button {
    background-color: var(--header-title);
    border: none;
} */
#basic_search button[type=submit]:hover {
    color: var(--header-bg);
    box-shadow: none;
}
#basic_search .action-button.muted {
    box-shadow: 0 0 0 0 #cfd4d6 inset;
	margin: 0;	
}
#basic_search i.icon-search {
    text-shadow: none;
}
.sticky.bar.opaque.fixed form[action="tickets.php"] .attached.input,
.sticky.bar.opaque.fixed form[action="tickets.php"] .action-button.advanced-search.gray-light2 {
    display: none;
}

/* ==========================================================================
 TINYMCE
========================================================================== */
.mce-tinymce {
    margin-top: 10px !important;
    border: .5px solid #d7d7d7 !important;
}
.mce-panel {
    background-color: #e7e7e9 !important;
    border-radius: 5px !important;
    border: unset !important;
}
.mce-floatpanel.mce-popover.mce-bottom>.mce-arrow:after {
	border-bottom-color: #e7e7e9 !important;
}
.mce-menubar {
    border: .5px solid #d7d7d7 !important;
    border-radius: 5px 5px 0 0 !important;
	background: #e7e7e9 !important;
}
.mce-menubar .mce-menubtn button {
    background: #e7e7e9 !important;
}
.mce-toolbar {
    border-left: .5px solid #e6e6e6 !important;
    border-right: .5px solid #e6e6e6 !important;	
}
.mce-stack-layout {
    background: #e7e7e9 !IMPORTANT;
}
.mce-menubar .mce-menubtn button span,
.mce-txt {
    color: #6e6e6e !important;
}
.mce-menu-item:hover .mce-text, .mce-menu-item.mce-selected .mce-text, .mce-menu-item:focus .mce-text {
    color: white !important;
}
.mce-btn .mce-caret,
.mce-menubar .mce-caret {
	border-top-color: #6e6e6e !important;
}
.mce-btn {
    border: unset !important;
    border-color: transparent transparent transparent transparent !important;
    position: relative !important;
    text-shadow: unset !important;
    display: inline-block !important;
    background-color: unset !important;
}
.mce-menubtn button {
    color: #333 !important;
    background: #e7e7e9  !important;
}
.mce-menu {
    border-radius: 5px 5px 5px 5px !important;
    border: .5px solid #c7c6c0 !important;
}
div.mce-menu .mce-menu-item-sep, .mce-menu-item-sep:hover {
    border-bottom: .5px solid #d5cda4 !important;
}
.mce-btn button {
	padding: 3px 5px !important;	
    background: #e7e7e9 !important;
}
.mce-btn-group:not(:first-child) {
    border-left: unset !important;
    padding: 0 10px 0 0;
    margin-left: unset !important;
    border-radius: 0 !important;
}
.mce-toolbar-grp {
    border-radius: 0 !important;
}
.mce-splitbtn:hover .mce-open {
    border-left-color: #e7e7e9 !important;
}
.mce-txt {
    font-size: 12px !important;
}
.mce-colorbutton .mce-preview {
    display: none !important;
}
.mce-widget button {
    padding: 5px !important;
}
button.mce-open {
    padding: 5px 5px 5px 0 !important;
}
.mce-i-backcolor {
    top: 0 !important;
	background: #89dce6 !important;
}
div[style="border-width: 1px 0 0;"] {
/*    border: unset !important;
    border-top: .5px solid #bfbfbf !important;*/
}
.mce-toolbar-grp .mce-flow-layout-item:first-child {
    margin-left: 4px !important;
}
.mce-floatpanel.mce-popover {
    border: .5px solid #bfbfbf !important;
    border-radius: 5px !important;
}
.mce-menu-item .mce-caret {
    border-left: 4px solid #6e6e6e !important;
}
.mce-menu-item .mce-ico, .mce-menu-item .mce-text {
    color: #6e6e6e !important;
}
.mce-menu-item:hover > i.mce-ico {
    color: white !important;
}
.mce-menu-item .mce-text {
    color: #59574c;
    font-family: 'Open Sans', sans-serif !important;
}
.mce-menu-item-normal.mce-active .mce-text {
    color: white !important;
}
/* Help Menu */
.mce-window-head {
    border-bottom: unset !important;
}
.mce-tabs {
    border-bottom: .5px solid #c5c5c5 !important;
}
.mce-tab {
    background: #e7e7e9 !important;
    border: .5px solid #c8c8c7 !important;
	border-left: unset !important;	
    border-bottom: unset !important;
}
.mce-container, .mce-container-body {
	border-radius: 5px 5px 0 0!important
}
.mce-tabs, .mce-tabs+.mce-container-body {
    background: #e7e7e9 !important;
}
.mce-container .mce-table-striped tr:nth-child(even) {
    background-color: #d6d6d6 !important;
}
.mce-tab.mce-active {
    border-top: .5px solid #cac9bf !important;
    margin-bottom: -2px !important;
    height: 14px !important;
    border-bottom: 2px solid #e7e7e9 !important;	
}
.mce-container .mce-table-striped thead>tr {
    background-color: #e7e7e9 !important;
}
.mce-container .mce-table-striped tbody>tr:hover {
    background-color: #dbd7c3 !important;
}
.mce-foot {
    border-radius: 0 0 5px 5px !important;
    border-top: .5px solid #c5c5c5 !important;	
}
div[style="padding: 10px; background: #e3e7f4; height: 100%;"] {
    background-color: #d6d6d6 !important;
}
.mce-edit-area {
    border: .5px solid #d7d7d7 !important;
    border-radius: 0 !important;
    border-right: 1px solid #e6e6e6 !important;	
    border-left: 1px solid #e6e6e6 !important;		
}
div[style="left: 427px;top: 10px;width: 47px;height: 30px;"] {
    left: unset !important;
    top: 10px;
    width: 47px;
    height: 30px;
}
.mce-textbox,
.mce-combobox input {
    border: .5px solid #c5c5c5 !important;
}
.mce-floatpanel.mce-popover.mce-bottom>.mce-arrow {
    -webkit-box-shadow: 0 2px 0 0 #e7e7e9;
    -moz-box-shadow: 0 2px 0 0 #e7e7e9;
    box-shadow: 0 2px 0 0 #e7e7e9;
}
#basic_search form[action="banlist.php"] .attached.input button.attached.button {
    background: #7ab800;
}
#basic_search form[action="banlist.php"] .attached.input i.icon-search {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M9.5%2C3A6.5%2C6.5 0 0%2C1 16%2C9.5C16%2C11.11 15.41%2C12.59 14.44%2C13.73L14.71%2C14H15.5L20.5%2C19L19%2C20.5L14%2C15.5V14.71L13.73%2C14.44C12.59%2C15.41 11.11%2C16 9.5%2C16A6.5%2C6.5 0 0%2C1 3%2C9.5A6.5%2C6.5 0 0%2C1 9.5%2C3M9.5%2C5C7%2C5 5%2C7 5%2C9.5C5%2C12 7%2C14 9.5%2C14C12%2C14 14%2C12 14%2C9.5C14%2C7 12%2C5 9.5%2C5Z' /%3E%3C/svg%3E");
}

/* ==========================================================================
 ADVANCED TICKET SEARCH POPUP / EDIT TICKET QUEUE POPUP (uses same css)
========================================================================== */
#advanced-search i.icon-save {
    position: relative;
    /*top: 0; */  /*target*/
}
button#do_search i.icon-search {
    top: 3px;
    margin-right: 3px;
}
.dialog fieldset input:not([type=checkbox]) {
    border: .5px solid #bfbfbf;
    padding: 3px 3px 3px 8px;
}
.adv-search-field {
    margin-top: 0 !important;
}
#advanced-search .accordian dt {
    border-radius: 4px;
    border: .5px solid #aad3e3;
    background: #d1f2ff;
}
#advanced-search .accordian dt a {
    color: #12759c;
    font-weight: 400;
    display: block;
}
div[style="border-left:1px solid #888;position:relative;padding-bottom:26px;"] {
    border-left: .5px solid #888 !important;
}
.select2-container.select2-container--default.select2-container--open {
    z-index: 999999 !important;
}
#criteria .adv-search-field-container {
    margin-top: 3px;
}
form#advsearch .flex.row .span12 {
    padding-left: 0;
    margin-bottom: 10px;
}
form#advsearch #criteria .flex.row .span12 {
    padding: 5px 10px;
}
@media (max-width: 660px) {
	form[action="#tickets/search"] .row {
		display: unset;
	}
	#advanced-search .span6 + .span6 {
		margin-left: 0;
	}
	#advanced-search .row .span6 {
		display: unset;
		width: 100%;
		padding: 5px 10px;
		vertical-align: top;
	}
	#advanced-search div[style="margin-bottom: 0.5em;"] {
    	margin-bottom: 5px !important;
		margin-top: 20px;
	}
	#advanced-search .accordian dt {
		margin-bottom: 5px;
		max-width: 300px;
	}	
	#advanced-search div[style="border-left:1px solid #888;position:relative;padding-bottom:26px;"] {
		border-left: unset !important;
	}
	#advanced-search div[style="position:absolute;bottom:0"] {
		position: relative !important;
		width: 100%;
		margin-top: 10px;
	}
	#advanced-search div#saved-searches {
		margin-bottom: 0;
	}
	div#advanced-search hr {
		visibility: hidden;
		margin: 0;
	}
	dt.saved-search i.icon-chevron-down.pull-right {
		top: 1px;
	}	
}
/* Edit Ticket Queue popup (uses same code as Advanced Ticket Search) */
form#advsearch table td:not(:empty) {
    padding: 4px;
    background: #fff !important;
}
form#advsearch .dialog .table td:not(:empty) {
    background-color: #fff!important;
}
form#advsearch table td#append-column:not(:empty) {
	padding-top: 20px !important;
}
div.translatable {
    outline: initial !important;
}
div.translatable.focus {
    outline: .5px solid #606d7f !important;
}
form#advsearch #inherited-parent {
    margin-bottom: 7px !important;
}
form#advsearch tbody.sortable-rows input.translatable {
    width: 170px;
}
form#advsearch tbody.sortable-rows input[data-name="width"] {
    display: none;
}
form#advsearch input.translatable {
    position: relative;
    top: 1px;
    left: 2px;
}
form#advsearch button.translatable {
    margin: 0;
    padding: 0;
    height: 33px;
}
form#advsearch button.translatable i.fa.fa-globe.icon-globe {
    top: 0;
}
form#advsearch button.translatable:hover {
    border: initial;
	background-color: #EFEFEF;
}
form#advsearch .translatable .flag {
	margin-right: 0;
    width: 15px;
    height: 15px;
    position: relative;
    top: 3px;
}
form#advsearch .translatable.focus:active {
	outline: initial;
}
form#advsearch #append-column i.icon-plus-sign {
    margin-left: 5px;
}
form#advsearch #append-column select#add-column {
    min-width: 212px !important;
}
form#advsearch #append-column button.green.button {
    position: relative;
    top: -3px;
    background: #DCDFE2;
	color: #343a42;	
    padding: 4px 14px;
}
form#advsearch #append-column button.green.button:hover {
    border: initial !important;
	background: #c9cdd0 !important
}

/* ==========================================================================
 SAFARI 7.1+ ONLY
========================================================================== */
_::-webkit-full-page-media, _:future, :root #sub_nav a, 
_::-webkit-full-page-media, _:future, :root #nav .active a, 
_::-webkit-full-page-media, _:future, :root #nav .inactive a,
_::-webkit-full-page-media, _:future, :root div#header a {
    color: var(--header-title);
    font-weight: 400;
}
_::-webkit-full-page-media, _:future, :root .action-button {
    border: 1px solid #d4d4d4;
}
_::-webkit-full-page-media, _:future, :root input,
_::-webkit-full-page-media, _:future, :root textarea, 
_::-webkit-full-page-media, _:future, :root input[type=text], 
_::-webkit-full-page-media, _:future, :root button#do_search,
_::-webkit-full-page-media, _:future, :root .input.attached input,
_::-webkit-full-page-media, _:future, :root button.ui-datepicker-trigger,
_::-webkit-full-page-media, _:future, :root .input.attached .button.attached,
_::-webkit-full-page-media, _:future, :root .dialog fieldset input:not([type=checkbox]) {
    border: 1px solid #bfbfbf /*!important*/;
	-webkit-appearance: none;	
}
input[type="checkbox"] {
    -webkit-appearance: checkbox;	
}
_::-webkit-full-page-media, _:future, :root input[type=radio] {
	top: 0;
}
_::-webkit-full-page-media, _:future, :root .input.attached .button.attached {
    border-left: 0 !important;
}
_::-webkit-full-page-media, _:future, :root div[style="border-left:1px solid #888;position:relative;padding-bottom:26px;"] {
    border-left: 1px solid #888 !important;
}

/* ==========================================================================
 API KEYS
========================================================================== */
form[action="apikeys.php"] table.list th:first-child {
	width: 5%;
}
form[action="apikeys.php"] table.list th:nth-child(2) {
	width: calc(100% - 60% - 4%);
}
form[action="apikeys.php"] table.list th:nth-child(3),
form[action="apikeys.php"] table.list th:nth-child(4),
form[action="apikeys.php"] table.list th:nth-child(5),
form[action="apikeys.php"] table.list th:nth-child(6) {
	width: 15%;
}
form[action="apikeys.php"] table.list td:nth-child(6) {
	font-size: 12px;
}

/* ==========================================================================
 SCHEDULES
========================================================================== */
form[action="schedules.php"] table.list th:first-child {
	width: 4% !important;
}
form[action="schedules.php"] table.list th:nth-child(2) {
	width: calc(100% - 4% - 45%);
}
form[action="schedules.php"] table.list th:nth-child(3),
form[action="schedules.php"] table.list th:nth-child(4),
form[action="schedules.php"] table.list th:nth-child(5) {
	width: 15%;
}
.schedules li a {
    padding: 4px 0 0 0 !important;
}
#schedule-tabs_container .form_table,
#schedule-tabs_container .tab_content:not(.left) {
	padding-top: 0;
}
.schedules table.list tbody tr td:nth-child(2) {
    padding-right: 20px !important;
}
#schedule-holidays i.icon-calendar:before {
    top: -5px;
}
.schedules-page i.icon-calendar {
    top: 0;
}
.schedules-page table.form_table .select2-container {
    width: 294px !important;
}
.schedules-page table.form_table input[type=text] {
    width: 283px !important;
}
.schedules-page .form-simple .custom-field {
    margin-bottom: 22px;
}

/* ==========================================================================
 BAN LIST
========================================================================== */
form[action="banlist.php"] table.list, #ticketTable {
    margin: 3px 0 0 0;
}
form[action="banlist.php"] table.list th:first-child {
	width: 3.5%;
}
form[action="banlist.php"] table.list th:nth-child(2) {
	width: calc(100% - 53%);
}
form[action="banlist.php"] table.list th:nth-child(3),
form[action="banlist.php"] table.list th:nth-child(4),
form[action="banlist.php"] table.list th:nth-child(5) {
	width: 16.5%;
}
form[action="banlist.php"] table.list td:nth-child(2) a {
	font-size: 13px;
}
.banlist #basic_search {
    background: rgba(0, 0, 0, 0.10196078431372549);	
    margin: -10px 0;
    display: block;
    padding: 4px 4px 2px 8px;
    height: 42px;
}
.banlist i.icon-search {
    background-position: 1px -3px;
}
.banlist .attached.input {
    float: right;
    margin-right: 13px;
}

/* ==========================================================================
 CANNED RESPONSES
========================================================================== */
form[action="canned.php"] table.list th:first-child {
	width: 4%;
}
form[action="canned.php"] table.list th:nth-child(2) {
	width: calc(100% - 4% - 45%);
}
form[action="canned.php"] table.list th:nth-child(3),
form[action="canned.php"] table.list th:nth-child(4),
form[action="canned.php"] table.list th:nth-child(5) {
	width: 15%;
}
form[action="canned.php"] table.list td:nth-child(2) a {
	font-size: 14px;
}
.canned table.list .Icon.file {
    margin-left: 5px;
}

/* ==========================================================================
 CATEGORIES
========================================================================== */
form[action="categories.php"] table.list th:first-child {
	width: 4%;
}
form[action="categories.php"] table.list th:nth-child(2) {
	width: calc(100% - 4% - 45%);
}
form[action="categories.php"] table.list th:nth-child(3),
form[action="categories.php"] table.list th:nth-child(4),
form[action="categories.php"] table.list th:nth-child(5) {
	width: 15%;
}
form[action="categories.php"] table.list td:nth-child(4) {
    text-align: left !important;
}
form[action="categories.php"] table.list td:nth-child(2) a {
	font-size: 14px;
}

/* ==========================================================================
 DEPARTMENTS
========================================================================== */
form[action="departments.php"] table.list, #ticketTable {
    margin: 8px 0 0 0;
}
form[action="departments.php"] table.list th:first-child {
    width: 3.5% !important;
}
form[action="departments.php"] table.list th:nth-child(2),
form[action="departments.php"] table.list th:nth-child(6) {
	width: 20%;
}
form[action="departments.php"] table.list th:nth-child(3),
form[action="departments.php"] table.list th:nth-child(4),
form[action="departments.php"] table.list th:nth-child(5),
form[action="departments.php"] table.list th:nth-child(7),
form[action="departments.php"] table.list th:nth-child(8) {
	width: calc((100% - 43.5%) / 5);
}
form[action="departments.php"] table.list td:nth-child(2) a {
	font-size: 14px;
}
form[action="departments.php"] table.list td:nth-child(2) small {
	font-weight: 600;
    padding-left: 6px;
    color: #f19090;
    font-size: 11px;
    position: relative;
    top: -1px;
}

/* ==========================================================================
 DIRECTORY
========================================================================== */
.directory table.list th:first-child {
	width: 20%;
	background-image: initial;	
}
.directory table.list th:nth-child(5) {
	width: 10%;
}
.directory table.list th:nth-child(2)
.directory table.list th:nth-child(3),
.directory table.list th:nth-child(4),
.directory table.list th:nth-child(6) {
	width: calc(70% / 4);
}
.directory-page table.list th:first-child a.desc {
    padding: 1px 0 0 8px;
}
.directory table.list td:first-child {
    font-weight: 500;	
    padding-left: 20px;
    font-size: 14px !important;
}
form#users-list table.list td,
form#users-list table.list td a,
#mobile-only table.list a.preview.cursor,
#mobile-only table.list a.preview.cursor a {
    border: initial !important;
}
.directory table.list td[colspan="6"] {
    background: #fff !important;
}
.directory select#did {
    width: 184px;
}
.directory input[value="Filter"] {
    width: 90px !important;
    min-width: 90px !important;
}
.directory table.list tfoot td[colspan="6"] {
    border: 1px solid rgb(243, 243, 245) !important;
    padding: 12px !important;
}
.directory table.list tfoot td[colspan="6"]:before {
	display: none;
}
.note-name {
    display: inline-block;
    position: relative;
    top: -17px;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    padding-right: 10px;
    margin-right: 7px;
}
.quicknote .header .options {
    padding-left: 0;
    margin-left: 0;
    border-left: initial;
}
.quicknote .header .header-right a.action i, 
.quicknote .header .header-right a.action i:before {
    background-size: 19px !important;
    background-position: 1px -3px;
}
.quicknote .header .header-right a.action  {
    position: relative;
    top: -5px;
}

/* ==========================================================================
 EMAILS
========================================================================== */
form[action="emails.php"] table.list, #ticketTable {
    margin: 8px 0 0 0;
}
form[action="emails.php"] table.list th:first-child {
	width: 4%;
}
form[action="emails.php"] table.list th:nth-child(2) {
	width: calc(100% - 60% - 4%);
}
form[action="emails.php"] table.list th:nth-child(3),
form[action="emails.php"] table.list th:nth-child(4),
form[action="emails.php"] table.list th:nth-child(5),
form[action="emails.php"] table.list th:nth-child(6) {
	width: 15%;
}
form[action="emails.php"] table.list td:nth-child(6) {
	font-size: 12px;
}
form[action="emails.php"] table.list td:nth-child(2) a {
	font-size: 14px;
}
form[action="emails.php"] table.list td:nth-child(2) small {
	font-weight: 600;
    padding-left: 6px;
    color: #f19090;
    font-size: 11px;
    position: relative;
    top: -1px;
}

/* ==========================================================================
 FILTERS
========================================================================== */
form[action="filters.php"] table.list th:first-child {
	width: 4%;
}
form[action="filters.php"] table.list th:nth-child(2) {
	width: calc(100% - (10% * 5) - 14% - 4%);
}
form[action="filters.php"] table.list th:nth-child(3),
form[action="filters.php"] table.list th:nth-child(4),
form[action="filters.php"] table.list th:nth-child(5),
form[action="filters.php"] table.list th:nth-child(6),
form[action="filters.php"] table.list th:nth-child(7) {
	width: 10%;
}
form[action="filters.php"] table.list th:nth-child(8) {
	width: 14%;
}
form[action="filters.php"] table.list td:nth-child(2) a {
	font-size: 14px;
}
.filters-page .form_table input[name="name"] {
    width: 281px;
}
.filters-page .form_table .select2-container {
    width: 294px !important;
}
.filters-page #filter_actions .select2-container {
    width: 294px !important;
}
.filters-page button#new-action-btn {
    padding: 4px 16px;
}
.filters-page .select2.select2-container.select2-container--default ~ .select2.select2-container.select2-container--default {
    margin-top: 0;
}

/* ==========================================================================
 FORMS
========================================================================== */
form[action="forms.php"] table.list th:first-child {
    background-image: none;	
	width: 4%;
}
form[action="forms.php"] table.list th:nth-child(2),
form[action="forms.php"] table.list th:nth-child(3) {
	width: calc((100% - 4%) / 2);
}
form[action="forms.php"] table.list tbody td:nth-child(3) {
	padding: 0;
}

/* ==========================================================================
 HELP TOPICS
========================================================================== */
form[action="helptopics.php"] table.list td:not(:first-child) {
	padding-left: 0;
}
form[action="helptopics.php"] table.list th:first-child {
    width: 4% !important;
}
form[action="helptopics.php"] table.list th:nth-child(2) {
	width: calc(100% - (12% * 6) - 4%);
}
form[action="helptopics.php"] table.list th:nth-child(3),
form[action="helptopics.php"] table.list th:nth-child(4),
form[action="helptopics.php"] table.list th:nth-child(5),
form[action="helptopics.php"] table.list th:nth-child(6),
form[action="helptopics.php"] table.list th:nth-child(7),
form[action="helptopics.php"] table.list td:nth-child(8) {
	width: 12%;
}
form[action="helptopics.php"] table.list td:nth-child(2) a {
	font-size: 14px;
}
form[action="helptopics.php"] table.list td:nth-child(7),
form[action="helptopics.php"] table.list td:nth-child(8) {
	font-size: 11px;
}
form[action="helptopics.php"] table.list thead tr:first-child {
    display: none;
}

div[style="padding:8px 0;border-bottom: 2px dotted #ddd;"] {
    border: initial !important;
}
.language-commit {
    background: url(../../osta/img/priority-pattern-overlay.png) #e5bc61!important;
}
div.add-translation button {
    color: #25ad30;
}
table.list tbody tr.item-disabled td a {
    opacity: .6;
}
table.list tbody tr.item-disabled td {
    color: #777777a6;
}

/* ==========================================================================
 ADD A NEW HELP TOPIC
========================================================================== */
.helptopics #topic-forms td.handle {
    padding: 0 0 10px 0!important;
}
#topic-tabs_container .select2-selection {
    width: 300px;
}
#topic-tabs_container div#info input[type="text"] {
    width: 289px;
}

/* ==========================================================================
 USERS
========================================================================== */
form[action="users.php"] table.list, #ticketTable {
    margin: 2px 0 0 0;
}
form[action="users.php"] table.list th:first-child {
	width: 4%;
}
form[action="users.php"] table.list th:nth-child(2) {
	width: calc(100% - 4% - 45%);
}
form[action="users.php"] table.list th:nth-child(3),
form[action="users.php"] table.list th:nth-child(4),
form[action="users.php"] table.list th:nth-child(5) {
	width: 15%;
}
form[action="users.php"] table.list td:nth-child(2) a {
	font-size: 14px;
}
#content.users form#users-list td i.icon-fixed-width.icon-file-text-alt {
    font-size: 17px;
    float: right;
    padding-right: 30px;
}

/* ==========================================================================
 ORGANIZATIONS
========================================================================== */
form[action="orgs.php"] table.list, #ticketTable {
    margin: 2px 0 0 0;
}
form[action="orgs.php"] table.list th:first-child {
	width: 4%;
}
form[action="orgs.php"] table.list th:nth-child(2) {
	width: calc(100% - 4% - 45%);
}
form[action="orgs.php"] table.list th:nth-child(3),
form[action="orgs.php"] table.list th:nth-child(4),
form[action="orgs.php"] table.list th:nth-child(5) {
	width: 15%;
}
form[action="orgs.php"] table.list td:nth-child(2) a {
	font-size: 14px;
}
.users a[href="#users/112/edit"] {
    color: #128dbe;
    font-weight: 500;
    font-size: 15px;
    top: 2px !important;
}
div#orgprofile_container .hidden th {
    padding-top: 25px;
}
#orgprofile_container td {
    height: 42px !important;
}
.orgs-page table.list td:nth-child(2) {
    font-size: 14px;
    padding: 10px 0;
}
.orgs #tickets table.list th:first-child {
    background-image: none;
    width: 10% !important;
}
.orgs #tickets form[action="users.php"] table.list th:nth-child(2) {
    width: 18%;
}
.orgs #tickets form[action="users.php"] table.list th:nth-child(3) {
    width: 8%;
}
.orgs #tickets form[action="users.php"] table.list th:nth-child(4), 
.orgs #tickets form[action="users.php"] table.list th:nth-child(5) {
    width: 30%;
}
.orgs #tickets form[action="users.php"] table.list td:nth-child(3) {
	font-size: 14px;
	padding: 0;
}
.orgs-page td.user-count-hide {
    font-size: 0;
}
.orgs-page td.user-count-hide:after {
    background: initial !important;
}

/* ==========================================================================
 PAGES
========================================================================== */
form[action="pages.php"] table.list th:first-child {
	width: 4%;
}
form[action="pages.php"] table.list th:nth-child(2) {
    width: 40%;
}
form[action="pages.php"] table.list th:nth-child(3),
form[action="pages.php"] table.list th:nth-child(4),
form[action="pages.php"] table.list th:nth-child(5),
form[action="pages.php"] table.list th:nth-child(6) {
	width: 14%;
}
.pages form[action="pages.php"] table.list tbody tr td:nth-child(2) {
    padding-left: 10px !important;
    font-size: 0 !important;
}
form[action="pages.php"] table.list td:nth-child(6) {
	/* font-size: 12px; */
}
.pages .tab_content {
    margin-bottom: 10px;
}
.pages table.form_table.fixed input[type="text"] {
    width: 308px !important;
}
/* ==========================================================================
 PLUGINS
========================================================================== */
.plugins .centered {
    margin: 40px 0;
}
.plugins .button.action-button[type=submit]:hover {
    color: white;
    box-shadow: initial;
	border: .5px solid rgb(68, 162, 208) !important;
    background-color: rgb(68, 162, 208);
}
.plugins div.section-break {
    font-size: 100%;
}
.plugins tfoot tr {
    height: 43px;
}
.plugins-page table.list tbody td:first-child {
    padding: 0 30px;
    width: 82px;
}
.plugins-page table.list tbody td:nth-child(2) {
    padding: 0 10px;
}
.plugins-page button.button.action-button {
    background: #fff;
    font-size: 13px;
}
.plugins table.list tbody tr td:nth-child(2) {
    font-size: 14px !important;
    padding: 30px 34px 30px 0 !important;
}
.plugins table.list tbody tr td:nth-child(2) strong {
    font-size: 18px;
    font-weight: 500;
    padding-bottom: 12px;
    display: inline-block;
}
.plugins-page form[action="plugins.php"] table.list tbody td:nth-child(2) a {
    font-size: 15px;
    color: #227b9e;
}
.plugins-page form[action="plugins.php"] table.list tbody td:nth-child(2) {
	background-repeat: no-repeat;
    background-position: left center;
    background-size: 28px;
    padding-left: 41px !important;
background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg version='1.1' id='svg2' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 48 48' style='enable-background:new 0 0 48 48%3B' xml:space='preserve'%3E %3Cstyle type='text/css'%3E .st0%7Bfill:%23F9F9F9%3B%7D .st1%7Bfill:%23ECECEC%3B%7D .st2%7Bfill:%23CCCCCC%3B%7D .st3%7Bfill:none%3Bstroke:%234D4D4D%3B%7D %3C/style%3E %3Csodipodi:namedview bordercolor='%23666666' borderopacity='1.0' id='base' inkscape:current-layer='layer1' inkscape:cx='27.203376' inkscape:cy='26.578528' inkscape:document-units='px' inkscape:pageopacity='0.0' inkscape:pageshadow='2' inkscape:window-height='968' inkscape:window-maximized='1' inkscape:window-width='1280' inkscape:window-x='-4' inkscape:window-y='-4' inkscape:zoom='11.313708' pagecolor='%23ffffff' showgrid='true'%3E %3Cinkscape:grid empspacing='5' enabled='true' id='grid2985' snapvisiblegridlinesonly='true' type='xygrid' visible='true'%3E %3C/inkscape:grid%3E %3C/sodipodi:namedview%3E %3Cg id='layer1' transform='translate(0%2C-1004.3622)' inkscape:groupmode='layer' inkscape:label='Layer 1'%3E %3Cg id='g3000' transform='translate(-6%2C1003)'%3E %3Cpath id='path2987' inkscape:connector-curvature='0' sodipodi:nodetypes='ccccc' class='st0' d='M30%2C2.4l-20%2C10l20%2C10l20-10 L30%2C2.4z'/%3E %3Cpath id='path2989' inkscape:connector-curvature='0' sodipodi:nodetypes='ccccc' class='st1' d='M30%2C22.4v25l20-10v-25L30%2C22.4z' /%3E %3Cpath id='path2991' inkscape:connector-curvature='0' sodipodi:nodetypes='ccccc' class='st2' d='M30%2C22.4v25l-20-10v-25L30%2C22.4z '/%3E %3Cpath id='path2993' inkscape:connector-curvature='0' class='st3' d='M30%2C2.4l-20%2C10v25l20%2C10l20-10v-25L30%2C2.4z'/%3E %3C/g%3E %3C/g%3E %3C/svg%3E ");
}
.plugins-page form[action="?"] table.list tbody td:nth-child(2) {
	padding-right: 152px !important;
    background-repeat: no-repeat;
    background-position: 97% 50%;
    background-size: 100px;
background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg version='1.1' id='svg2' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 48 48' style='enable-background:new 0 0 48 48%3B' xml:space='preserve'%3E %3Cstyle type='text/css'%3E .st0%7Bfill:%23F9F9F9%3B%7D .st1%7Bfill:%23ECECEC%3B%7D .st2%7Bfill:%23CCCCCC%3B%7D .st3%7Bfill:none%3Bstroke:%234D4D4D%3Bstroke-width:0.25%3B%7D %3C/style%3E %3Csodipodi:namedview bordercolor='%23666666' borderopacity='1.0' id='base' inkscape:current-layer='layer1' inkscape:cx='27.203376' inkscape:cy='26.578528' inkscape:document-units='px' inkscape:pageopacity='0.0' inkscape:pageshadow='2' inkscape:window-height='968' inkscape:window-maximized='1' inkscape:window-width='1280' inkscape:window-x='-4' inkscape:window-y='-4' inkscape:zoom='11.313708' pagecolor='%23ffffff' showgrid='true'%3E %3Cinkscape:grid empspacing='5' enabled='true' id='grid2985' snapvisiblegridlinesonly='true' type='xygrid' visible='true'%3E %3C/inkscape:grid%3E %3C/sodipodi:namedview%3E %3Cg id='layer1' transform='translate(0%2C-1004.3622)' inkscape:groupmode='layer' inkscape:label='Layer 1'%3E %3Cg id='g3000' transform='translate(-6%2C1003)'%3E %3Cpath id='path2987' inkscape:connector-curvature='0' sodipodi:nodetypes='ccccc' class='st0' d='M30%2C2.4l-20%2C10l20%2C10l20-10 L30%2C2.4z'/%3E %3Cpath id='path2989' inkscape:connector-curvature='0' sodipodi:nodetypes='ccccc' class='st1' d='M30%2C22.4v25l20-10v-25L30%2C22.4z' /%3E %3Cpath id='path2991' inkscape:connector-curvature='0' sodipodi:nodetypes='ccccc' class='st2' d='M30%2C22.4v25l-20-10v-25L30%2C22.4z '/%3E %3Cpath id='path2993' inkscape:connector-curvature='0' class='st3' d='M30%2C2.4l-20%2C10v25l20%2C10l20-10v-25L30%2C2.4z'/%3E %3C/g%3E %3C/g%3E %3C/svg%3E ");
}
.plugins-page form[action="plugins.php"] table.list tbody tr.item-disabled td:nth-child(2) {
    opacity: .6;
}
.plugins-page form[action="plugins.php"] table.list tbody tr.item-disabled:hover td:nth-child(2),
.plugins-page form[action="plugins.php"] table.list tbody tr.item-disabled.highlight td:nth-child(2),
.plugins-page form[action="plugins.php"] table.list tbody tr.item-disabled:nth-child(2n+1):hover td:nth-child(2) {
    opacity: 1;
}

/* ==========================================================================
 ROLES
========================================================================== */
form[action="roles.php"] table.list, #ticketTable {
    margin: 8px 0 0 0;
}
form[action="roles.php"] table.list th:first-child {
	width: 4%;
}
form[action="roles.php"] table.list th:nth-child(2) {
	width: calc(100% - 4% - 45%);
}
form[action="roles.php"] table.list th:nth-child(3),
form[action="roles.php"] table.list th:nth-child(4),
form[action="roles.php"] table.list th:nth-child(5) {
	width: 15%;
}
form[action="roles.php"] table.list tbody td {
	padding-left: 0;
}
form[action="roles.php"] table.list td:first-child {
	padding-left: 10px;	
}
form[action="roles.php"] table.list td:nth-child(2) a {
	font-size: 14px;
}
.roles-page a[href="#permissions"]:before {
	display: none;
}
/* ==========================================================================
 SERVICE LEVEL AGREEMENTS
========================================================================== */
form[action="slas.php"] table.list th:first-child {
	width: 4%;
}
form[action="slas.php"] table.list th:nth-child(2) {
	width: calc(100% - 4% - 60%);
}
form[action="slas.php"] table.list th:nth-child(3),
form[action="slas.php"] table.list th:nth-child(4),
form[action="slas.php"] table.list th:nth-child(5),
form[action="slas.php"] table.list th:nth-child(6) {
	width: 15%;
}
td[style="text-align:right;padding-right:35px;"] {
    padding-right: 0;
    text-align: initial !important;
}
.staff-side.slas-page table.form_table input[type="text"] {
    width: 294px;
}

/* ==========================================================================
 STAFF MEMBERS (AGENTS)
========================================================================== */
form[action="staff.php"] table.list, #ticketTable {
    margin: 6px 0 0 0;
}
form[action="staff.php"] table.list th:first-child {
    width: 40px !important;
}
form[action="staff.php"] table.list th:nth-child(2) {
	width: calc(100% - (14% * 5) - 40px);
}
form[action="staff.php"] table.list th:nth-child(3),
form[action="staff.php"] table.list th:nth-child(4),
form[action="staff.php"] table.list th:nth-child(5),
form[action="staff.php"] table.list th:nth-child(6),
form[action="staff.php"] table.list th:nth-child(7) {
	width: 14%;
}
.staff-page table.list tbody td:nth-child(3) {
    font-size: 14px !important;
}
.staff table.list + div {
    margin: 0 0 40px 0;
}
form[action="staff.php"] table.list td:nth-child(2) a {
	font-size: 14px;
}
.staff #basic_search {
    background: rgba(0, 0, 0, 0.10196078431372549);	
    margin: -10px 0 4px 0;
    display: inline-block;
    padding: 4px 4px 2px 8px;
    height: 42px;
    width: 99%;
}
.staff i.icon-search {
    background-position: 1px -3px;
}
.staff div[style="min-height:25px;"] {
    float: left;
}
.staff .pull-left {
    margin: 5px 0 0 0;
}
.staff-page .select2.select2-container.select2-container--default ~ .select2.select2-container.select2-container--default {
	margin-top: 0;
}

/* ==========================================================================
 SYSTEM LOGS
========================================================================== */
form[action="logs.php"] table.list th:first-child {
	width: 4% !important;
}
form[action="logs.php"] table.list th:nth-child(2) {
	width: 58%;
}

form[action="logs.php"] table.list th:nth-child(4) {
	width: 15%;
}
form[action="logs.php"] table.list th:nth-child(3),
form[action="logs.php"] table.list th:nth-child(5) {
	width: 12%;
}
form[action="logs.php"],
form[action="audits.php"],
form[action="banlist.php"] {
    display: inline-block;
    width: 100%;
}
.banlist .sticky.bar .content,
#system-logs .sticky.bar .content {
    margin: 18px 0 0 0;
    width: 100% !important;
}
form[action="logs.php"] select[name="type"] {
    width: 70px;
}
form[action="logs.php"] input[type="submit"],
form[action="audits.php"] input[type="submit"] {
    margin: 0 !important;
    padding: 4px 8px !important;
    min-width: initial;
    vertical-align: initial;
    position: relative;
    top: -1px;
}
form[action="logs.php"] div[style="margin-bottom:20px; padding-top:5px;"] {
    margin: 17px 0 0 0!important;
}
.logs #basic_search,
.audits #basic_search {
    background: rgba(0, 0, 0, 0.10196078431372549);	
    height: 35px;
}
form[action="logs.php"] .flush-left h2 {
    position: relative;
    top: -7px;
}
form[action="logs.php"] table.list tbody td,
form[action="audits.php"] table.list tbody td {
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
form[action="logs.php"] table.list tbody td a {
    font-size: 14px;
}
.logs-page #actions {
    margin: 0 0 5px 0;
}
.logs-page .pull-left.flush-left {
    margin-top: 10px;
}

/* ==========================================================================
 AUDIT LOGS (PLUGIN)
========================================================================== */
.audits select[name="type"],
.audits select[name="state"] {
    min-width: 140px !important;
    width: 140px !important;
}
form[action="audits.php"] .content {
    margin-top: 10px !important;
}
form[action="audits.php"] .pull-right {
    margin-bottom: 15px;
}
table#dashboard-audit th:first-child {
    width: unset !important;
}
.audits-page #footer,
.audits-page #autocron {
    display: none;
}

/* ==========================================================================
 TASKS
========================================================================== */
form[action="tasks.php"] table.list th:first-child {
	width: 4% !important;
}
form[action="tasks.php"] table.list th:first-child {
    background-position: 20px;
}
form[action="tasks.php"] td:nth-child(2) {
    padding: 0 0 0 10px !important;
}
form[action="tasks.php"] td:nth-child(3) {
    text-align: left !important;
    padding: 0 0 0 10px !important;
}
form[action="tasks.php"] table.list tbody tr.highlight td { /* highlight row borders acting weird */
    border-top: unset !important;
    border-bottom: unset !important;
    background-color: #ddd;
}
.tasks-page #content .pull-right .action-button.muted {

}
#add-task-mobile {
    display: none;
}
#task_response_options {
    margin-top: 20px;
}
form[action="tasks.php"] table.list, #ticketTable {
    margin: 0 0 0 0;
}
form[action="tasks.php"] table.list th:first-child {
	width: 4%;
}
form[action="tasks.php"] table.list th:nth-child(2) {
	width: 8%;
}
form[action="tasks.php"] table.list th:nth-child(3) {
	width: 8%;
}
form[action="tasks.php"] table.list th:nth-child(4) {
	width: 14%;
}
form[action="tasks.php"] table.list th:nth-child(5) {
	width: 34%;
}
form[action="tasks.php"] table.list th:nth-child(6) {
	width: 14%;
}
form[action="tasks.php"] table.list th:nth-child(7) {
	width: 18%;
}
form[action="tasks.php"] table.list th:nth-child(2) a {
    font-weight: 600;
}
form[action="tasks.php"] table.list td:nth-child(2) a {
    font-weight: 600;
    margin: 10px 0 10px 10px;	
}
form[action="tasks.php"] table.list td:nth-child(4) {
    padding: 10px 0 10px 10px;
    text-align: left;	
}
form[action="tasks.php"] table.list td:nth-child(4) a {
    padding: 0 10px 0 0;		
    font-size: 14px !important;
}
form[action="tasks.php"] table.list td:nth-child(4) div.wrap {
    float: left;
    max-width: 79%;
}
form[action="tasks.php"] table.list td:nth-child(4) .tasks-icons {
    float: right;
    height: 18px;
}
form[action="tasks.php"] table.list td:nth-child(4) .tasks-icons small {
    font-size: 12px !important;
    margin-right: 3px;
}
form[action="tasks.php"] table.list td:nth-child(5) {
    font-size: 14px;
}
form[action="tasks.php"] table.list i.icon-fixed-width.icon-comments-alt {
    width: 15px;
}
form[action="tasks.php"] table.list .wrap {
    float: left;
}
form[action="tasks.php"] table.list .tasks-icons {
    float: right;
}
form[action="tasks.php"] table.list i.icon-comments-alt {
    top: 4px;
}
#task_content a.preview {
    float: none;
}
#task_content .pull-left.flush-left a.preview {
    float: none;
    border: 1px solid #128dbe;
    line-height: initial;
    top: -1px;
    font-size: 15px;
    padding: 2px 6px;
    position: relative;
    background: #00000003;
    border-radius: 2px;
    margin: 0 0 0 3px;
}
#task_content .sticky.bar.fixed .pull-left.flush-left a.preview {
    color: var(--header-title);
    border-color: var(--header-title);
}
#tasks table.list th:first-child {
    width: 4% !important;
}
#tasks_content table.list tbody td {
    padding-left: 0;
}
#tasks_content table.list tbody td:first-child {
    padding-left: 14px;
}
@media screen and (min-width: 761px) {
	.tasks-page #content div[style="margin-bottom:20px; padding-top:5px;"] {
		margin: -21px 0 0 0 !important;
	}

}

/* ==========================================================================
 TEAMS
========================================================================== */
form[action="teams.php"] table.list, #ticketTable {
    margin: 8px 0 0 0;
}
form[action="teams.php"] table.list th:first-child {
	width: 4%;
}
form[action="teams.php"] table.list th:nth-child(2) {
	width: calc(100% - (12% * 5) - 4%);
}
form[action="teams.php"] table.list th:nth-child(3),
form[action="teams.php"] table.list th:nth-child(4),
form[action="teams.php"] table.list th:nth-child(5),
form[action="teams.php"] table.list th:nth-child(6),
form[action="teams.php"] table.list th:nth-child(7) {
	width: 12%;
}
form[action="teams.php"] table.list td:nth-child(2) {
	font-size: 14px;
}
.teams-page #team input[type="text"] {
    width: 292px;
}
.teams-page #add_member .select2-container {
    width: 300px !important;
}
.teams-page #add_member button.action-button {
    padding: 4px 16px;
}
.teams-page i.icon-trash {
    top: -3px;
}

/* ==========================================================================
 TEMPLATES
========================================================================== */
form[action="templates.php"] table.list, #ticketTable {
    margin: 8px 0 0 0;
}
form[action="templates.php"] table.list th:first-child {
	width: 4%;
}
form[action="templates.php"] table.list th:nth-child(2) {
	width: calc(100% - 60% - 4%);
}
form[action="templates.php"] table.list th:nth-child(3),
form[action="templates.php"] table.list th:nth-child(4),
form[action="templates.php"] table.list th:nth-child(5),
form[action="templates.php"] table.list th:nth-child(6) {
	width: 15%;
}
form[action="templates.php"] table.list td:nth-child(2) {
	font-size: 14px;
}
.templates i.icon-tags {
    position: relative;
    top: -2px;
}

/* ==========================================================================
 FLAGS
========================================================================== */
.rtl #languages {
    float: left;
}
#languages svg { /* remove */
	width: 24px;
    height: 24px;
	display: none;	
}
#languages:hover {
    cursor: pointer;
}
.pages-page ul#translations .flag, 
.forms-page ul#translations .flag { /* Manage > Forms */
    margin: 0px auto;
    position: relative;
    top: 6px;
}
.pages-page ul#translations li,
.forms-page ul#translations li { /* Manage > Forms */
    border: 1px solid #00000038 !important;
    border-radius: 2px;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    text-align: center;
    position: initial !important;
    margin: 0 0 4px 0 !important;
	background: #00000012;	
}
.pages-page ul#translations li.active,
.forms-page ul#translations li.active {
    background: #b6c5ce;
    border: 1px solid #747476 !important;
}
.pages-page ul#translations li.empty,
.forms-page ul#translations li.empty { /* Manage > Forms */
    position: initial !important;
    margin: 0 !important;
}
.forms-page input.translatable + .flag {
    margin: 0 0 -3px 0;
}
.forms-page li[style="display: list-item;"] .flag {
    margin: 0 0 -4px 0;
}
.forms-page .translations .close {
    right: 11px;
    top: 0;
}

.system .arab,
.flag.flag-arab,
html[lang="ar"] #languages {
    background: url(../../osta/svg/flags/palestine.svg) no-repeat;
}
.system .ar,
.flag.flag-ar {
    background: url(../../osta/svg/flags/argentina.svg) no-repeat;
}
.system .az,
.flag.flag-az,
html[lang="az"] #languages {
    background: url(../../osta/svg/flags/azerbaijan.svg) no-repeat;
}
.system .bg,
.flag.flag-bg,
html[lang="bg"] #languages {
    background: url(../../osta/svg/flags/bulgaria.svg) no-repeat;
}
.system .bn,
.flag.flag-bn,
html[lang="bn"] #languages {
    background: url(../../osta/svg/flags/bangladesh.svg) no-repeat;
}
.system .bs,
.flag.flag-bs,
html[lang="bs"] #languages {
    background: url(../../osta/svg/flags/bosnia.svg) no-repeat;
}
.system .ca,
.flag.flag-catalonia,
html[lang="ca"] #languages {
    background: url(../../osta/svg/flags/catalan.svg) no-repeat;
}
.system .cs,
.flag.flag-cz,
html[lang="cs"] #languages {
    background: url(../../osta/svg/flags/czech-republic.svg) no-repeat;
}
.system .da,
.flag.flag-dk,
html[lang="da"] #languages {
    background: url(../../osta/svg/flags/denmark.svg) no-repeat;
}
.system .de,
.flag.flag-de,
html[lang="de"] #languages {
    background: url(../../osta/svg/flags/germany.svg) no-repeat;
}
.system .el,
.flag.flag-gr,
html[lang="el"] #languages {
    background: url(../../osta/svg/flags/greece.svg) no-repeat;
}
.system .en_CAD,
.flag.flag-cad,
html[lang="en_CAD"] #languages {
    background: url(../../osta/svg/flags/canada.svg) no-repeat;
}
.system .en_GB,
.flag.flag-gb,
html[lang="en_GB"] #languages {
    background: url(../../osta/svg/flags/united-kingdom.svg) no-repeat;
}
.system .en_US,
.flag.flag-us,
html[lang="en_US"] #languages {
    background: url(../../osta/svg/flags/united-states.svg) no-repeat;
}
.system .es_AR,
.flag.flag-ar,
.flag.flag-arg, /*hmmm*/
html[lang="es_AR"] #languages {
    background: url(../../osta/svg/flags/argentina.svg) no-repeat;
}
.system .es_ES,
.flag.flag-es,
html[lang="es_ES"] #languages {
    background: url(../../osta/svg/flags/spain.svg) no-repeat;
}
.system .es_MX,
.flag.flag-mx,
html[lang="mx"] #languages {
    background: url(../../osta/svg/flags/mexico.svg) no-repeat;
}
.system .et,
.flag.flag-et,
html[lang="et"] #languages {
    background: url(../../osta/svg/flags/estonia.svg) no-repeat;
}
.system .eu,
.flag.flag-eu,
html[lang="eu"] #languages {
    background: url(../../osta/svg/flags/basque.svg) no-repeat;
}
.system .fa,
.flag.flag-ir,
html[lang="fa_IR"] #languages {
    background: url(../../osta/svg/flags/iran.svg) no-repeat;
}
.system .fi,
.flag.flag-fi,
html[lang="fi"] #languages {
    background: url(../../osta/svg/flags/finland.svg) no-repeat;
}
.system .fr,
.flag.flag-fr,
html[lang="fr"] #languages {
    background: url(../../osta/svg/flags/france.svg) no-repeat;
}
.system .gl,
.flag.flag-gl,
html[lang="gl"] #languages {
    background: url(../../osta/svg/flags/galician.svg) no-repeat;
}
.system .he,
.flag.flag-il,
html[lang="he"] #languages {
    background: url(../../osta/svg/flags/israel.svg) no-repeat;
}
.system .hi,
.flag.flag-hi,
html[lang="hi"] #languages {
    background: url(../../osta/svg/flags/india.svg) no-repeat;
}
.system .hr,
.flag.flag-hr,
html[lang="hr"] #languages {
    background: url(../../osta/svg/flags/croatia.svg) no-repeat;
}
.system .hu,
.flag.flag-hu,
html[lang="hu"] #languages {
    background: url(../../osta/svg/flags/hungary.svg) no-repeat;
}
.system .id,
.flag.flag-id,
html[lang="id"] #languages {
    background: url(../../osta/svg/flags/indonesia.svg) no-repeat;
}
.system .is,
.flag.flag-is,
html[lang="is"] #languages {
    background: url(../../osta/svg/flags/iceland.svg) no-repeat;
}
.system .it,
.flag.flag-it,
html[lang="it"] #languages {
    background: url(../../osta/svg/flags/italy.svg) no-repeat;
}
.system .ja,
.flag.flag-jp,
html[lang="ja"] #languages {
    background: url(../../osta/svg/flags/japan.svg) no-repeat;
}
.system .ka,
.flag.flag-ge,
html[lang="ka"] #languages {
    background: url(../../osta/svg/flags/georgia.svg) no-repeat;
}
.system .ke,
.flag.flag-ke,
html[lang="ke"] #languages {
    background: url(../../osta/svg/flags/kenya.svg) no-repeat;
}
.system .km,
.flag.flag-km,
html[lang="km"] #languages {
    background: url(../../osta/svg/flags/cambodia.svg) no-repeat;
}
.system .ko,
.flag.flag-ko,
html[lang="ko"] #languages {
    background: url(../../osta/svg/flags/south-korea.svg) no-repeat;
}
.system .lt,
.flag.flag-lt,
html[lang="lt"] #languages {
    background: url(../../osta/svg/flags/lithuania.svg) no-repeat;
}
.system .lv,
.flag.flag-lv,
html[lang="lv"] #languages {
    background: url(../../osta/svg/flags/latvia.svg) no-repeat;
}
.system .mk,
.flag.flag-mk,
html[lang="mk"] #languages {
    background: url(../../osta/svg/flags/macedonia.svg) no-repeat;
}
.system .mn,
.flag.flag-mn,
html[lang="mn"] #languages {
    background: url(../../osta/svg/flags/mongolia.svg) no-repeat;
}
.system .ms,
.flag.flag-ms,
html[lang="ms"] #languages {
    background: url(../../osta/svg/flags/malasya.svg) no-repeat;
}
.system .nl,
.flag.flag-nl,
html[lang="nl"] #languages {
    background: url(../../osta/svg/flags/netherlands.svg) no-repeat;
}
.system .no,
.flag.flag-no,
html[lang="no"] #languages {
    background: url(../../osta/svg/flags/norway.svg) no-repeat;
}
.system .pl,
.flag.flag-pl,
html[lang="pl"] #languages {
    background: url(../../osta/svg/flags/poland.svg) no-repeat;
}
.system .pt_BR,
.flag.flag-br,
html[lang="pt_BR"] #languages {
    background: url(../../osta/svg/flags/brazil.svg) no-repeat;
}
.system .pt_PT,
.flag.flag-pt,
html[lang="pt_PT"] #languages {
    background: url(../../osta/svg/flags/portugal.svg) no-repeat;
}
.system .ro,
.flag.flag-ro,
html[lang="ro"] #languages {
    background: url(../../osta/svg/flags/romania.svg) no-repeat;
}
.system .ru,
.flag.flag-ru,
html[lang="ru"] #languages {
    background: url(../../osta/svg/flags/russia.svg) no-repeat;
}
.system .sk,
.flag.flag-sk,
html[lang="sk"] #languages {
    background: url(../../osta/svg/flags/slovakia.svg) no-repeat;
}
.system .sl,
.flag.flag-si,
html[lang="sl"] #languages {
    background: url(../../osta/svg/flags/slovenia.svg) no-repeat;
}
.system .sq,
.flag.flag-sq,
html[lang="sq"] #languages {
    background: url(../../osta/svg/flags/albania.svg) no-repeat;
}
/* Serbian (Cyrillic) */
.system .sr,
.flag.flag-rs,
html[lang="sr"] #languages {
    background: url(../../osta/svg/flags/serbia.svg) no-repeat;
}
/* Serbian (Српски (Србија)) */
.system .sr_CS,
.flag.flag-rs,
.flag.flag-cs,
html[lang="sr-CS"] #languages {
    background: url(../../osta/svg/flags/serbia.svg) no-repeat;
}
.system .sv_SE,
.flag.flag-se,
html[lang="sv_SE"] #languages {
    background: url(../../osta/svg/flags/sweden.svg) no-repeat;
}
.system .sw,
.flag.flag-sw,
html[lang="sw"] #languages {
    background: url(../../osta/svg/flags/kenya.svg) no-repeat;
}
.system .th,
.flag.flag-th,
html[lang="th"] #languages {
    background: url(../../osta/svg/flags/thailand.svg) no-repeat;
}
.system .tr,
.flag.flag-tr,
html[lang="tr"] #languages {
    background: url(../../osta/svg/flags/turkey.svg) no-repeat;
}
.system .uk,
.flag.flag-ua,
html[lang="uk"] #languages {
    background: url(../../osta/svg/flags/ukraine.svg) no-repeat;
}
.system .ur_IN,
.flag.flag-in,
html[lang="ur_IN"] #languages {
    background: url(../../osta/svg/flags/india.svg) no-repeat;
}
.system .ur_PK,
.flag.flag-pk,
html[lang="ur_PK"] #languages {
    background: url(../../osta/svg/flags/pakistan.svg) no-repeat;
}
.system .vi,
.flag.flag-vi,
html[lang="vi"] #languages {
    background: url(../../osta/svg/flags/vietnam.svg) no-repeat;
}
.system .zh_CN,
.flag.flag-cn,
html[lang="zh_CN"] #languages {
    background: url(../../osta/svg/flags/china.svg) no-repeat;
}
.system .zh_TW,
.flag.flag-tw,
html[lang="zh_TW"] #languages {
    background: url(../../osta/svg/flags/taiwan.svg) no-repeat;
}
.system .ps,
.flag.flag-ps,
html[lang="ps"] #languages  {
    background: url(../../osta/svg/flags/afghanistan.svg) no-repeat;
}

@media screen and (min-width: 600px) and (max-width: 622px) {
	.flag.flag-mn { /* Oops ran out of room sorry Mongolia you have to go */
		display: none;
	}
}
#trans .flag,
#translations .flag {
    background-size: 20px;
    width: 22px;
    height: 16px;
    background-position: center -2px;
    background-color: #b0b0b0;
    border-radius: 3px;
}
#translations i.icon-globe {
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    top: 1px !important;
}
#translations li:not(.active) {
    border-bottom: 7px solid #fff;
}
#translations .icon-globe:before {
    content: "\f0ac";
    font-size: 22px;
}
.pages-page ul#translations li.empty i.icon-globe:before,
.forms-page ul#translations li.empty i.icon-globe:before {
    font-size: 19px !important;
}
ul.tabs.alt li:hover {
    border-bottom: 2px solid var(--nav-bar-bg);
}
.accordion-hide{display:none!important}.accordion-show-block,.accordion-show{display:block!important}.accordion-show-inline-block{display:inline-block!important}
button.accord {
    margin: 0 0 0 6px;	
    padding: initial;
    background: initial;
    border: initial;	
}
button.accord .icon-question-sign:before {
    width: 25px;
    top: 7px;
}
button.accord:hover > .icon-question-sign:before {
    width: 25px;
    top: 7px;
}
div#lang-choices {
	background: #0000000d;
    margin: 0 0 20px 0;
    padding: 20px;
    width: fit-content;
}
div#header-constrain {
    max-width: 1264px;
    margin: 0 auto;
}
div#sub_nav-wrap {
    background: var(--nav-bar-bg);
    border: 0;
    margin: 60px 0 0 0;
    padding: 0;
    height: 24px;
    line-height: 23px;
}
/* .tickets-page #sub_nav {
    margin: 0 auto;
} */
.jb-overflowmenu {
    position: initial;
	width: initial; /*reset*/
    max-width: 960px;
}
.jb-overflowmenu .jb-overflowmenu-menu-primary {
    padding: 0;
    margin: 2px 0 0 0;
    height: 27px !important;
}
.jb-overflowmenu-menu-primary div.customQ-dropdown {
	top: 28px;
}
.jb-overflowmenu-menu-primary div.customQ-dropdown {
    border: solid .5px rgba(0, 0, 0, 0.2);
    border-top: initial;
    background: var(--nav-bar-bg);
    left: -11px;
    top: 26px; 
}
ul.subMenuQ {
    background: var(--nav-bar-bg) !important;
}
#customQ_nav .jb-overflowmenu-menu-primary li.item a > i {
    margin-top: 1px;
}
#customQ_nav .jb-overflowmenu-menu-primary li.item {
    padding: 0;
    margin: 0;
}
#customQ_nav .jb-overflowmenu-menu-primary li.item:hover {
    padding: 0;
    background-color: inherit;
    border-left: initial;
    border-top: initial;
    border-right: initial;
}
ul#sub_nav .icon-sort-down:before {
    color: var(--nav-bar-link);
    font-size: 12px;
}
#sub_nav > li > a, 
#sub_nav > li + li > a,
#customQ_nav .jb-overflowmenu-menu-primary li.item > a {
    color: var(--nav-bar-link) !important;
}
#sub_nav > li > a:hover, 
#sub_nav > li + li > a:hover,
#customQ_nav .jb-overflowmenu-menu-primary li.item:hover > a,
#customQ_nav .jb-overflowmenu-menu-primary li.item > a:hover {
    color: var(--nav-bar-link-hover) !important;
}
.customQ-dropdown ul li > span.newItemQ {
    padding: 0;
    margin: 0 8px 0 0;
}
.customQ-dropdown li.personalQ {
    border-bottom: 1px dashed var(--header-title);
    background-color: initial;
    margin: 4px 0;
}
.customQ-dropdown li:not(.personalQ) > span {
    color: var(--header-title);
    font-weight: initial;
}
.customQ-dropdown ul li:not(.personalQ):hover {
    color: var(--header-title);
    background-color: var(--header-bg);
}
.customQ-dropdown ul li:not(.personalQ):hover > a.truncate {
    color: var(--header-title) !important;
}
.customQ-dropdown ul.scroll-height {
    border-bottom: solid .5px rgba(0, 0, 0, 0.2);
}
.customQ-dropdown .add-queue a span {
    color: var(--nav-bar-link);
	opacity: .8;
}
.customQ-dropdown .add-queue a:hover span {
    color: var(--header-title) !important;
	opacity: 1;
}
.customQ-dropdown .add-queue a:hover {
    background-color: var(--header-bg);
}
.customQ-dropdown li h4, .customQ-dropdown li.top-level {
    margin: 8px 0 0 3px;
    background-color: initial;
    color: var(--nav-bar-link);
    text-align: left;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
}
#nav.pull-right svg {
    content: "";
    position: relative;
    top: 4px;
	width: 18px !important;
    height: 18px !important;
    fill: var(--header-title);
    display: inline-block;
}	
#nav.pull-right a#dark-mode-link svg {
    top: 2px !important;
    width: 14px !important;
    height: 14px !important;
}
a#profile-link {
    margin-left: 8px !important;
}

/* Dark Mode switch nav icon between day and night? */
svg#night-mode-svg {
	display: none !important;
}
svg#day-mode-svg {
    display: inline-block !important;
}
.dark-mode svg#day-mode-svg {
    display: none !important;
}
.dark-mode svg#night-mode-svg {
    display: inline-block !important;
}
.dark-mode svg#night-mode-svg {
    width: 17px !important;
    height: 17px !important;
    top: 2px;
}

@media screen and (max-width: 900px) {
	#header #nav a[href*="/profile.php"] {
		font-size: 0;
		/* background-color: #000; */
		width: 14px;
		display: inline-block;
	}
	#header #nav a[href*="/profile.php"] svg {
		display: inline-block;	
		fill: var(--header-title);
		width: 18px !important;
		height: 18px !important;
		content: "";
		position: relative;
		top: 4px;
		margin: 0 2px 0 -4px;
	}
	#header a {
		font-size: 12px;
	}
}
@media screen and (max-width: 1100px) {
	html[lang="el"] #header a {
		font-size: 12px;
	}
}
li.annotations {
    display: none !important;
}
.subject-bold {
    display: inline-block;
    margin: 0 0 0 -8px;
    padding-right: 4px;
    font-size: 14px;
    color: #848484;
}
.osta_subject .pull-left {
    width: 0;
}
.osta.show.overdueTicket-container {
    margin: 0 0 0 -25px;
}
.rtl .osta.show.overdueTicket-container {
    margin: 0 -25px 0 0;
}
.osta_subject small.faded-more {
    font-size: 12px;
    color: #8a8a8a;
    position: relative;
    top: 1px;
}
.faded-more i.icon-comments-alt {
    float: right;
    right: 0;
    margin: 0 0 0 3px;
}
.subject-bold {
    display: inline-block;
    margin: 0 0 0 -8px;
    padding-right: 4px;
    font-size: 14px;
    color: #8e8e8e;
    /* font-family: 'Open Sans', sans-serif; */
    font-family: "Lato", "Helvetica Neue", arial, helvetica, sans-serif;
}
.list .paperclip {
    float: right;
}
i.small.icon-paperclip.icon-flip-horizontal {
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    top: 0;
    float: right;
    margin: 0 8px 0 0;
}
.selected-signature .inner {
    opacity: 1 !important;
}
/* */
/* add to Theme Options */
/* */
/* ON/OFF Switch */
input.switch:empty {
    visibility: hidden;
}
input.switch:empty ~ label {
	position: relative;
	float: left;
    line-height: 3em;
	text-indent: 4em;
	margin: 0.2em 0;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	height: 2em;
}
input.switch:empty ~ label:before,
input.switch:empty ~ label:after {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    content: '\2718';
    text-indent: 2.4em;
    color: #aaa;
    background-color: #aaa;
    width: 4em;
    height: 2em;
    border-radius: 4em;
}
input.switch:empty ~ label:before {
    box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.2), inset -1px 1px 5px rgba(0, 0, 0, 0.2);
}
input.switch:empty ~ label:after {
    content: ' ';
    background: #f2f2f2;
    width: 1.8em;
    height: 1.8em;
    border-radius: 1.8em;
    top: 0.1em;
    left: 0.2em;
	box-shadow: inset 0 -0.1em 0 rgba(0,0,0,0.1);
	-webkit-transition: all 100ms ease-in;
	transition: all 100ms ease-in;
}
/* toggle on */
input.switch:checked ~ label:before {
	content: '';
	background-color: #69bd48;
}
input.switch:checked ~ label:after {
    margin-left: 1.91em;
}
/* focus styles */
input.switch:focus ~ label {
	color: #000;
}
input.switch:focus ~ label:before {
	box-shadow: 0 0 0 1px #999;
}
.disabled {
    opacity: .5;
}
.form_table.settings_table {
    display: inline;
}
.settings-page .form_table.settings_table {
    display: block;
}
.form_table.settings_table td[colspan="2"] {
    padding: 0;
}
select[name="acl_backend"] {
    min-width: 140px !important;
}
input[name="autolock_minutes"] {
    min-width: 44px !important;
}
.settings-page .form_table.settings_table .action-button.pull-right {
    padding: 4px 10px !important;
}

/*

BACKDROPS

*/
#system-backdrops-options {
    width: calc(100% - 40px) !important;
    margin: 0 auto;
}
#system-backdrops-options td.toggles {
    width: 60px;
    padding-right: 18px !important;
}
td#spacer {
    width: auto;
}
td.options-backdrop, td.option-solid {
    font-size: 18px;
    height: 52px;
    width: 296px !important;	
}
div#system-backdrops {
    margin-bottom: -20px;
}
td.backdrop {
    padding: 0 !important;
}
.backdrop .outer {
    display: inline-block;
    position: relative;
    background: #eee;
    border: .5px solid #ddd;
	margin: 0 18px 22px 0;
}
@media screen and (min-width: 1220px) {
	#system-backdrops label:nth-child(3n+3) > div,
	#custom-backdrops .backdrop-delete-icon-container:nth-child(3n+3) {
		margin-right: 0;
	}
}
.backdrop .select {
  padding-left: 20px;
}
.backdrop .inner {
    display: inline-block;
    position: relative;
    width: 328px;
    height: 185px;
    margin: 10px;
    background-size: contain !important;
}
#one .inner {
	background-color: var(--header-bg);
    background-image: url(../../osta/img/backdrops/01.png);
}
#two .inner {
	background-color: var(--header-bg);
    background-image: url(../../osta/img/backdrops/02.png);
}
#three .inner {
	background-color: var(--header-bg);
    background-image: url(../../osta/img/backdrops/03.png);
}
#four .inner {
	background-color: var(--header-bg);
    background-image: url(../../osta/img/backdrops/04.png);
}
#five .inner {
	background-color: var(--header-bg);
    background-image: url(../../osta/img/backdrops/05.jpg);
}
#six .inner {
	background-color: var(--header-bg);
    background-image: url(../../osta/img/backdrops/06.jpg);
}
#seven .inner {
	background-color: var(--header-bg);
    background-image: url(../../osta/img/backdrops/07.jpg);
}
#eight .inner {
	background-color: var(--header-bg);
    background-image: url(../../osta/img/backdrops/08.jpg);
}
#nine .inner {
	background-color: var(--header-bg);
    background-image: url(../../osta/img/backdrops/09.jpg);
}
#ten .inner {
	background-color: var(--header-bg);
    background-image: url(../../osta/img/backdrops/10.jpg);
}
#eleven .inner {
	background-color: var(--header-bg);
    background-image: url(../../osta/img/backdrops/11.jpg);
}
#twelve .inner {
	background-color: var(--header-bg);
    background-image: url(../../osta/img/backdrops/12.jpg);
}
#custom-backdrops td {
    padding: 0;
}
.backdrop .top {
    width: 80px;
    height: 77px;
    background-color: var(--nav-bar-bg);
    background-image: url(../../osta/img/backdrops/login-box.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 80px 77px;
    margin: 0 auto;
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);  
}
.backdrop [type=radio] { 
	position: absolute;
	visibility: hidden;
}
.backdrop [type=radio] + div {
	cursor: pointer;
}
.backdrop [type=radio]:checked + div {
    outline: 1px solid #5a5a5a;
}
.checkbox-container {
    background: #000;
    z-index: 99;
    width: 50px;
}
.custom-backdrop-outer {
    display: inline-block;
    position: relative;
    background: #eee;
    border: .5px solid #ddd;
}
.custom-backdrop-inner {
    display: inline-block;
    position: relative;
    width: 337px;
    height: 190px;
    margin: 10px;
    background-size: cover;
}
.custom-backdrop-inner .top {
    width: 80px;
    height: 77px;
    background: url(../../osta/img/backdrops/login-box.png) no-repeat center center, var(--nav-bar-bg);
    background-size: 80px 77px;
    margin: 0 auto;
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
#custom-backdrops [type=radio] { 
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
#custom-backdrops [type=radio] + div {
	cursor: pointer;
}
#custom-backdrops input[type="radio"]:checked + div {
    outline: 1px solid #5a5a5a;
}
#custom-backdrops .checkbox-container {
    width: 36px;
    background: initial;
    position: relative;
    top: -67px;
    left: 310px;
    height: 49px;
}
#custom-backdrops .checkbox-container input[type="checkbox"] { 
	position: absolute;
	visibility: hidden;
}
.backdrop-delete-icon-container {
    width: 358px;
    height: 215px;
    display: inline-block;
    margin: 0 23px 20px 0;
    float: left;
}
#custom-backdrops th,
#custom-backdrop-upload {
    text-align: left;
}
#custom-backdrop-container,
#upload-backdrop-container {
    padding: 0;
}
.custom-logo-group i.icon-trash, 
#custom-backdrops i.icon-trash {
    font-size: 42px;
    width: 0;
    height: 0;
}
.custom-logo-group i.icon-trash {
    font-size: 20px;
    top: 16px;
    left: 22px;
}
.custom-logo-group i.icon-trash:before,
#custom-backdrops i.icon-trash:before {
    fill: #fff !important;
    color: #fff !important;
	width: 35px;
    height: 40px;	
}
.custom-logo-group i.icon-trash:hover::before,
#custom-backdrops i.icon-trash:hover::before {
    fill: red !important;
    color: red !important;
    text-shadow: initial;	
}
.custom-logo-group i.icon-trash:hover::before, #custom-backdrops i.icon-trash:hover::before {

}
.custom-logo-group input[type="checkbox"]:checked + i.icon-trash:before,
#custom-backdrops input[type="checkbox"]:checked + i.icon-trash:before {
    fill: red !important;
    color: red !important;
}
table[style="display: none;"] {
    display: initial !important;
    opacity: .5 !important;
    pointer-events: none;
}
table[style="display: table;"] {
	opacity: 1 !important;
}
.print-logo-upload .error {
    background: #000 !important;
}
/* Custom Text */
.indent {
    padding-left: 20px !important;
}
#row-one,
#row-two {
    width: 100%;
    overflow: hidden;
}
#row-two {
    margin: 0 0 20px 0;
}
.custom-text-container {
    float: left;
    margin: 0 80px 0 0;
}
.custom-text-input input {
    width: 198px !important;
}
.custom-color-container {
    overflow: hidden;
    width: 291px;
    float: left;
    margin: 0;
}
.custom-color-container:first-of-type {
    /* padding-left: 20px !important; */
}
.custom-color-container:last-of-type {
    padding-right: 0 !important;
    width: fit-content;
    margin: 97px 0 0 0;
}
#choose-theme-options,
#custom-theme-options {
  float: right;
}
#choose-theme-options {
    margin-top: -18px;
}
#custom {
    margin-top: 10px;
}
#custom-theme-options {
    /* width: calc(100% - 17px) !important; */
    margin: 0 auto 0 auto;
    overflow: hidden;
}
.disabled {
    opacity: .5;
    pointer-events: none;
}
#list-tabs_container .disabled {
    pointer-events: initial;
}
#osta-settings-title {
    float: left;
}
#osta-toggle {
    float: right;
}
#choose-theme-options,
#custom-theme-options {
    width: 100%;
    display: block;
}
.theme .tab_content,
.theme2 .tab_content {
    overflow: hidden;
    padding: 23px 26px 26px 26px;
}
#thank-you {
	font-size: 20px;
    margin: 30px 0 4px 0;
}
.custom-text-and-links-col1 {
    vertical-align: top;
}
.custom-text-and-links-col2 {
    vertical-align: top;
    padding-top: 34px;	
}
#ie,
#scroll,
#consent {
    float: right;
    position: relative;
    top: 4px;
}
#scroll-icon {
    width: 28px;
    height: 28px;
    float: left;
    margin: 0 9px 0 1px;
    opacity: .9;
    border-radius: 14%;
}
#scroll-top-img {
    margin-top: 10px;
}
.option-ie-redirect-url input[type="text"] {
    width: 245px;
}
div[rel="radio89"] {
    margin-top: 13px;
}
img#ie-icon {
    width: 32px;
    height: 32px;
    float: left;
    margin: 0 7px 0 0;
}
img#cookies {
    width: 30px;
    height: 30px;
    float: left;
    margin: 0 7px 0 0;
    opacity: .9;
}
.scroll-img {
    padding: 0 0 18px 0;
}
h3.osta-section-title,
.scroll-title,
.custom-text-title,
.ie-redirect-title,
.consent-message-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 6px 0;
    font-family: 'Open Sans', sans-serif;
}
label[for="radio89"],
label[for="radio77"] {
    position: relative;
    top: -3px;
}

.ie-redirect-table,
.consent-message-table {
    margin: 20px 0 50px 0;
}
.scroll-table {
    margin-top: 20px;
	margin-bottom: 50px;
}
.option-desktop-scroll,
.option-mobile-scroll {
    font-size: 18px;
}
#scroll-img-background {
    max-width: 400px !important;
    background-image: url(../img/custom-text/scroll-to-top.png) !important;
    height: 185px;
    background-repeat: no-repeat !important;
    background-position-y: 20px !important;
}
#scroll-spacer {
    height: 4px !important;
    font-size: 1px;
}
.option-desktop-scroll, 
.option-mobile-scroll {
    font-size: 15px;
}
label[for="radio98"],
label[for="radio99"] {
    transform: scale(.7);
}
.option-ie-redirect-url input[type="text"] {
    width: 97% !important;
    padding: 0 0 0 8px !important;
	border: .5px solid #bfbfbf;
}
#consent-message-label-container,
#consent-message-text-container {
    margin-top: 10px;
}
textarea[name="consent-message"] {
    width: 97%;
    height: 47px;
    border: .5px solid #bfbfbf;
}
.consent-message-button-text-input input {
	width: 33%;
    border: .5px solid #bfbfbf;	
}
#custom-text-and-links input {
    margin: 10px 0 10px 0 !important;
}
#copy-clipboard {
    padding: 10px;
    background: #f3f3f5;
    border: .5px solid #ddd;
    width: fit-content;
}
#copy-clipboard .code-green {
    color: #828282;
}
#get-support-container {
    padding-top: 14px;
}
#copy-clipboard-btn, 
a#osta-settings-support {
    margin: 10px 0;
    box-shadow: none;
    padding-top: 14px;
    padding-bottom: 14px;
    color: #6d7989;
    border: initial !important;
    background: #dcdfe2;
    letter-spacing: 1.6px;
    font-weight: 700;
    font-size: 13px;
    width: 100%;
    text-align: center;
    border-radius: 3px;
}
#copy-clipboard-btn:hover,
a#osta-settings-support:hover {
    background: #c9cdd0;
    color: #343a42;
}
.form_table.settings_table img {
    box-shadow: initial !important;
    border: .5px solid #ddd;
}
#theme-header-options .container,
#logo-options .container {
    float: left;
    margin: 10px 10px 16px 0;
    padding: 10px;
    border: 1px solid #ddd;
    width: 372px;
}
#theme-header-options .container {
    margin: 10px 10px 10px 0;
}
#theme-header-options .container {
    margin-right: 31px;
}
#theme-header-options .left,
#logo-options .left {
    width: 290px;
}
#theme-header-options .right, #logo-options .right {
    width: 36px;
    vertical-align: middle;
}
#logo-options .title {
    margin: -3px -2px 7px 2px;
}
/* Logo card images render at 34px tall (the production max-height)
   with width auto to preserve aspect ratio. Same treatment for the
   Custom Logo card preview AND each card in the Use a Custom Logo
   section. */
#theme-header-options .image img,
#logo-options .image img {
    height: 34px;
    width: auto;
    margin: 0;
    display: block;
}
/* Default-logo inline SVG gets the same 22px height treatment
   production uses (#header-default svg { height: 22px }). Without
   this the SVG with only a viewBox renders at default 300×~37px
   which is visually overbearing. */
#theme-header-options .image svg,
#logo-options .image svg {
    height: 22px;
    width: auto;
    fill: var(--header-title);
    margin: 0;
    display: block;
}
#choose-theme-options,
#custom-theme,
#custom-theme-options {
    opacity: .5;
    pointer-events: none;
}
#choose-theme-options {
    margin: 0;
}
div#choose-theme-options ul {
    margin: 0 !important;
}
#custom-theme {
    margin: 50px 0 24px;
}

/* Logo preview = a slice of the production header. Strip is 400×60
   so the logo reads in context. Padding `12px 11px` mirrors the
   production `#left-logo` margin. `overflow: hidden` clips wide
   logos that would otherwise blow out the card width. */
#theme-header-options .image,
#theme-header-options .image,
#logo-options .image {
    background: var(--header-bg);
    border: .5px solid #ddd;
    width: 400px;
    height: 60px;
    padding: 12px 11px;
    box-sizing: border-box;
    overflow: hidden;
    opacity: .5;
}
.image-inner {
    width: 300px;
    height: 34px;
    display: flex;
    align-items: center;
}
#logo-options .image {
    opacity: .9;
}
#logo-options .image:hover {
    opacity: 1 !important;
}
input[type='radio']:checked ~ .image {
    opacity: 1 !important;
}
#logo-type #custom-logo img {
    border: initial;
    height: 34px;
}
/* "See below" callout next to the Custom Logo card title — points
   the user down to the Use a Custom Logo upload section. Hidden by
   default; shown only when the Custom Logo card is the selected
   option (gets `.highlight` from the .logo-group click handler). */
#content.theme #logo-options .osta-see-below {
    display: none;
    color: #f51c00;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
}
#content.theme #logo-options #custom-logo.highlight .osta-see-below,
#content.theme #logo-options #custom-text.highlight .osta-see-below {
    display: inline-flex;
}
#content.theme #logo-options .osta-see-below svg {
    width: 14px;
    height: 14px;
    transform: rotate(180deg);
    fill: currentColor;
    position: relative;
    top: 4px;
}
#print-logo .print-logo {
	opacity: .5;	
}
.highlight #choose-theme-options,
.highlight #custom-theme,
.highlight #custom-theme-options,
.highlight #logo-options,
#print-logo.highlight .print-logo  {
    opacity: 1;
    pointer-events: auto;	
}
#print-logo:hover .print-logo {
    opacity: 1;
}
#logo-type table.container {
    opacity: .5;
    transition: opacity .2s ease;
}
#logo-type table.container.highlight {
    opacity: 1;
}
#logo-type table.container:hover {
    opacity: 1;
}
.print-logo-upload input[type="file"] {
    margin-top: 10px;
    width: 273px !important;
}
#show-image #logo-upload .title {
    margin-top: 0;
}
.print-logo {
    max-width: 279px;
    height: 368px;
    background-image: url(../../osta/img/custom-text/print-logo-preview.png);
    background-repeat: no-repeat;
	border: .5px solid #e2e2e2 !important
}
.print-logo img {
	height: 18px !important;
    width: auto !important;
    margin: 10px 0 0 10px;
}
.print-logo {
    margin: 0 0 6px 0;
}
#print-logo-placeholder #print-logo {
    margin-top: 50px;
}
.print-logo-upload {
    display: none;
	padding: 0 !important;	
}
.highlight .print-logo-upload {
    display: inline-block;
}
#default-logo.highlight,
#custom-text.highlight,
#custom-logo.highlight {
    border: 1px solid #aaa !important;
}
#default-logo.highlight .image,
#custom-text.highlight .image,
#custom-logo.highlight .image,
#logo-options.highlight .print-logo img {
  opacity: 1 !important;
}
input.switch:empty {
    opacity: 0;
    position: absolute;
    top: 22px;
}
input.switch:empty ~ label {
    position: relative;
    float: left;
    line-height: 3em;
    text-indent: 4em;
    margin: 0;
    cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
input.switch:empty ~ label:before,
input.switch:empty ~ label:after {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    content: '\2718';
    text-indent: 2.4em;
    color: #aaa;
    background-color: #aaa;
    width: 4em;
    height: 2em;
    border-radius: 4em;
}
input.switch:empty ~ label:before {
    box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.2), inset -1px 1px 5px rgba(0, 0, 0, 0.2);
}
input.switch:empty ~ label:after {
    content: '';
    background: #f2f2f2;
    width: 1.8em;
    height: 1.8em;
    border-radius: 1.8em;
    top: 0.1em;
    left: 0.2em;
	box-shadow: inset 0 -0.1em 0 rgba(0,0,0,0.1);
	-webkit-transition: all 100ms ease-in;
	transition: all 100ms ease-in;
}
/* toggle on */
input.switch:checked ~ label:before {
	content: '';
    text-indent: 0.5em;
    color: #7cbd7e;
    background-color: #7cbd7e;
}
input.switch:checked ~ label:after {
    margin-left: 1.91em;
}
/* focus styles */
input.switch:focus ~ label {
	color: #000;
}
input.switch:focus ~ label:before {
	box-shadow: 0 0 0 1px #999;
}
/* Default-logo SVG sizing handled by the rule near `.image-inner`
   (height: 22px to match production `#header-default svg`). The
   former rule here added padding:13px which inflated the SVG to
   fill the entire 60px strip — removed. */
#logo-type {
    width: 445px;
}
#logo-type #custom-logo img {
    border: initial;
}
.custom-logo-group {
    vertical-align: top;
}
.custom-logo-link a {
    font-size: 14px !important;
    white-space: nowrap;
    /* text-decoration: underline; */
    line-height: 26px;
}
#custom-logo-container {
    margin-bottom: 17px;
}
#custom-logo-container td {
    vertical-align: top;
    /* padding-top: 8px !important; */
}
.custom-logo-group img {
    box-shadow: initial !important;
    /* border: 1px solid #ddd; */
}
#show-image img {
	/* border: 1px solid #aaa !important; */
    background: var(--header-bg);
    margin: 6px;
    height: 72px;
}
#logo-upload h2 {
    margin-top: 15px;
}
#custom-text #header-text {
    width: 264px;
    margin: 11px 0 11px 0;
}
#custom-text #header-text {
    display: inline-block;
}
#theme-info {
    /* background: #FFFFFF; */
    min-height: 500px;
}
td.info-column {
    max-width: 466px;
}
#brace {
    line-height: 0;
    position: relative;
    width: 15px;
    top: 5px;
    padding: 0 25px 0 15px;
}
#brace img {
    width: 18px !important;
}
#theme-header-options {
	margin: 5px 0 10px 12px;
    display: inline-block;
}
td[style="display: none;"] {
    display: initial !important;
    opacity: .5 !important;
    pointer-events: none;
}
td[style="display: table;"] {
  opacity: 1 !important;
}

/* LOGO OPTIONS > HEADER BACKGROUND OPTIONS */
.options-header-image .container,
.options-header-color .container {
    float: left;
    margin: 10px 10px 10px 0;
    padding: 10px;
    border: 1px solid #ddd;
    width: 372px;
}
.options-header-image .title,
.options-header-color .title {
    font-size: 18px;
    margin: 0 0 20px 0;
    width: 290px;
}
input[name="selected-logo"],
input[name="selected-bundled-logo"] {
    display: none;
}
input[name="selected-logo-scp"],
input[name="selected-bundled-logo-scp"] {
	position: absolute;
    visibility: hidden;
}
input[type="radio"]:checked + div {
    outline: 1px solid #5a5a5a;
}
.checkbox-container input[type="checkbox"] {
	position: absolute;
    visibility: hidden;
}
/* Container becomes the positioning anchor for the trash label so
   image-height changes (e.g. .image img height: auto vs 34px) don't
   drag the trash icon around via the line-box natural flow. */
.logo-delete-icon-container {
    position: relative;
    display: block;
    width: fit-content;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 20px;
}
.logo-delete-icon-container .checkbox-container {
    background: initial;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.85);
}
table#custom-logo-column-inner {
    max-width: 374px;
}
td#custom-logo-column {
    float: none;
    margin: 0 0 0 20px;
    padding: 13px 0 12px 0 !important;
    border: 1px solid #ddd;
    width: 372px;
}
/* Anchor trash label to top-right area of the 400px image card.
   Adjust `top` / `left` to pixel-tune. */
.logo-delete-icon-container > label.inline.checkbox {
    position: absolute;
    top: 10px;
    right: 10px;
    left: auto;
    margin: 0;
}
/* Selected state: when any radio inside a custom-logo card is
   checked, darken the wrapper border. Mirrors the pattern used by
   the 3 upper Logo Options cards (#default-logo.highlight etc.).
   The companion `outline: none` suppresses the global
   `input[type="radio"]:checked + div { outline }` rule on .image
   so we express selected via wrapper border, not inner outline. */
.logo-delete-icon-container:has(input[type="radio"]:checked) {
    border: 1px solid #aaa !important;
}
.logo-delete-icon-container input[type="radio"]:checked + div.image {
    outline: none;
}
/* Custom Logos list: 2-column "N pattern" layout. Multicol fills
   top-to-bottom in column 1, then continues in column 2, balanced
   for any uploaded-logo count — no JS needed. Legacy <br/>
   separators between cards are hidden so they don't introduce
   blank lines inside the columns. break-inside: avoid keeps each
   card atomic. The :not(#logo-upload) scopes this to the cards
   row only, not the "Upload a new logo" row below. */
#show-image td.indent:not(#logo-upload) {
    column-count: 2;
    column-gap: 16px;
}
#show-image td.indent:not(#logo-upload) > br {
    display: none;
}
#show-image td.indent:not(#logo-upload) .logo-delete-icon-container {
    break-inside: avoid;
}
@media (max-width: 1000px) {
    #show-image td.indent:not(#logo-upload) {
        column-count: 1;
    }
}
/* Header Title + Header Subtitle dimmed until the Custom Text logo
   option is selected. Mobile Text / Mobile Link below stay full-opacity
   since they apply regardless of logo mode. */
/* Header & Mobile Text body gates on Custom Text selection. Heading
   stays at full opacity so the customer always sees the section
   exists; only the inputs/labels below dim to signal "inert until
   Custom Text is selected". */
#content.theme #osta-branding-text {
    opacity: 0.5;
    transition: opacity 200ms ease;
}
#content.theme:has(#custom-text.highlight) #osta-branding-text {
    opacity: 1;
}
#custom-logo-column .indent {
    padding: 20px 0 0 0;
}
#custom-logo-column .indent .title {
    margin: 0 0 -10px 0;
}
#thank-you img {
	width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
    top: 1px;
    margin: 0 0 0 6px;
}

/* ==========================================================================
 TABLE CHECKBOX 2019
========================================================================== */
table.list .checkbox * {
  cursor: pointer;
}
table.list p.checkbox {
/*     width: 14px;
    height: 14px; */
	margin: 0;
}
table.list.queue.tickets td:first-child {
    /* padding-left: 14px; */
}
.index-page table.list p.checkbox {
	margin: 2px 0 0 0;
}
table.list .checkbox label {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
table.list .checkbox label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 14px;
    height: 14px;
    top: -9px;
    left: -16px;
    margin-left: 0;
    border: .5px solid #aaa;
    border-radius: 3px;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.locked .checkbox label::before {
    background: url(../../osta/icons/lock.png) 2px 1px no-repeat !important;
}
table.list .checkbox label::after {
    display: inline-block;
    position: absolute;
    width: 16px;
    height: 16px;
    left: -17px;
    top: -10px;
    margin-left: 0;
    padding-left: 0;
    padding-top: 0;
    font-size: 11px;
    color: #555555;
}
table.list .checkbox input[type="checkbox"]{
    opacity: 0;
    z-index: 1;
    margin-left: 0 !important;
}
table.list .checkbox input[type="checkbox"]:checked + label::after{
  font-family: "FontAwesome";
  content: "";
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgZmlsbD0iIzRjNTE1NiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIxLDdMOSwxOUwzLjUsMTMuNUw0LjkxLDEyLjA5TDksMTYuMTdMMTkuNTksNS41OUwyMSw3WiIgLz48L3N2Zz4=) center center no-repeat;  
  background-size: 16px;
    background-color: #fff;
    border: 1px solid #737373;
    border-radius: 3px;
}
table.list .checkbox {
  /* margin-top: 0; */
}
.helptopics table.list tbody tr td:nth-child(2),
.filters table.list tbody tr td:nth-child(2),
.apikeys table.list tbody tr td:nth-child(2),
.pages table.list tbody tr td:nth-child(2) {
	font-size: 13px !important;
    padding: 10px 0 !important;
}
.forms table.list tbody tr td:nth-child(2),
.lists table.list tbody tr td:nth-child(2),
.slas table.list tbody tr td:nth-child(2),
.schedules table.list tbody tr td:nth-child(2),
.pages table.list tbody tr td:nth-child(2) a  {
	font-size: 14px !important;
    padding: 10px 0 !important;
}
.apikeys th:first-child,
.banlist th:first-child,
.canned th:first-child,
.categories-page th:first-child,
.departments th:first-child,
.directory th:first-child,
.forms-page th:first-child,
.lists-page th:first-child,
.emails th:first-child,
.filters th:first-child,
.helptopics th:first-child,
.orgs th:first-child,
.pages th:first-child,
.plugin-add th:first-child,
.plugins-page th:first-child,
.queues-ticket th:first-child,
.roles th:first-child,
.schedules th:first-child,
.settings-page th:first-child,
.slas-page th:first-child,
.staff-page table.list th:first-child,
.logs-page th:first-child,
.system th:first-child,
.tasks th:first-child,
.teams th:first-child,
.templates th:first-child,
.tickets-page th:first-child,
.users-page th:first-child {
    background-position: center left 12px !important;
}
.apikeys td:first-child,
.banlist td:first-child,
.canned td:first-child,
.categories-page td:first-child,
.departments td:first-child,
.directory td:first-child,
.forms-page td:first-child,
.lists-page td:first-child,
.emails td:first-child,
.filters td:first-child,
.helptopics td:first-child,
.orgs td:first-child,
.pages td:first-child,
.plugin-add td:first-child,
.plugins-page table.list tbody td[align="center"],
.queues-ticket td:first-child,
.roles td:first-child,
.schedules td:first-child,
.settings-page table.list td:first-child,
.settings-page table.list td:nth-child(2),
.slas-page td:first-child,
.staff-page td:first-child,
.logs-page td:first-child,
/* .tasks td:first-child, */
.teams td:first-child,
.templates td:first-child,
.tickets-page table.list td:first-child,
.users-page td:first-child {
	/* wth is this for */
    padding: 18px 0 18px 14px;
    text-align: left;
}
.rtl .apikeys td:first-child,
.rtl .banlist td:first-child,
.rtl .canned td:first-child,
.rtl .categories-page td:first-child,
.rtl .departments td:first-child,
.rtl .directory td:first-child,
.rtl .forms-page td:first-child,
.rtl .lists-page td:first-child,
.rtl .emails td:first-child,
.rtl .filters td:first-child,
.rtl .helptopics td:first-child,
.rtl .orgs td:first-child,
.rtl .pages td:first-child,
.rtl .plugin-add td:first-child,
.rtl .plugins-page table.list tbody td[align="center"],
.rtl .queues-ticket td:first-child,
.rtl .roles td:first-child,
.rtl .schedules td:first-child,
.rtl .settings-page table.list td:first-child,
.rtl .settings-page table.list td:nth-child(2),
.rtl .slas-page td:first-child,
.rtl .staff-page td:first-child,
.rtl .logs-page td:first-child,
/* .rtl .tasks td:first-child, */
.rtl .teams td:first-child,
.rtl .templates td:first-child,
.rtl .tickets-page table.list td:first-child,
.rtl .users-page td:first-child {
	/* wth is this for */
    text-align: right;
}
.orgs table.ticket_info td {
    padding-top: 0;
}
.system td:first-child {
    padding: 7px 0;
}
.settings-page table.list td:nth-child(3) {
    padding: 0 20px 0 0;
}
.settings-page table.list th:nth-child(2) {
    padding-left: 10px !important;
    padding-right: 20px;
}
.settings-page table.list td:nth-child(2) {
	font-size: 14px;
    padding-right: 20px;
}
.settings-page table.list td:nth-child(3) a {
    font-size: 14px;
    margin-left: -10px;
}
.osta_ticket .icon-code-fork,
.osta_ticket .icon-code-link  {
    display: none;
}
.osta-ticket-merged .icon-code-fork,
.osta-ticket-linked .icon-code-link {
    display: inline-block;
}
/* new reply icon */
#new-reply-icon {
	float: left;
    width: 14px;
    height: 14px;
    margin: 0 9px 0 0;
}
.dot {
    display: none;
    width: 20px;
    height: 20px;
    background-position: -3px 0;
    background-size: 20px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%2388c80b' d='M10%2C9V5L3%2C12L10%2C19V14.9C15%2C14.9 18.5%2C16.5 21%2C20C20%2C15 17%2C10 10%2C9Z' /%3E %3C/svg%3E");
}
.new-reply-waiting .dot,
.ticket-status .dot {
    display: inline-block;	
	animation:  slowbounceIn 3s ease-in-out 3s infinite;	 
}
/* merged tickets icon */
.osta_ticket .icon-code-fork:before {
    content: "\f126";
    font-size: 16px;
    top: 1px !important;
    color: #8a8a8a;
}
.osta_ticket .icon-code-fork {
    font-size: 16px;
    position: relative;
    top: 4px;
    margin: 0 0 0 9px;
}
/* linked tickets icon */
.icon-link:before {
    content: "\f0c1";
    font-size: 18px;
}
a#tickets-merge .icon-code-fork:before {
    font-size: 20px;
    top: 0;
}
.sticky.bar.fixed .icon-code-fork:before {
    color: var(--nav-bar-link) !important; /* osta: was #fff */
    fill: var(--nav-bar-link) !important; /* osta: was #fff */
}
.sticky.bar.fixed a#tickets-link .icon-link:before {
    color: var(--nav-bar-link) !important; /* osta: was #fff */
}
.icon-code-link {
    content: "\f0c1";
}
/* action button */
a#tickets-link .icon-link:before {
    font-size: 18px;
    top: 1px;
}
/* ticket queue icon */
.osta_ticket .icon-code-link {
	margin: 0 0 0 5px;
}
.osta_ticket .icon-code-link:before {
    content: "\f0c1";	
    font-size: 14px;
    position: relative;
    top: 3px;
    color: #969696;
}
@keyframes slowbounceIn {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
td.osta_ticket {
    vertical-align: middle;
    padding: 16px 10px 16px 6px;
    white-space: nowrap;;
}
table.list tbody td:first-child {
    /* padding-right: 0; */
}
div[style="font-weight:bold"] #new-reply-icon .dot {
    display: inherit;
}

.ticket-num {
    display: inline-block;
    /* float: left; */
}

/* ==========================================================================
 WARNING BAR
========================================================================== */
#warning_bar {
    margin: 0;
    width: 100%;
    padding: 0;
    height: 36px;
    border: initial;
    background-image: initial;
    background-color: #000;
    position: fixed !important;
    top: 0;
    z-index: 99;
    color: #fff;
    display: none;
	-webkit-box-shadow: 0px 1px 0px 0px rgba(0,0,0,1);
	-moz-box-shadow: 0px 1px 0px 0px rgba(0,0,0,1);
	box-shadow: 0px 1px 0px 0px rgba(0,0,0,1);
}
#warning-inner {
    display: table;
    margin: 6px auto;
    background: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23ffffff' d='M19%2C19H5V5H19M19%2C3H5A2%2C2 0 0%2C0 3%2C5V19A2%2C2 0 0%2C0 5%2C21H19A2%2C2 0 0%2C0 21%2C19V5C21%2C3.89 20.1%2C3 19%2C3M11%2C15H13V17H11V15M11%2C7H13V13H11V7' /%3E %3C/svg%3E");
	background-repeat: no-repeat;
    height: 20px;
    padding: 4px 0 0 28px;
}
@media only screen and (min-width:761px){
	#warning_bar {
		display: inline-block;
	}
	#warning_bar + #header {
		margin-top: 37px !important;
	}
	/* Push the sub_nav itself past the fixed warning_bar. Targeting
	   #sub_nav (the ul) instead of #sub_nav-wrap works on both the
	   simple navbar (FAQs/etc) AND the Tickets-page customQ_nav variant
	   — the inner ul carries the same id, so the rule hits both. */
	#warning_bar ~ #pjax-container #sub_nav {
		margin-top: 95px;
		margin-left: 0 !important;
		height: 24px !important;
		line-height: 26px;
	}
	#warning_bar ~ #pjax-container #sub_nav li {
		line-height: 27px;
	}
}

/* ==========================================================================
 RTL TRANSLATIONS
========================================================================== */
.rtl,
.rtl div[dir="ltr"],
.rtl::placeholder,
.rtl::-moz-placeholder,
.rtl::-ms-input-placeholder,
.rtl::-webkit-input-placeholder,
.rtl .redactor-placeholder:after,
.rtl .redactor-linebreaks.redactor-placeholder,
.rtl .redactor-linebreaks.redactor-placeholder:after {
	direction: rtl;
	text-align: right;
}
.rtl .redactor-placeholder:after {
    width: 100%;
    text-align: right;
    left: initial;
    right: 10px;	
}
.rtl .pull-left.avatar {
    float: left;
}
.rtl .pull-right.avatar {
    float: right;
}

/* ==========================================================================
 SCROLL TO TOP
========================================================================== */
#scroll-to-top {
    visibility: hidden;
    position: fixed;
    bottom: 11px;
    right: 20px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: var(--header-bg);
    color: var(--header-title);
    cursor: pointer;
    padding: 13px;
    border-radius: 4px;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s ease-in-out;
    -moz-transition: visibility 0s, opacity 0.5s ease-in-out;
    -webkit-transition: visibility 0s, opacity 0.5s ease-in-out;
}
#scroll-to-top:hover {
    opacity: 1 !important;
}
#scroll-to-top svg {
    fill: var(--header-title);
}
.demo button#scroll-to-top {
    right: 90px;
}
/* ==========================================================================
 COOKIE CONSENT BAR
========================================================================== */
#complianceouter {
    background: var(--header-bg);
    color: var(--header-title);
    font-size: 14px;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
}
#compliance {
    margin: 0 auto;
    max-width: 1264px;	
    color: var(--header-title);
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    -ms-flex-direction: row;
    flex-direction: row;
    overflow: hidden;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
#icon-compliance-outer {
    float: right;
    margin-left: .7em;
}
#icon-compliance {
    width: 20px;
    fill: var(--header-title);
    position: relative;
    top: 3px;
}
#complaince-message {
    display: block;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    max-width: 100%;
    margin-right: 1em;
    margin-left: .7em;
    line-height: 100%;	
    font-size: 14px;
}
@media only screen and (max-width:1000px) {
	#complaince-message {
		font-size: 13px;
	}
}
@media only screen and (max-width:800px) {
	#complaince-message {
		font-size: 12px;
	}
}
@media only screen and (max-width:600px) {
	#complaince-message {
		font-size: 11px;
	}
}
@media only screen and (max-width:400px) {
	#complaince-message {
		font-size: 10px;
	}
}

a#compliance-link {
    /* border: .5px solid; */
	border-radius: 2px;
    padding: 0 4px 1px 4px;
    margin: 0 0 0 6px;
    font-size: 80%;
    position: relative;
    top: -1px;
}
#complaince-button {
    float: right;
    background: var(--header-title);
    font-weight: 700;
    width: fit-content;
    margin: 0;
    padding: .8em 1.8em;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: justify;
    align-content: space-between;
	-webkit-transition: 1s;
	transition: background color 1s;	
}

/* Icon Pop */
@-webkit-keyframes compliance-pop {
  50% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
}
@keyframes compliance-pop {
  50% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
}
/* osta - warning_bar animation removed */

/* ==========================================================================
 SELECT2
========================================================================== */
.select2-container--default .select2-selection--single {
	height: 32px;
    position: relative;
    color: #424242;
    padding: 0 0 0 10px;
    background-color: #fff;
    background-image: url(../../osta/svg/chevron-down-thin.svg);
    background-position: right 6px center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    outline: 0;	
}
.select2-container .select2-selection--single .select2-selection__rendered {
	padding-left: 0;
	padding-right: 0;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}
.select2-container {
    margin-right: 10px;	
}
.rtl .select2-container {
    margin-left: 10px;
    margin-right: 0;
}
.select2.select2-container.select2-container--default {
    margin-right: 0;	
}
.tickets .select2.select2-container.select2-container--default,
.tickets .form_table .select2.select2-container.select2-container--default,
.tickets .form_table .select2-container--default .select2-selection--multiple {
    width: 320px !important;	
}
.profile-page .select2.select2-container.select2-container--default {
    width: 305px !important;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
    padding-right: 30px;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0 8px;
}
.tickets-page .tickets .form_table .select2-container--default .select2-selection--multiple {
    height: 32px !important;
}
.select2-selection__arrow b {
    margin-top: 0 !important;	
}
.select2-search--dropdown .select2-search__field {
    width: calc(100% - 9px) !important; /* eg. Open Ticket > select User */
}
.form_table.fixed .select2-container {
    margin-right: 0;	
}
.form_table.fixed .rtl .select2-container {
    margin-right: 0;		
    margin-left: 0;	
}
.form_table.fixed .select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 0;
    margin-right: 0;
    width: calc(100% - 8px) !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #dcdfe2;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #08C;
}
.select2-selection.select2-selection--single {
    border: 1px solid #a1a6ad;
}
.client-required .select2-selection.select2-selection--single {
    border-right: 4px solid red;
}
#timezone-dropdown ~ .select2.select2-container.select2-container--default {
    width: 305px !important;
}
#select2-timezone-dropdown-container {
    padding: 2px 0;
}
#select2-datetime_format-sp-container {
    padding: 0;
}
#user-account #timezone-dropdown + .select2 + button {
    margin: 8px 0 0 0;
}
select#timezone-dropdown ~ button.action-button {
    margin: 0 0 0 20px;
}
.select2-results__options::-webkit-scrollbar {
  width: 16px;
  background-clip: padding-box;
}
.select2-results__options::-webkit-scrollbar-track {
  background-color: #F4F4F4;
  height: 8px;
  background-clip: padding-box;
  border-right: 10px solid rgba(0, 0, 0, 0);
  border-top: 10px solid rgba(0, 0, 0, 0);
  border-bottom: 10px solid rgba(0, 0, 0, 0);
}
.select2-results__options::-webkit-scrollbar-thumb {
	background-clip: padding-box;
    background-color: #C1C1C1;
    border-right: 10px solid rgba(0, 0, 0, 0);
    border-top: 20px solid rgba(0, 0, 0, 0);
    border-bottom: 20px solid rgba(0, 0, 0, 0);
}
.select2-results__options::-webkit-scrollbar-button {
  display: none;
}
#content.staff .select2-selection.select2-selection--single {
    min-width: 245px;
}
.settings-page #site-pages .select2-container {
    width: 220px !important;
}
select[name="default_dept_id"] ~ .select2 {
    width: 308px !important;
}
.select2.select2-container.select2-container--default ~ .select2.select2-container.select2-container--default {
    margin-top: 8px;
}
.select2-container--default .select2-selection--single {
    outline: none !important;
}
.emailsettings .form_table.settings_table .select2.select2-container {
    width: 400px !important;
}
.emailsettings .form_table.settings_table input[type=text] {
    width: 389px !important;
}
form[action="emailtest.php"] .select2.select2-container {
    width: 450px !important;
}
h2 .select2 {
    font-size: 14px !important;
}

/* ==========================================================================
 TABLE PADDING SLIDER
========================================================================== */
.padding-slider-container {
	width: 200px;
	float: right;
	margin-right: 20px;
}
.padding-slider {
	-webkit-appearance: none;
	width: 200px;
	height: 5px;
	padding: 0;
	background: #d3d3d3;
	outline: none;
	opacity: 0.7;
	-webkit-transition: .2s;
	transition: opacity .2s;
}
.padding-slider:hover {
	opacity: 1;
}
.padding-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
    background: #128dbe;
	cursor: pointer;
	border-radius: 100%;
}
.padding-slider.left::-webkit-slider-thumb {
  background-size: 14px !important;
  background-position: center center;
  background-repeat: no-repeat;
background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23ffffff' d='M8.59%2C16.58L13.17%2C12L8.59%2C7.41L10%2C6L16%2C12L10%2C18L8.59%2C16.58Z' /%3E %3C/svg%3E"); 
}
.padding-slider.right::-webkit-slider-thumb {
  background-size: 14px !important;
  background-position: center center;
  background-repeat: no-repeat;
background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23ffffff' d='M15.41%2C16.58L10.83%2C12L15.41%2C7.41L14%2C6L8%2C12L14%2C18L15.41%2C16.58Z' /%3E %3C/svg%3E");
}

.padding-slider::-moz-range-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
    background: #128dbe;
	cursor: pointer;
	border-radius: 100%;
}
.padding-slider.left::-moz-range-thumb {
  background-size: 14px !important;
  background-position: center center;
  background-repeat: no-repeat;
background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23ffffff' d='M8.59%2C16.58L13.17%2C12L8.59%2C7.41L10%2C6L16%2C12L10%2C18L8.59%2C16.58Z' /%3E %3C/svg%3E"); 
}
.padding-slider.right::-moz-range-thumb {
  background-size: 14px !important;
  background-position: center center;
  background-repeat: no-repeat;
background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23ffffff' d='M15.41%2C16.58L10.83%2C12L15.41%2C7.41L14%2C6L8%2C12L14%2C18L15.41%2C16.58Z' /%3E %3C/svg%3E");
}

#padding-slider {
	color: #ccc;
	display: none;
}
.checkbox-cell {
	padding-left: 14px !important;
}
.empty .padding-slider-container {
	display: none;
}

.rtl .padding-slider-container, 
.rtl #resize-buttons-container {
    float: left;
    margin: 0 2px 0 20px;
}

/* ==========================================================================
 TICKET QUEUE FONT RESIZING (EXPERIMENTAL)
========================================================================== */
/*
table.list.queue.tickets.font-reg a.preview {
    font-size: 11px;
}
table.list.queue.tickets.font-reg tbody td {
    font-size: 12px;
}
table.list.queue.tickets.font-reg a[style="display:inline"],
table.list.queue.tickets.font-reg table.list tbody td.osta_username {
    font-size: 14px;
}
table.list.queue.tickets.font-reg .date-text {
    top: 2px;
}	
table.list.queue.tickets.font-reg .checkbox-cell {
    padding: 18px 0;
}

table.list.queue.tickets.font-med a.preview {
    font-size: 12px;
}
table.list.queue.tickets.font-med tbody td {
    font-size: 13px;
}
table.list.queue.tickets.font-med a[style="display:inline"],
table.list.queue.tickets.font-med table.list tbody td.osta_username {
    font-size: 15px;
}
table.list.queue.tickets.font-med .date-text {
    top: 2px;
}	

table.list.queue.tickets.font-lrg a.preview {
    font-size: 12px;
}
table.list.queue.tickets.font-lrg tbody td {
    font-size: 14px;
}
table.list.queue.tickets.font-lrg a[style="display:inline"],
table.list.queue.tickets.font-lrg tbody td.osta_username {
    font-size: 16px;
}	
table.list.queue.tickets.font-lrg .date-text {
    width: 112px;
}
table.list.queue.tickets.font-lrg th.osta_lastupdated {
    width: 133px;
}
table.list.queue.tickets.font-lrg i.icon-comments-alt {
    transform: scale(1.2);
}
table.list.queue.tickets.font-lrg i.small.icon-paperclip.icon-flip-horizontal {
    transform: scale(1.2);
    top: 1px;
}
table.list.queue.tickets.font-lrg .osta_subject small.faded-more {
    font-size: 16px;
}
	
table.list.queue.tickets.font-x-lrg a.preview {
    font-size: 13px;
}
table.list.queue.tickets.font-x-lrg tbody td {
    font-size: 15px;
}
table.list.queue.tickets.font-x-lrg a[style="display:inline"],
table.list.queue.tickets.font-x-lrg tbody td.osta_username {
    font-size: 17px;
}	
table.list.queue.tickets.font-x-lrg .date-text {
    width: 124px;
}
table.list.queue.tickets.font-x-lrg i.icon-comments-alt {
    transform: scale(1.2);
}
table.list.queue.tickets.font-x-lrg i.small.icon-paperclip.icon-flip-horizontal {
    transform: scale(1.2);
    top: 1px;
}
table.list.queue.tickets.font-x-lrg .osta_subject small.faded-more {
    font-size: 16px;
}
*/

/* ==========================================================================
 JFONTSIZE
========================================================================== */
.resizable-text {
	background: #FFE9D2;
	font-family: 'Open Sans', sans-serif;
	padding: 20px 20px 0 20px;
	height: 30px;
	font-size: 16px;
}
.resizable-text.two {
	font-size: 14px;
	padding: 0 20px 20px 20px;  
}
#resize-buttons-container {
    float: right;
    font-family: 'Open Sans', sans-serif;
    font-size: 22px;
    font-weight: 500;
	margin: 0 21px 0 0;
    padding: 0;
    height: 21px;
    line-height: 21px;
}
#resize-buttons-container a {
    display: inline-block;
    text-align: center;
    /* border-bottom: 1px solid; */ /*useful to toggle on and off when positioning*/
}
.resize-buttons {
	background: #fff;
	width: 19px;
	color: #128dbe;
	padding: 0;
	vertical-align: bottom;
	position: relative;
	bottom: 0;
}
.resize-buttons a {
    color: #128dbe;
}
#resize-buttons-container a:hover {
    color: #0c4f69;
}
#text-down {
	font-size: 13px;
    line-height: 20px;
}
#text-reset {
    font-size: 15px;
    padding-right: 4px;
    line-height: 21px;
}
#text-up {
    font-size: 16px;
    line-height: 22px;
}

/* ==========================================================================
 MODAL: KEYBOARD SHORTCUTS HELP
========================================================================== */
.fade {
	opacity: 0;
	-webkit-transition: opacity .15s linear;
	-o-transition: opacity .15s linear;
	transition: opacity .15s linear;
}
.fade.in {
	opacity: 1;
}
.hide {
	display: none!important
}

.show {
	display: block!important
}
.invisible {
	visibility: hidden
}
.modal .close {
	float: right;
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #fff;
	filter: alpha(opacity=20);
	opacity: .2;
}
button.close {
	-webkit-appearance: none;
	padding: 0;
	cursor: pointer;
	background: 0 0;
	border: 0;
}
.modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1040;
	display: none;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	outline: 0;
}
.modal-open .modal {
	overflow-x: hidden;
	overflow-y: auto;
}
.modal-backdrop {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	background-color: #000;
	opacity: .5 !important;
}
.modal-backdrop.in {
	filter: alpha(opacity=50);
	opacity: .5;
}
.modal-backdrop.fade {
	filter: alpha(opacity=0);
	opacity: 0;
}
.modal-dialog {
	position: relative;
	width: auto;
	margin: 10px;
}
@media screen and (min-width: 768px) {
	.modal-dialog {
		width: 600px;
		margin: 30px auto;
	}
}
.modal.in .modal-dialog {
	-webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	transform: translate(0, 0);
}
.modal-content {
    width: 700px;
	margin: 100px auto 0;
	position: relative;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	outline: 0;
    background: #FFF;
    border: 1px solid #AAA;
    border-radius: 5px;
	-webkit-box-shadow:  rgba(0,0,0,0.4) 0 10px 26px;
    box-shadow: rgba(0,0,0,0.4) 0 10px 26px;	
}
@media screen and (min-width: 768px) {
	.modal-content {
		-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
		box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
	}
}
.modal-header {
	padding: 15px 0 0 15px;
}
.modal-header h3 {
    font-weight: 400;
    font-size: 25px;
    text-align: left;
    padding: 2px 0 13px 0;
}
.modal-header .close {
	margin-top: -2px;
}
.modal-body {
	position: relative;
    padding: 15px;
    padding-top: 0 !important;
    border-top: .5px solid #d4d4d4;
}
.modal-body .label-default {
	background-color: #777;
}
td.keyb:first-child {
    width: 40px;
}
td.keyb2 {
    width: 40px;
}
.shift, 
.key2 {
	display: inline;
    padding: .2em .7em .3em;
    font-size: 100%;
    line-height: 1;
    color: #4c5156;
    background: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border: 1px solid #4c5156;
    border-radius: .25em;
}
.key2 {
    width: 11px;
    display: inline-block;
    margin-top: 1px;
    padding: 7px 10px 5px 10px;
}
.plus-td {
	width: 20px !important;
    text-align: center !important;
}
.plus-sign {
	color: #4c5156;
    font-size: 20px;
    position: relative;
    top: 0;
    left: 0;
    font-weight: 100;	
}
.modal-body td {
    height: 40px;
    color: #4c5156;
    font-size: 13px;
    text-align: left;
}

/* ==========================================================================
 DARK MODE: EXPERIMENTAL
========================================================================== */

html:has(body.dark-mode) {
    scrollbar-color: #434c5f #181b22;
}

/* Theme Options > Dark Mode */
.theme-page #dark-mode-message {

}
.dark-mode.theme-page #dark-mode-message {
    display: inline-block;
    border: 1px solid #393d44;
    background: #000000;
    color: #8b949e;
}
.theme-page #dark-mode-message {
    display: none;	
    width: calc(100% - 43px);
    border: 2px solid #a5b6d0;
    border-radius: 3px;
    background: #dcdfe2;
    color: #414957;
    margin: 0 0 30px 0;
    padding: 20px;
}
.dark-mode.theme-page #dark-mode-message a {
    color: #f0f6fc;
}
.theme-page #dark-mode .header {
    margin-top: 14px;
}
.theme-page #dark-mode-option .header:before {
    display: inline-block;
    width: 23px;
    height: 25px;
    background-size: 25px;
    background-repeat: no-repeat;
    position: relative;
    margin-right: 0px;
    top: 4px;
    content: ' ';
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill='%23777777' d='M17.75%2C4.09L15.22%2C6.03L16.13%2C9.09L13.5%2C7.28L10.87%2C9.09L11.78%2C6.03L9.25%2C4.09L12.44%2C4L13.5%2C1L14.56%2C4L17.75%2C4.09M21.25%2C11L19.61%2C12.25L20.2%2C14.23L18.5%2C13.06L16.8%2C14.23L17.39%2C12.25L15.75%2C11L17.81%2C10.95L18.5%2C9L19.19%2C10.95L21.25%2C11M18.97%2C15.95C19.8%2C15.87 20.69%2C17.05 20.16%2C17.8C19.84%2C18.25 19.5%2C18.67 19.08%2C19.07C15.17%2C23 8.84%2C23 4.94%2C19.07C1.03%2C15.17 1.03%2C8.83 4.94%2C4.93C5.34%2C4.53 5.76%2C4.17 6.21%2C3.85C6.96%2C3.32 8.14%2C4.21 8.06%2C5.04C7.79%2C7.9 8.75%2C10.87 10.95%2C13.06C13.14%2C15.26 16.1%2C16.22 18.97%2C15.95M17.33%2C17.97C14.5%2C17.81 11.7%2C16.64 9.53%2C14.5C7.36%2C12.31 6.2%2C9.5 6.04%2C6.68C3.23%2C9.82 3.34%2C14.64 6.35%2C17.66C9.37%2C20.67 14.19%2C20.78 17.33%2C17.97Z' /%3E %3C/svg%3E");
}
.theme-page #dark-mode-option h2 {
    display: inline-block;
}
.theme-page #dark-mode-option .text {
	border: 2px solid #a5b6d0;
    border-radius: 3px;
    background: #dcdfe2;
    color: #414957;
    margin: 20px 17px 0;
    padding: 20px;
}
.dark-mode.theme-page #dark-mode-option {
	display: none;
}
.dark-mode.theme-page li.error {
    border-top: 1px solid #30363d !important;
}
.dark-mode input.switch:checked ~ label:before {
    background-color: #398532;
}

/* Color Theme Options*/

/* Logo Options */
.dark-mode.#default-logo.highlight,
.dark-mode.#custom-text.highlight,
.dark-mode.#custom-logo.highlight {
	border: 1px solid #30363d !important;
}

/* Custom Text and Links Options */

/* Background Image Options */
.dark-mode .backdrop .outer {
    display: inline-block;
    position: relative;
    background: #000000;
    border: .5px solid #273344;
    margin: 0 18px 22px 0;
}
.dark-mode .backdrop [type=radio]:checked + div {
    outline: 1px solid #727272;
}
.dark-mode input[type="file"] {
    color: #c9d1d9;
    background-color: #21262d;
    border-color: #f0f6fc1a;
}
.dark-mode #theme-header-options .container, 
.dark-mode #logo-options .container,
.dark-mode td#custom-logo-column {
    border: 1px solid #393d44 !important;
}

/* Custom CSS */

/* Theme Information */

/* My Account Profile > Dark Mode */

#dark-mode-notes {
    border: 2px solid #a5b6d0;
    border-radius: 3px;
    background: #dcdfe2;
    color: #414957;
    margin: 0 10px;
    padding: 20px;
}
.dark-mode #dark-mode-notes {
    border: 2px solid #303846;
    background: #171b22;
    color: #606b7e;
}
#dark-mode-notes ul {
    line-height: 34px;
    padding: 0 0 0 20px;
}
#dark-mode-notes ul li {
    list-style-type: none;
    margin: 0 0 0 0 !important;
}
#dark-mode-notes ul li:before {
    content: '•';
    margin: 0 4px 0 0;
}
#osta-toggle.dark-mode-toggle {
    float: left;
    margin: 20px;
}
a[href="#dark-mode-tab"]:before { /*Clean tab with no icon*/
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 18px;
    background-repeat: no-repeat;
    position: relative;
    margin-right: 6px;
    top: 6px;
    content: ' ';
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill='%23128dbe' d='M17.75%2C4.09L15.22%2C6.03L16.13%2C9.09L13.5%2C7.28L10.87%2C9.09L11.78%2C6.03L9.25%2C4.09L12.44%2C4L13.5%2C1L14.56%2C4L17.75%2C4.09M21.25%2C11L19.61%2C12.25L20.2%2C14.23L18.5%2C13.06L16.8%2C14.23L17.39%2C12.25L15.75%2C11L17.81%2C10.95L18.5%2C9L19.19%2C10.95L21.25%2C11M18.97%2C15.95C19.8%2C15.87 20.69%2C17.05 20.16%2C17.8C19.84%2C18.25 19.5%2C18.67 19.08%2C19.07C15.17%2C23 8.84%2C23 4.94%2C19.07C1.03%2C15.17 1.03%2C8.83 4.94%2C4.93C5.34%2C4.53 5.76%2C4.17 6.21%2C3.85C6.96%2C3.32 8.14%2C4.21 8.06%2C5.04C7.79%2C7.9 8.75%2C10.87 10.95%2C13.06C13.14%2C15.26 16.1%2C16.22 18.97%2C15.95M17.33%2C17.97C14.5%2C17.81 11.7%2C16.64 9.53%2C14.5C7.36%2C12.31 6.2%2C9.5 6.04%2C6.68C3.23%2C9.82 3.34%2C14.64 6.35%2C17.66C9.37%2C20.67 14.19%2C20.78 17.33%2C17.97Z' /%3E %3C/svg%3E");
}
#dark-mode-tab th:before {
    display: inline-block;
    width: 19px;
    height: 19px;
    background-size: 20px;
    background-repeat: no-repeat;
    position: relative;
    margin-right: -2px;
    top: 2px;
    content: ' ';
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill='%238C949F' d='M17.75%2C4.09L15.22%2C6.03L16.13%2C9.09L13.5%2C7.28L10.87%2C9.09L11.78%2C6.03L9.25%2C4.09L12.44%2C4L13.5%2C1L14.56%2C4L17.75%2C4.09M21.25%2C11L19.61%2C12.25L20.2%2C14.23L18.5%2C13.06L16.8%2C14.23L17.39%2C12.25L15.75%2C11L17.81%2C10.95L18.5%2C9L19.19%2C10.95L21.25%2C11M18.97%2C15.95C19.8%2C15.87 20.69%2C17.05 20.16%2C17.8C19.84%2C18.25 19.5%2C18.67 19.08%2C19.07C15.17%2C23 8.84%2C23 4.94%2C19.07C1.03%2C15.17 1.03%2C8.83 4.94%2C4.93C5.34%2C4.53 5.76%2C4.17 6.21%2C3.85C6.96%2C3.32 8.14%2C4.21 8.06%2C5.04C7.79%2C7.9 8.75%2C10.87 10.95%2C13.06C13.14%2C15.26 16.1%2C16.22 18.97%2C15.95M17.33%2C17.97C14.5%2C17.81 11.7%2C16.64 9.53%2C14.5C7.36%2C12.31 6.2%2C9.5 6.04%2C6.68C3.23%2C9.82 3.34%2C14.64 6.35%2C17.66C9.37%2C20.67 14.19%2C20.78 17.33%2C17.97Z' /%3E %3C/svg%3E");
}






/* osta - Version update button styling */
.version-update-btn a {
    display: inline-block;
    border: initial;
    padding: 14px 30px 14px 49px;
    border-radius: 3px;
    margin: 20px 0 0 0;
    color: #3c763d !important;
    background: #D0E9BA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%233c763d' d='M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z'/%3E%3C/svg%3E") no-repeat 27px center;
    background-size: 20px 20px;
    box-shadow: unset;
    border: initial !important;
    will-change: background;
    transition: all 0.3s ease-in-out;
    font-family: 'Open Sans', sans-serif !important;
}
.version-update-btn a:hover {
    background: #ccd1d6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%232a3e2a' d='M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z'/%3E%3C/svg%3E") no-repeat 27px center;
    background-size: 20px 20px;
    color: #2a3e2a !important;
}
span.version-update {
    font-size: 12px;
}
span.version-number {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-weight: 400;
    font-size: 13px;
    color: #3ead08;
}

/* osta - Version update notification bar */
#warning_bar.osta-update #warning-inner {
    width: 100%;
    background-image: none;
    padding-left: 0;
}
#warning_bar.osta-update .notif-left {
    float: left;
}
#warning_bar.osta-update .notif-right {
    float: right;
}
#warning_bar.osta-update .notif-update,
#warning_bar.osta-update .notif-dismiss {
    margin-left: 15px;
    color: #fff;
}
#warning_bar.osta-update .notif-update:hover,
#warning_bar.osta-update .notif-dismiss:hover {
    color: #969696;
}
#warning_bar.osta-update .version-number {
    color: #3ead08;
    margin-left: 3px;
}

#warning_bar.osta-update {
    font-size: 12px;
    padding: 0 10px;
    width: calc(100% - 20px);
}
#warning_bar.osta-update i.icon-info-sign:before {
    width: 14px;
    color: #fff \!important;
}
/* osta - Version update notification icons (consistent approach) */
#warning_bar.osta-update {
    font-size: 12px;
    padding: 0 10px;
    width: calc(100% - 20px);
}

/* Hide all Font Awesome :before pseudo-elements */
#warning_bar.osta-update i.icon-info-sign:before,
#warning_bar.osta-update i.icon-download:before,
#warning_bar.osta-update i.icon-remove:before {
    display: none !important;
    content: '' !important;
}

/* Reset and apply consistent base styling to all icons */
#warning_bar.osta-update i.icon-info-sign,
#warning_bar.osta-update i.icon-download,
#warning_bar.osta-update i.icon-remove {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    position: relative;
    top: 0 !important;
    float: none;
}

#warning_bar.osta-update i.icon-info-sign {
    margin: -3px 0px 0 0;
}
#warning_bar.osta-update i.icon-download {
    margin: -1px 2px 0 0;
}
#warning_bar.osta-update i.icon-remove {
    margin: -1px -2px 0 0;
}

/* Info icon - white */
#warning_bar.osta-update i.icon-info-sign {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z'/%3E%3C/svg%3E");
}

/* Download icon - white */
#warning_bar.osta-update i.icon-download {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M17,13L12,18L7,13H10V9H14V13M19.35,10.03C18.67,6.59 15.64,4 12,4C9.11,4 6.6,5.64 5.35,8.03C2.34,8.36 0,10.9 0,14A6,6 0 0,0 6,20H19A5,5 0 0,0 24,15C24,12.36 21.95,10.22 19.35,10.03Z'/%3E%3C/svg%3E");
}

/* Remove/X icon - white */
#warning_bar.osta-update i.icon-remove {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z'/%3E%3C/svg%3E");
}

/* Hover states - gray */
#warning_bar.osta-update .notif-update:hover i.icon-download {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23969696' d='M17,13L12,18L7,13H10V9H14V13M19.35,10.03C18.67,6.59 15.64,4 12,4C9.11,4 6.6,5.64 5.35,8.03C2.34,8.36 0,10.9 0,14A6,6 0 0,0 6,20H19A5,5 0 0,0 24,15C24,12.36 21.95,10.22 19.35,10.03Z'/%3E%3C/svg%3E");
}
#warning_bar.osta-update .notif-dismiss:hover i.icon-remove {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23969696' d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z'/%3E%3C/svg%3E");
}
#warning_bar.osta-update a.version-number {
    color: #3ead08;
    text-decoration: none;
}
#warning_bar.osta-update a.version-number:hover {
    color: #58f00e;
    /* text-decoration: underline; */
}

/* ==========================================================================
   THEME INFO — Two-column redesign with License section (2026-03-26)
========================================================================== */
.osta-card {
}
.osta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.osta-col {
    padding: 10px 20px 16px;
}
.osta-col-left {
}
.osta-section {
    margin-bottom: 18px;
}
.osta-section:last-child {
    margin-bottom: 0;
}


/* ── License badges ── */
.osta-license-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
}
.osta-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.osta-badge-active {
    background: #eaf3de;
    color: #5a9e2f;
    border: 1px solid rgba(90,158,47,.25);
}
.osta-badge-revoked,
.osta-badge-expired {
    background: #fde8e8;
    color: #cc4444;
    border: 1px solid rgba(204,68,68,.25);
}

/* Replace the round status dot with a glyph for validated / not-validated
   badges. Active = green check, Revoked/Expired = red X. */
.osta-badge-active .osta-badge-dot,
.osta-badge-revoked .osta-badge-dot,
.osta-badge-expired .osta-badge-dot {
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}
.osta-badge-active .osta-badge-dot::before {
    content: '\2713'; /* ✓ */
    color: #5a9e2f;
}
.osta-badge-revoked .osta-badge-dot::before,
.osta-badge-expired .osta-badge-dot::before {
    content: '\2715'; /* ✕ */
    color: #cc4444;
}
.osta-badge-offline {
    background: #f3f3f5;
    color: #888;
    border: 1px solid #ddd;
}
.osta-badge-offline .osta-badge-dot {
    background: #aaa;
}

/* ── License key input row ── */
.osta-license-key-field {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
input#osta-license-key-input {
    height: initial;
    margin: 0 !important;
}
.osta-license-key-field input {
    flex: 1;
    margin: 0;
    height: initial;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 13px;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #4c5156;
    letter-spacing: .03em;
}
.osta-license-key-field input:focus {
    outline: none;
    border-color: #128dbe;
    box-shadow: 0 0 0 2px rgba(18,141,190,.15);
}
.osta-key-masked {
    color: #999 !important;
}
#osta-btn-activate {
    padding: 6px 14px;
}
.osta-license-btn-primary {
    background: #f6745f;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: .5px;
}
.osta-license-btn-primary:hover {
    background: #e5634f;
}
.osta-license-btn-secondary {
    padding: 10px 18px;
    background: #dcdfe2;
    color: #6d7989;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: .5px;
}
.osta-license-btn-secondary:hover {
    background: #c9cdd0;
    color: #343a42;
}
/* Loading state — CSS ring spinner (rotating partial-border circle).
   Perfect rotational symmetry, inherits button text color via
   currentColor so it's white on primary and grey on secondary without
   extra rules. Button's parent is display:flex, so we don't set
   min-width (that would widen the flex basis noticeably). */
.osta-license-btn-primary.osta-btn-loading,
.osta-license-btn-secondary.osta-btn-loading {
    opacity: 0.85;
    cursor: progress;
}
.osta-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: currentColor;
    border-radius: 50%;
    vertical-align: middle;
    animation: osta-spin .8s linear infinite;
}
@keyframes osta-spin {
    to { transform: rotate(360deg); }
}

/* ── License text elements ── */
.osta-license-prompt {
    font-size: 13px;
    color: #4c5156;
    margin-bottom: 14px;
    line-height: 1.6;
}
.osta-license-error {
    font-size: 13px;
    color: #cc4444;
    margin-bottom: 14px;
    line-height: 1.6;
}
.osta-license-error a {
    color: #cc4444;
    font-weight: 600;
    text-decoration: underline;
}
/* Inline activation error — rendered directly under the key input. */
.osta-license-error-inline {
    font-size: 13px;
    color: #cc4444;
    margin: 8px 0 0 0;
    line-height: 1.5;
}
.osta-license-error-inline a {
    color: #cc4444;
    font-weight: 600;
    text-decoration: underline;
}
.osta-license-error-inline a:hover {
    text-decoration: none;
}
.osta-license-revoke {
    margin-bottom: 16px;
}
.osta-license-revoke a {
    font-size: 12px;
    color: #999;
    text-decoration: none;
}
.osta-license-revoke a:hover {
    color: #cc4444;
    text-decoration: underline;
}
.osta-license-offline-note {
    font-size: 12px;
    color: #999;
    margin-top: 12px;
    line-height: 1.5;
}
.osta-license-links {
    display: flex;
    gap: 12px;
    margin-top: 18px;
}
.osta-license-link-group {
    flex: 1;
    text-align: center;
    padding: 14px 12px;
    background: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 5px;
}
.osta-license-link-text {
    display: block;
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
}
.osta-license-link-btn {
    display: inline-block;
    padding: 7px 18px;
    background: #dcdfe2;
    color: #6d7989;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: .5px;
    transition: background .15s ease, color .15s ease;
}
.osta-license-link-btn:hover {
    background: #c9cdd0;
    color: #343a42;
    text-decoration: none !important;
}

/* ── License details (display_fields) ── */
.osta-license-details {
    font-size: 12.5px;
    color: #4c5156;
    line-height: 1.8;
    margin-bottom: 8px;
}
.osta-license-details dt {
    display: inline;
    font-weight: 600;
    color: #333;
}
dl#osta-license-display-fields dd {
    display: inline;
    padding: 0 0 0 5px;
    margin-left: 0;
}
.osta-license-details dd::after {
    content: '';
    display: block;
}
.osta-license-manage-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #128dbe;
    text-decoration: none;
}
.osta-license-manage-link:hover {
    text-decoration: underline;
}

/* ── Info rows (right column) ── */
.osta-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
}
.osta-info-row:last-child {
    border-bottom: none;
}
.osta-info-label {
    color: #4c5156;
    font-weight: 500;
}
.osta-info-value {
    color: #333;
    font-weight: 200;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 12px;
}
.osta-val-good {
    color: #5a9e2f;
}

/* ── Action buttons (Quick Actions, Your Old osTicket) ── */
.osta-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.osta-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    background: #dcdfe2;
    color: #6d7989;
    text-decoration: none;
    letter-spacing: 1.2px;
    transition: background .15s ease, color .15s ease;
}
.osta-action-btn:hover {
    background: #c9cdd0;
    color: #343a42;
}
button#old-client.osta-action-btn {
    background: #8591a4;
    color: #fff;
}
button#old-client.osta-action-btn:hover {
    background: #6f7f93;
}
button#old-staff.osta-action-btn {
    background: #8391A3;
    color: #fff;
}
button#old-staff.osta-action-btn:hover {
    background: #6f7f93;
}

/* ── Diagnostics toggle ── */
.osta-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}
.osta-toggle-label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}
.osta-toggle-desc {
    font-size: 11.5px;
    color: #999;
    margin-top: 2px;
}

/* ── Full-width section (Acknowledgements) ── */
.osta-full-width {
    padding: 16px 20px;
    border-top: 1px solid #eee;
}
.osta-ack-intro {
    font-size: 12.5px;
    color: #999;
    margin-bottom: 12px;
}
.osta-ack-links {
    text-align: center;
}
.osta-ack-links a {
    transition: all 0.3s ease;
    font-size: 90%;
    border: .5px solid;
    background: #fff;
    padding: 0 4px 1px 4px;
    margin-bottom: 10px;
    display: inline-block;
}
.osta-ack-links a:hover {
    transition: all 0.3s ease;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.0);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.0);
    position: relative;
    top: -1px;
    border: .5px solid #659505;
    color: #659505;
}

/* ── Thank you bar (redesigned) ── */
#theme-info #thank-you {
    background: none;
    text-align: center;
    padding: 14px;
    font-size: 18px;
    font-family: 'Open Sans', sans-serif;
    margin: 30px 0 4px 0;
}

/* ── Responsive: collapse to single column ── */
@media (max-width: 768px) {
    .osta-grid {
        grid-template-columns: 1fr;
    }
    .osta-col-left {
    }
    .osta-ack-grid {
        grid-template-columns: 1fr;
    }
}

/* Override old theme-info background since layout has changed */
#theme-info {
    background-image: none;
}
.osta-heart {
    width: 18px;
    height: 18px;
    fill: #e74c3c;
    vertical-align: middle;
    position: relative;
    top: -2px;
    margin-right: 4px;
}

/* ── osTA nav icon, sits to the left of the "osAwesome" label ── */
.osta-nav-icon {
    width: 12px;
    height: 12px;
    display: inline-block;
    vertical-align: middle;
    margin: -2px 0 0 0;
    -webkit-mask: url(../img/osta-icon.svg) no-repeat center / contain;
    mask: url(../img/osta-icon.svg) no-repeat center / contain;
    background-color: currentColor;
}
p.osta-license-sync-hint {
    font-size: 12px;
    color: #6c6c6c;
    margin-top: 8px;
    margin-bottom: 4px;
    line-height: 1.4;
}
div#theme-info button:hover {
    border: initial;
}



/* ── Staging license bar (matches Update Available bar) ── */
#warning_bar.osta-staging-bar {
    font-size: 12px;
    padding: 0 10px;
    width: calc(100% - 20px);
}
#warning_bar.osta-staging-bar #warning-inner {
    width: 100%;
    background-image: none;
    padding-left: 0;
}
#warning_bar.osta-staging-bar .notif-left {
    float: left;
}
#warning_bar.osta-staging-bar .notif-right {
    float: right;
}
#warning_bar.osta-staging-bar a {
    color: #1e1400;
    font-weight: 600;
    text-decoration: none;
}
#warning_bar.osta-staging-bar a:hover {
    text-decoration: underline;
}
#warning_bar.osta-staging-bar .notif-dismiss {
    margin-left: 15px;
    /* inline-flex + align-items:center vertically aligns the X icon
       with the "Dismiss" text regardless of the icon's positional
       nudges (position:relative; top:3px and negative margins from
       the shared .osta-staging-bar icon rules). */
    display: inline-flex;
    align-items: center;
}
#warning_bar.osta-staging-bar .notif-dismiss i.icon-remove {
    /* Reset the positional offset that only makes sense when the icon
       is floating next to inline text, not inside a flex row. */
    position: static;
    top: 0;
    margin: 0 4px 0 0;
}
/* Expired: amber */
#warning_bar.osta-staging-expired {
    background: #f59e0b;
    color: #1e1400;
}
/* Expiring soon: blue */
#warning_bar.osta-staging-expiring {
    background: #2196f3;
    color: #fff;
}
/* License welcome (empty-state install): same blue as Expiring Soon — informational */
#warning_bar.osta-license-welcome {
    background: #2196f3;
    color: #fff;
}
#warning_bar.osta-license-welcome a {
    color: #fff;
    text-decoration: underline;
}
/* White icons on the blue variants (staging-expiring + license-welcome) — the
   staging-bar default icon fill is dark, which is right for amber but unreadable on blue. */
#warning_bar.osta-staging-expiring i.icon-info-sign,
#warning_bar.osta-staging-expiring i.icon-remove,
#warning_bar.osta-license-welcome i.icon-info-sign,
#warning_bar.osta-license-welcome i.icon-remove {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z'/%3E%3C/svg%3E") !important;
}
#warning_bar.osta-staging-expiring i.icon-remove,
#warning_bar.osta-license-welcome i.icon-remove {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z'/%3E%3C/svg%3E") !important;
}
#warning_bar.osta-staging-bar i.icon-info-sign:before,
#warning_bar.osta-staging-bar i.icon-remove:before {
    display: none !important;
    content: '' !important;
}
#warning_bar.osta-staging-bar i.icon-info-sign,
#warning_bar.osta-staging-bar i.icon-remove {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: 16px 16px !important;
    position: relative;
    top: 3px;
}
#warning_bar.osta-staging-bar i.icon-info-sign {
    margin: -3px 4px 0 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%231e1400' d='M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z'/%3E%3C/svg%3E");
}
#warning_bar.osta-staging-bar i.icon-remove {
    margin: -1px -2px 0 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%231e1400' d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z'/%3E%3C/svg%3E");
}

/* Staging status badges inside license section */
.osta-badge-staging-expired {
    background: #fff8e1;
    color: #8d6e00;
    border: 1px solid #ffe082;
}
.osta-badge-staging-expired .osta-badge-dot {
    background: #f59e0b;
}
.osta-badge-staging-expired a {
    color: #8d6e00;
    font-weight: 600;
    margin-left: 8px;
    text-decoration: none;
}
.osta-badge-staging-expired a:hover {
    text-decoration: underline;
}
.osta-badge-staging-expiring {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
}
.osta-badge-staging-expiring .osta-badge-dot {
    background: #2196f3;
}
.osta-license-staging-info {
    font-size: 12px;
    color: #888;
    margin: 8px 0;
    line-height: 1.5;
}
/* License expired: bright red, white text */
#warning_bar.osta-license-expired {
    background: #dc2626;
    color: #fff;
}
#warning_bar.osta-license-expired a {
    color: #fff !important;
    font-weight: 700;
    text-decoration: underline;
}
#warning_bar.osta-license-expired a:hover {
    opacity: 0.85;
}
#warning_bar.osta-license-expired i.icon-info-sign {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z'/%3E%3C/svg%3E") !important;
}






@media (max-width: 860px) {
	#left-logo {
		max-width: 246px;
		height: 34px;
		margin: 12px 11px;
		display: block;
	}
	#header-constrain #header-image img {
		height: initial !important;
		max-height: 34px;
		max-width: 100%;
		display: block !important;
	}
	#header-image {
		display: block;
		position: relative;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
}
/* =============================================================
   osAwesome Settings — -106 rebuild
   Page heading, license gating (dim + nag bar), single segmented
   radios, named color presets, Branding text fields, Behavior tab
   sections, License tab restructure, Tier 3 surfaces (toasts,
   Invalid state, Revoke ghost button, Copy-key, lifecycle banners,
   debug panel). Forward-compat naming with osta- prefix so the
   Custom Code plugin can inherit these conventions.
   ============================================================= */

/* ---- 1. Tab gating wrapper ----------------------------------------- */
/* The dim is signage, not enforcement — settings still save and the
   tab strip itself stays at full opacity (navigation never dims).
   Compound effect (opacity + desaturation) reads unambiguously as
   "deliberately understated" rather than "loading" or "disabled". */
.osta-tab-body {
    /* default: full opacity */
}
.osta-tab-body.osta-tab-unactivated {
    opacity: 0.7;
    filter: saturate(0.7);
    transition: opacity 200ms ease, filter 200ms ease;
}
.osta-tab-body.osta-tab-unactivated input,
.osta-tab-body.osta-tab-unactivated button,
.osta-tab-body.osta-tab-unactivated select,
.osta-tab-body.osta-tab-unactivated textarea {
    /* preserve interactivity; the dim is purely visual */
}

/* ---- 3. License nag bar (top of every non-License tab when gated) -- */
.osta-license-nag {
    background: #ffffff;
    color: #000;
    text-align: center;
    padding: 12px 16px;
    border: 1px #ccc solid;
    border-radius: 4px;
    margin: 16px 0 24px 0;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: initial;
}
.osta-license-nag-icon {
    font-size: 18px;
    line-height: 1;
}
.osta-license-nag-copy {
    flex: 1 1 auto;
    line-height: 1.45;
    font-size: 14px;
    padding: 2px 0 0 0;
}
.osta-license-nag-copy strong {
    font-weight: 600;
    margin-right: 4px;
}
.osta-license-nag-cta {
    display: inline-block;
    background: #4293f7;
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 3px;
    font-weight: 400;
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
    flex: 0 0 auto;
}
.osta-license-nag-cta:hover {
    background: #387dd3;
    color: #ffffff;
    text-decoration: none;
}

/* ---- 4b. Background cards (Login bg variant) ----------------------
   Hybrid of the pre-106 card layout (title + preview swatch) without
   the toggle switches. Each card is a clickable label wrapping a
   hidden radio. The selected card highlights its border and bolds
   its title. The Header bg tab keeps the chip-style segmented radio. */
#content.theme .osta-bg-cards {
    display: flex;
    gap: 20px;
}
/* Login Page tab needs breathing room before the 12-preset gallery
   below; Appearance tab's Header bg cards have section-level spacing
   doing that work, so margin-bottom only applies in #backdrops. */
#content.theme #backdrops .osta-bg-cards {
    margin-bottom: 22px;
}
#content.theme .osta-bg-card {
    flex: 0 0 auto;
    display: block;
    /* `position: relative` contains the absolutely-positioned hidden
       radio. Without it, the radio's containing block climbs to <body>
       and clicking the label causes the browser to scroll-into-view to
       wherever the radio's static position resolved (near the page top).
       Saved Stevland feedback: no scroll-to-top on toggle. */
    position: relative;
    padding: 10px;
    border: 1px solid #ddd;
    /* background: #fff; */
    cursor: pointer;
    margin: 0;
    transition: border-color 120ms ease;
}
#content.theme .osta-bg-card:hover {
    border-color: #bbb;
}
#content.theme .osta-bg-card.is-selected {
    border-color: #5a5a5a;
}
#content.theme .osta-bg-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
/* Suppress the global `input[type="radio"]:checked + div { outline }`
   rule (line 10181) — the title is the first div sibling after the
   hidden radio, so it lights up unintentionally. */
#content.theme .osta-bg-card input[type="radio"]:checked + .osta-bg-card-title {
    outline: none;
}
#content.theme .osta-bg-card-title {
    font-size: 15px;
    font-weight: 500;
    color: #4a5560;
    margin-bottom: 10px;
}
#content.theme .osta-bg-card.is-selected .osta-bg-card-title {
    color: #1f4f7a;
    font-weight: 600;
}
#content.theme .osta-bg-card-swatch {
    width: 327px;
    height: 64px;
    background-color: var(--header-bg);
    background-size: cover;
    background-position: center;
    border: .5px solid #ddd;
    opacity: .5;
}
#content.theme .osta-bg-card.is-selected .osta-bg-card-swatch {
    opacity: 1;
}
#content.theme .osta-bg-card-swatch:hover {
    opacity: 1;
}

/* ---- 5. Named color presets ----------------------------------------
   The label is positioned absolutely inside the card-lid's top white
   space so it's visible without modifying the card's overflow:hidden
   (which clips the sliding lid on hover). Sits above the colored
   swatch trio at z-index above the lid background. */
.theme-card { position: relative; }
.theme-card .osta-preset-label {
    position: absolute;
    top: 14px;
    left: 0;
    right: 0;
    z-index: 3;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    color: #a5adb6;
    font-weight: 600;
    letter-spacing: 0.02em;
    pointer-events: none;
    transition: transform 0.3s ease, color 0.3s ease, font-size 0.3s ease;
}
.theme-card:hover .osta-preset-label {
    color: #2a3540;
    transform: translateY(-25px);
    font-size: 9px;
}

/* Color preset grid — grid auto-fill + space-evenly so cards distribute
   evenly across whatever container width is available, instead of
   leaving a leftover-space gap on the right edge (the classic
   fixed-width-floats-in-fluid-container pattern).
   - `display: contents` on the legacy `<ul id="styleOptions">` wrappers
     makes them transparent for layout while keeping them in the DOM
     for the existing styleSwitcher() jQuery plugin.
   - cards lose float/margin so they participate in the grid cleanly. */
#content.theme #choose-theme-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, 184px);
    gap: 20px;
    justify-content: space-evenly;
}
#content.theme #choose-theme-options ul {
    display: contents;
}
#content.theme #choose-theme-options .theme-card {
    float: none;
    margin: 0;
}

/* ---- 6. Branding tab — Logo Options 50/50 split -------------------- */
/* Top section: 3 toggle cards (osTA Logo / Custom Text / Custom Logo)
   in the left column, Custom Print Logo card in the right column. */
#content.theme .osta-branding-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}
#content.theme .osta-branding-col {
    min-width: 0;
}
/* Override legacy `#logo-options .container { float; width: 372px }` so
   the toggle/print cards fill their grid column instead of floating
   side-by-side at a fixed pixel width. */
#content.theme #logo-options .osta-branding-col table.container {
    float: none;
    width: fit-content;
    max-width: none;
    margin: 0 0 20px 0;
}
/* Logo-type cards (osTA Logo / Custom Text / Custom Logo) — hide their
   toggle switches; the whole card is the click target instead. (Print
   Logo on the right keeps its toggle since it's an enable/disable
   checkbox, not a radio-select.) */
#content.theme #logo-options #logo-type table.container {
    cursor: pointer;
}
#content.theme #logo-options #logo-type table.container td.right {
    display: none;
}
#content.theme #logo-options .osta-branding-col table.container:last-child {
    margin-bottom: 0;
}
@media (max-width: 720px) {
    #content.theme .osta-branding-grid {
        grid-template-columns: 1fr;
    }
}

/* Header & Mobile text overlays — now wrapped in .osta-tab-section, so
   the border + margins it used to draw on its own are gone. */
.osta-branding-text {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.osta-branding-text > h2 {
    margin: 0 0 16px 0;
}
/* row-one / row-two wrappers collapse out of the layout so their card
   children become direct grid items of .osta-branding-text. Single
   source of column truth lives on the parent grid. */
.osta-branding-text #row-one,
.osta-branding-text #row-two {
    display: contents;
}
.osta-branding-text .custom-text-container {
    /* override legacy float + 80px right margin from .custom-text-container
       at line 9951 (pre-grid era) */
    float: none;
    margin: 0;
}
@media (max-width: 1199px) {
    .osta-branding-text { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 899px) {
    .osta-branding-text { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
    .osta-branding-text { grid-template-columns: 1fr; }
}

.osta-old-osticket-block {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed #e5e9ed;
}

/* ---- 8. License tab — promote/demote layout ------------------------ */
.osta-license-card {
    background: #fff;
    border: 1px solid #e5e9ed;
    border-radius: 6px;
    padding: 24px 28px;
    margin: 16px 0 24px 0;
}
.osta-license-primary {
    margin-bottom: 32px;
}
.osta-license-secondary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e5e9ed;
}
.osta-section-compact {
    /* Demoted system info — smaller, lower-emphasis. */
}
.osta-section-compact h3.osta-section-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6a737d;
    margin: 0 0 8px 0;
    font-weight: 600;
}
.osta-section-compact .osta-info-row {
    font-size: 13px;
}

.osta-license-acks {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #e5e9ed;
    text-align: center;
    font-size: 13px;
    color: #6a737d;
}
.osta-license-acks h3 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6a737d;
    margin: 0 0 12px 0;
    font-weight: 600;
}
.osta-license-acks .osta-ack-links {
    line-height: 2;
}
.osta-license-acks #thank-you {
    margin-top: 16px;
}

/* ---- 9. Tier 3 — toasts ------------------------------------------- */
.osta-toast-host {
    position: relative;
    pointer-events: none;
}
.osta-toast {
    pointer-events: auto;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translate(-50%, -10px);
    background: #2a3540;
    color: #fff;
    padding: 10px 18px;
    border-radius: 4px;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    opacity: 0;
    transition: opacity 200ms ease, transform 200ms ease;
    z-index: 100;
    max-width: 480px;
    cursor: pointer;
}
.osta-toast.is-shown {
    opacity: 1;
    transform: translate(-50%, 0);
}
.osta-toast-success { background: #7EB900; }
.osta-toast-info    { background: #2563EB; }
.osta-toast-error   { background: #DC2626; }

/* ---- 10. Tier 3 — Invalid state ----------------------------------- */
.osta-state-invalid .osta-license-invalid-heading {
    margin: 0 0 12px 0;
    font-size: 18px;
    color: #2a3540;
    font-weight: 600;
}
.osta-state-invalid .osta-license-invalid-key {
    color: #4a5560;
    margin-bottom: 10px;
}
.osta-state-invalid .osta-license-invalid-key code {
    background: #f4f6f8;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: #2a3540;
}
.osta-state-invalid .osta-license-invalid-causes {
    margin: 8px 0 16px 22px;
    color: #4a5560;
    line-height: 1.7;
}
.osta-state-invalid .osta-license-invalid-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ---- 11. Tier 3 — Revoke red ghost button ------------------------- */
.osta-license-btn-ghost-danger {
    background: transparent;
    border: 1px solid #c9484c;
    color: #c9484c;
    padding: 7px 14px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.osta-license-btn-ghost-danger:hover {
    background: #c9484c;
    color: #fff;
}

/* ---- 12. Tier 3 — Copy-key button --------------------------------- */
.osta-btn-copy-key {
    /* Shares .osta-license-btn-secondary base; small visual tweaks. */
}
.osta-btn-copy-key.is-copied {
    background: #1f7a48;
    color: #fff;
    border-color: #1f7a48;
}
.osta-btn-copy-key i {
    margin-right: 6px;
}

/* ---- 13. Tier 3 — Lifecycle banners ------------------------------- */
.osta-lifecycle-banners {
    margin: 12px 0 16px 0;
}
.osta-lifecycle-banner {
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.5;
}
.osta-lifecycle-banner.osta-banner-warning {
    background: #fff8e1;
    border: 1px solid #f0d878;
    color: #6a4a00;
}
.osta-lifecycle-banner.osta-banner-info {
    background: #eef3f8;
    border: 1px solid #cfdce8;
    color: #2a3540;
}
.osta-lifecycle-banner a {
    margin-left: 6px;
    font-weight: 500;
}

/* ---- 14. Tier 3 — Debug panel ------------------------------------- */
.osta-debug-panel {
    margin-top: 24px;
    padding: 14px 18px;
    background: #f4f6f8;
    border: 1px solid #cfd6dc;
    border-radius: 4px;
    font-size: 13px;
}
.osta-debug-panel > summary {
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
}
.osta-debug-content {
    margin-top: 8px;
}
.osta-debug-hint {
    color: #6a737d;
    margin-bottom: 8px;
}
.osta-debug-panel pre {
    background: #fff;
    border: 1px solid #e5e9ed;
    border-radius: 3px;
    padding: 10px;
    font-size: 12px;
    line-height: 1.45;
    max-height: 360px;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.osta-debug-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ---- 15. Inline hint / error ------------------------------------- */
.osta-license-hint-inline {
    margin-top: 6px;
    padding: 6px 10px;
    background: #f4f6f8;
    border: 1px solid #cfd6dc;
    border-radius: 3px;
    color: #4a5560;
    font-size: 13px;
}

/* ---- 16. Button loading spinner (§13.4) -------------------------- */
.osta-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: osta-spin 700ms linear infinite;
    vertical-align: middle;
}
@keyframes osta-spin {
    to { transform: rotate(360deg); }
}
.osta-btn-loading {
    cursor: wait;
}

/* ---- 17. Responsive collapse for narrow viewports ---------------- */
@media (max-width: 720px) {
    .osta-license-nag {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    /* Mobile collapse handled by `.osta-branding-grid` grid-template
       at the same breakpoint; selectors targeting the retired table
       layout are no-ops now. */
    .osta-branding-text #row-one,
    .osta-branding-text #row-two {
        flex-direction: column;
    }
}

/* ---- 18. Hide the retired #text-links anchor target -------------- */
#text-links {
    display: none !important;
}