@media screen and (min-width: 0px) {

    @media only screen and (max-width: 760px) {
        #header #osticket-home {
            display: none !important;
        }
    }

    #basic_search form[action="banlist.php"] .attached.input button.attached.button {
        position: initial;
    }

    #content {
        /* JHi, Lindner - Anpassung Breite osTicket in Prozent statt fixe Pixelbreite */
        min-width: 900px !important;
        width: 80% !important;
        margin: 87px auto !important;
        padding-top: 1% !important;
        max-width: none !important;
        /*******************************************************************************/
    }
    #header {
        /* JHi, Lindner - Fixierung der Navigation */
        position: fixed !important;
    }
    #left-logo {
        width: 100px !important;
    }
    div#sub_nav-wrap {
        /* JHi, Lindner - Fixierung der Navigation */
        margin: 0 auto !important;
        position: fixed !important;
        top: 49px !important; /* osta/Linder Header Navigation Project */
        z-index: 3 !important;
        width: 100% !important;
        height: 27px !important;
    }
    div#sub_nav-wrap2 {
        /* JHi, Lindner - Fixierung der Navigation */
        margin: 0 auto !important;
        /* width: 80% !important; */ /* osta/Linder Header Navigation Project */
    }
    #sub_nav {
        /* JHi, Lindner - Anpassung Breite osTicket in Prozent statt fixe Pixelbreite */
        /*min-width: 900px !important;*/
        /*width: 100% !important;*/
        margin: 0 !important;
        max-width: none !important;
		position: relative;  /* osta/Linder Header Navigation Project */
		top: 2px;  
        /*******************************************************************************/
    }
    div#sub_nav-wrap.sub-nav-two-rows {
        height: auto !important;
        min-height: 54px !important;
    }
    div#sub_nav-wrap.sub-nav-two-rows nav#customQ_nav > ul#sub_nav {
        white-space: normal !important;
        height: auto !important;
    }
    table.list tbody td.osta_priority {
        /* JHi, Lindner - Anpassung Layout */
        text-indent: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        /************************************/
    }

    #loginBody #blur {
        border-radius: 20px;
        opacity: .9;
        background: #fff;
    }

    #loginBody #login-password:after {
        opacity: .3;
    }

    #loginBody #login-userid {
        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.3)' 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-userid, #login-password {
        background-color: rgba(255, 255, 255, 1);
    }

    #loginBox button[type=submit], #loginBox input[type="submit"], #loginBox .primary.button {
        color: rgba(255, 255, 255, 1) !important;
    }

    #loginBody fieldset input:nth-child(2) {
        border-left: 1px solid rgba(0,0,0,0.2);
        background: rgba(255,255,255,1);
    }

    #loginBody fieldset input:nth-child(4) {
        border-left: 1px solid rgba(0,0,0,0.2);
        background: rgba(255,255,255,1);
    }
}

#loginBox h4 {
    font-size: 15px;
    text-shadow: none;
    font-family: monospace, courier;
    letter-spacing: initial;
    font-weight: 100;
}

#loginBox h3 {
    color: #4c5156;
    opacity: 1;
}

/* Client login must not inherit staff fixed-navigation layout rules */
body.client-side.login-page #container {
    min-width: 0 !important;
    width: 100% !important;
    top: 0 !important;
}
body.client-side.login-page #content {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-top: 56px !important;
}
body.client-side.login-page #header {
    position: relative !important;
}
body.client-side.login-page #sub_nav-wrap,
body.client-side.login-page #sub_nav-wrap2,
body.client-side.login-page #customQ_nav {
    display: none !important;
    position: static !important;
    top: auto !important;
    height: auto !important;
}
body.client-side.login-page #clientLogin {
    width: calc(100% - 32px) !important;
    max-width: 420px !important;
    margin: 20px auto !important;
    padding: 24px 16px !important;
    box-sizing: border-box !important;
    display: block !important;
}
body.client-side.login-page #clientLogin .client-staff-login-link {
    display: none !important;
}
@media only screen and (max-width: 900px) {
    body.client-side.login-page #header {
        display: none !important;
    }
    body.client-side.login-page #content {
        margin-top: 0 !important;
        padding-top: 16px !important;
    }
    body.client-side.login-page #clientLogin .client-staff-login-link {
        display: block !important;
    }
}
body.client-side.login-page #clientLogin label,
body.client-side.login-page #clientLogin input[type="text"],
body.client-side.login-page #clientLogin input[type="password"],
body.client-side.login-page #clientLogin #sign-in-button,
body.client-side.login-page #clientLogin .client-staff-login-link .button {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
body.client-side.login-page #clientLogin #sign-in-button {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 16px !important;
    padding: 10px 14px !important;
}

#header #nav .jh_new_version_message {
    color: #dddddd;
    font-weight: bold;
    padding-left: 30px;
}

/* Queue truncate: force ellipsis in list view */
.tickets-page table.list.queue .truncate {
    display: inline-block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100%;
}

.queue-long-content {
    display: block;
    max-width: 100%;
    white-space: normal;
}

.queue-long-content-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-width: 0;
    padding: 3px 4px;
    border: 1px solid #b9cbd8;
    border-radius: 4px;
    background: #f5f9fc;
    color: #1f5f8f !important;
    font-weight: 600;
    line-height: 1.15;
    text-decoration: none !important;
    text-align: center;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    box-sizing: border-box;
}

.queue-long-content-toggle:hover,
.queue-long-content-toggle:focus {
    border-color: #7ba8c9;
    background: #eaf4fb;
    color: #164a70 !important;
}

.queue-long-content-toggle [data-queue-long-content-label] {
    display: block;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

.queue-long-content-source,
.queue-long-content-source.hidden,
.queue-long-content-source[hidden] {
    display: none !important;
}

.queue-long-content-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(24, 38, 51, 0.16);
    box-sizing: border-box;
}

.queue-long-content-overlay.hidden,
.queue-long-content-overlay[hidden] {
    display: none !important;
}

.queue-long-content-dialog {
    position: relative;
    width: min(760px, calc(100vw - 48px));
    max-height: min(72vh, 640px);
    overflow: auto;
    border: 1px solid #c8d8e3;
    border-left: 4px solid #2f80b7;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(21, 39, 54, 0.28);
    color: #222;
    line-height: 1.45;
    box-sizing: border-box;
}

.queue-long-content-close {
    position: sticky;
    top: 0;
    float: right;
    width: 30px;
    height: 30px;
    margin: 8px 8px 0 8px;
    border: 1px solid #ccd8e1;
    border-radius: 4px;
    background: #f6f8fa;
    color: #43515c;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    z-index: 1;
}

.queue-long-content-close:hover,
.queue-long-content-close:focus {
    background: #eaf1f6;
    color: #1f5f8f;
}

.queue-long-content-dialog-body {
    display: block;
    padding: 18px 20px 20px;
}

.queue-long-content-dialog-body p:first-child {
    margin-top: 0;
}

.queue-long-content-dialog-body p:last-child {
    margin-bottom: 0;
}

.queue-long-content-dialog-body img,
.queue-long-content-dialog-body table {
    max-width: 100%;
}

.queue-long-content-dialog-body table {
    border-collapse: collapse;
}

@media only screen and (max-width: 760px) {
    .queue-long-content-overlay {
        align-items: flex-start;
        padding: 66px 10px 10px;
    }

    .queue-long-content-dialog {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 76px);
    }

    .queue-long-content-dialog-body {
        padding: 14px 14px 16px;
    }
}

/* Saved search: show column width input */
form#advsearch tbody.sortable-rows input[data-name="width"] {
    display: inline-block !important;
    width: 60px;
}

/* JHi, Lindner - Abgrenzung zwischen Prioritaet Eintraegen */
    td.osta_priority {
        width: 16px !important;
        border-top: 1px solid #fff !important;
        border-bottom: 1px solid #fff !important;
    }
    /*************************************************************/
    .sticky.bar.fixed .flush-right {
         /*JHi, Lindner - Fixierung der Navigation */
        background-color: inherit !important;
    }
    .sticky.bar.fixed {
        /* JHi, Lindner - Fixierung der Navigation */
        margin: 0 auto !important;
        padding: 17px 0 5px 0!important;
        width: 100% !important;
        z-index: 2 !important;
        border-bottom: 1px solid var(--nav-bar-bg) !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        /*box-shadow: none !important;*/
        box-shadow: 0 4px 2px -2px gray;
    }
    .sticky.bar.opaque.fixed .pull-left h2 a {
        /* JHi, Lindner - Fixierung der Navigation */
        /*color: inherit !important;*/
    }
    .sticky.bar.fixed .action-button,
    .sticky.bar.fixed .green.button {
        /* JHi, Lindner - Fixierung der Navigation */
        color: #898989;  /* osta fix */
        background-color: #fff !important;
        border: .5px solid #b9b9b9 !important;
    }
    .sticky.bar.fixed .flush-left h2 a {
        /* JHi, Lindner - Fixierung der Navigation */
        color: #128dbe !important;
    }
    .sticky.bar.opaque.fixed .pull-left.flush-left h2 a svg {
        fill: #8BCB0D !important;
    }

    #basic_search {
        margin: 0 !important;
        padding: 0 !important;
    }

    #login-title #header-default svg {
        /* JHi, Lindner - Anpassung Layout */
        width: 250px !important;
        height: 120px !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 {
        /* JHi, Lindner - Anpassung Layout */
        height: 36px !important;
        /************************************/
    }
    .tasks-page #content div[style="margin-bottom:20px; padding-top:5px;"] {
        /* JHi, Lindner - Anpassung Layout */
        margin: -36px 0 0 0 !important;
        /************************************/
    }
    div#header-constrain {
        /* JHi, Lindner - Anpassung Breite osTicket in Prozent statt fixe Pixelbreite */
        /* min-width: 900px !important; */ /* osta/Linder Header Navigation Project */
        /* width: 80% !important; */
        max-width: none !important;
        /*******************************************************************************/
    }
    #container {
        /* JHi, Lindner - Anpassung Breite osTicket in Prozent statt fixe Pixelbreite */
        min-width:960px !important;
        width: 100% !important;
	    position: relative;  /* osta/Linder Header Navigation Project */
		top: -2px;
        /*******************************************************************************/
    }
    #customQ_nav {
        /* JHi, Lindner - Anpassung Breite osTicket in Prozent statt fixe Pixelbreite */
        width: 100% !important;
        position: absolute !important;
        /*******************************************************************************/
    }
    /* JHi, Lindner - Dropdown Menu sah komisch aus wegen Einrueckung -> so schoener */
    .customQ-dropdown ul li > span.newItemQ:after {
        content:"";
        padding-right: 8px;
    }
    /**********************************************************************************/
    .customQ-dropdown ul li > span.newItemQ {
        /* JHi, Lindner - Dropdown Menu sah komisch aus wegen Einrueckung -> so schoener */
        padding: 0;
        /**********************************************************************************/
    }
    .jb-overflowmenu {
         max-width: initial !important;
    }
    table {
        /* JHi, Lindner - Anpassung Breite osTicket in Prozent statt fixe Pixelbreite */
        width: 100% !important;
        /*******************************************************************************/
    }
    .thread-entry .thread-body {
        /* JHi, Lindner - Eintraege in Threads verschoben */
        clear: both;
        position: relative;
        top: -11px;
        /***************************************************/
    }
    .thread-entry.email-source .thread-body {
        /* Email entries render tighter; don't shift body into the header. */
        top: 0;
    }

    .thread-entry .thread-body {
        width: calc(100% - 27px) !important;
    }

    .thread-entry .header .title {
        /*margin-left: -60px;*/
        z-index: 1;
        padding-right: 20px;
    }

.thread-entry .action-dropdown.anchor-right {
    right: 13px;
    top: 29px !important;
}

/* Ticket thread entry dropdowns must stack above neighboring entry headers */
#thread-items .thread-entry .header,
#thread-items .thread-entry .header .title {
    z-index: auto !important;
}
#thread-items .thread-entry .header {
    overflow: visible !important;
}
#thread-items .thread-entry .action-dropdown.anchor-right {
    z-index: 4000 !important;
}

    .sticky.bar.fixed {
        /* JHi, Lindner - Fixierung der Navigation */
        left: auto !important;
        /* top is calculated dynamically in scp.js based on header/subnav height */
        /*z-index: 6 !important;*/
        width: 100%;
        background-color: #f3f3f5 !important;
    }

    div[style="width:600px; padding: 2px 2px 0 5px;"] {
        max-width: 600px !important;
    }

    .tip_content {
        min-width: 600px !important;
        max-width: 1400px !important;
        width: 1000px !important;
    }

    .tip_content.faq > div > strong {
        margin-right: 40px !important;
        float: left !important;
        font-size: 1.5em !important;
        line-height: normal !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid #000 !important;
    }

    .tip_content.faq .thread-body {
        float: left !important;
        max-height: 1000px !important;
        overflow-y: auto !important;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        min-width: 300px;
    }

    ul.tabs:not(.threads) li a {
        line-height: 28px !important;
        padding-top: 0 !important;
    }

    ul.tabs i,
    ul.tabs i::before {
        display: inline-block !important;
        margin-top: inherit !important;
        top: 3px !important;
        padding-right: 5px !important;
        width: 15px !important;
        height: 15px !important;
        background-size: 15px !important;
    }

    ul.tabs i.icon-bolt,
    ul.tabs i.icon-bolt::before {
        top: 0 !important;
    }

    ul.tabs li:not(.active){
        box-shadow: none !important;
        top: 0 !important;
    }

    ul.tabs li.active {
        /*top: 0 !important*/
    }

    #post-note-tab::before,
    #post-reply-tab::before {
        top: 3px !important;
        height: 15px !important;
        width: 15px !important;
        background-size: 15px !important;
    }

    .thread-event .type-icon i.icon-pencil {
        top: 0 !important;
        background-position: 0 !important;
        margin: 0 !important;
    }
    .thread-event .type-icon {
        width: 20px;
        height: 20px;
    }

.thread-entry.message .header {
    /*JH: Bug FIX in 1.12-103*/
    /*https://osticketawesome.com/forums/topic/no-option-menu-at-clients-messages-in-a-ticket-thread/*/
    overflow: inherit !important;
    z-index: auto !important;
}

    .ticket_info td {
        padding: 5px 8px !important;
    }
    .ticket_info tr:last-child td {
        padding-bottom: 5px !important;
    }

    #ticket-entries .merge-tickets {
        overflow-x: hidden;
        height: initial;
    }

        /* STAFF - THREAD PREVIEW */
    /******** Start Thread Preview Styles ********/
    .thread-preview {
        max-height:350px;
        overflow-x:auto;
        margin:5px 0px;
    }
    .thread-preview-entry {
        margin-bottom:5px;
    }
    .thread-preview-entry:first-child {
        margin-bottom:5px;
        margin-top:5px;
    }
    /***Types of headers***/
    .thread-preview-entry.message .header {
        background-color:#C3D9FF;
    }

    .thread-preview-entry.response .header {
        background-color:#FFE0B3;
    }
    .thread-preview-entry.message .header .thread-name span:first-child,
    .thread-preview-entry.response .header .thread-name span:first-child {
        color:#000;
    }
    /***Collapsed CSS***/

    .thread-preview-entry.collapsed {
        background-color:#f7f7f7;
        margin-bottom: 5px !important;
        cursor:pointer;
    }
    .thread-preview-entry.collapsed:first-child {
        margin-bottom:0px;
        margin-top:0px;
    }
    .thread-preview-entry.collapsed.message .header,
    .thread-preview-entry.collapsed.response .header {
        background-color:#f7f7f7;
        border-bottom:1px solid #f7f7f7;
    }
    .thread-preview-entry.collapsed.message .header .thread-name span:first-child {
        color:#0088cc;
    }

    .thread-preview-entry.collapsed.response .header .thread-name span:first-child {
        color:#e65524;
    }
    .thread-preview-entry.collapsed .thread-body {
        background-color:#f7f7f7;
        padding-top:0;
        border-left:1px solid #ccc;
        border-right:1px solid #ccc;
        height:20px;
        overflow:hidden;
        padding-bottom:10px;
    }
    .thread-preview-entry.collapsed .thread-body .thread-teaser {
        width: auto;
        display: inline-block;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: bottom;
    }

    /***Thread information styles***/
    .thread-info {
        width:100%;
    }
    .thread-preview .thread-name {
        padding-left: 30px;
        padding-top: 3px;
    }
    .thread-preview .thread-name span:first-child {
        font-weight:bold;
    }

    .thread-preview .avatar,
    .tip_content img.avatar{
        height: 25px !important;
        width: 25px !important;
        float: left;
    }

    /***Overrides***/

    .thread-preview #thread-items::before {
        display:none;
    }
    .thread-preview-entry .header {
        padding: 8px 0.9em;
        border: 1px solid #ccc;
        border-color: rgba(0,0,0,0.2);
        border-radius: unset;
        cursor:pointer;
    }
    .thread-preview-entry .thread-body {
        border: 1px solid #ddd;
        border-top: none;
        border-bottom: 1px solid #ccc;
        border-radius: unset;
        padding-bottom:10px;
        height:auto;
        overflow:visible;
    }
    .thread-preview-entry .thread-body .thread-teaser {
        width: auto;
        display: block;
        max-width: 100%;
        white-space:normal;
        overflow: visible;
        text-overflow:inherit;
        vertical-align:bottom;
    }
    /******** End Thread Preview Styles ********/

    .tip_content {
        margin-left: 15px !important;
    }

    .dot {
        display: inline-block !important;
    }

    .osta.show.overdueTicket-container {
        padding-right: 10px !important;
    }

    /* ==========================================================================
     SCROLL TO BOTTOM
    ========================================================================== */
    #scroll-to-top {
        bottom: 90px !important;
    }
    #scroll-to-bottom {
        visibility: visible;
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 99;
        font-size: 18px;
        border: none;
        outline: none;
        background-color: var(--header-bg);
        color: var(--header-title-color);
        cursor: pointer;
        padding: 15px;
        border-radius: 4px;
        opacity: 0.5;
        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-bottom:hover {
        opacity: 1 !important;
    }
    #scroll-to-bottom svg {
        fill: var(--header-title-color);
    }

    #response_options > form {
        border-top: .5px solid #cfd4d6 !important;
        border-radius: 6px;
    }

    /* CLIENT */

    #clientLogin {
        width: 450px !important;
        background: #e7e7e9 !important;
        /*padding: 30px;*/
        margin: auto !important;
        padding: 40px;
        box-shadow: 10px 10px 5px -8px rgba(0,0,0,0.1) !important;
        border-radius: 5px !important;
        -webkit-box-shadow: 10px 10px 5px -8px rgba(0,0,0,0.1) !important;
        -moz-box-shadow: 10px 10px 5px -8px rgba(0,0,0,0.1) !important;
        display: -webkit-box !important;
    }

    .sidebar {
        max-width: none !important;
        margin: 0 !important;
        padding: 15px !important;
    }

    #pre-footer-inner {
        padding: 0 !important;
    }

    #pre-footer-inner input.search{
        width: calc(100% - 15px - 110px) !important;
    }

    #pre-footer-inner .form-wrapper input{
        padding: 0 0 0 10px !important;
        height: 33px !important;
    }

    #pre-footer-inner #information {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    #pre-footer-inner #information section div {
        margin-top: 10px !important;
    }

    #more-options {
        margin-top: 0 !important;
    }

    .span8 .popular-faq {
        padding-left: 20px !important;
    }

    .searchbar input[type="text"] {
        background-color: #f3f3f3 !important;
        margin-bottom: 10px !important;
    }

    #ticketTable td {
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }
    #ticketTable th, #ticketTable td {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    #ticketTable tr th:nth-child(1),
    #ticketTable tr td:nth-child(1) {
        width: 5% !important;
    }
    #ticketTable tr th:nth-child(2),
    #ticketTable tr td:nth-child(2) {
        width: 10% !important;
    }
    #ticketTable tr th:nth-child(3),
    #ticketTable tr td:nth-child(3) {
        width: 10% !important;
    }
    #ticketTable tr th:nth-child(4),
    #ticketTable tr td:nth-child(4) {
        width: 5% !important;
    }
    #ticketTable tr th:nth-child(5),
    #ticketTable tr td:nth-child(5) {
        width: 55% !important;
    }
    #ticketTable tr th:nth-child(6),
    #ticketTable tr td:nth-child(6) {
        width: 10% !important;
    }

    #faq ol li {
        padding: 0 !important;
        clear: left !important;
    }

    #faq .icon-file-alt {
        float: left !important;
    }

    #faq ol li a, .faq-page #faq ol li {
        background-image: none !important;
    }

    table.list.queue.tickets th:first-child {
        background-position: center !important;
    }

    table.list.queue.tickets td:first-child {
        padding-right: 10px !important;
    }

    .tickets-page .queue-width-wrap {
        width: var(--queue-width, 100%);
        max-width: min(var(--queue-max-width, 100%), calc(100vw - 24px));
        margin-left: auto;
        margin-right: auto;
    }

    .tickets-page #container,
    .tickets-page #pjax-container,
    .tickets-page #content {
        min-width: 0 !important;
    }
    @media only screen and (max-width: 1100px) {
        .tickets-page #container,
        .tickets-page #pjax-container,
        .tickets-page #content {
            width: 100% !important;
            max-width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            box-sizing: border-box !important;
        }
        .tickets-page .queue-width-wrap {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
    }

    .tickets-page table.list.queue.tickets {
        width: 100% !important;
        max-width: 100%;
        table-layout: fixed;
    }
    /* Queue tables: keep one consistent default text size in normal mode */
    .tickets-page .queue-width-wrap table.list.queue.tickets thead th,
    .tickets-page .queue-width-wrap table.list.queue.tickets thead th a,
    .tickets-page .queue-width-wrap table.list.queue.tickets tbody td,
    .tickets-page .queue-width-wrap table.list.queue.tickets tbody td a,
    .tickets-page .queue-width-wrap table.list.queue.tickets tbody td small,
    .tickets-page .queue-width-wrap table.list.queue.tickets tbody td .date-text,
    .tickets-page .queue-width-wrap table.list.queue.tickets tbody td.osta_username,
    .tickets-page .queue-width-wrap table.list.queue.tickets a.preview,
    .tickets-page .queue-width-wrap table.list.queue.tickets a.preview b {
        font-size: 13px !important;
    }
    .tickets-page .queue-width-wrap .queue-table-scale-anchor {
        width: 100%;
        overflow: visible;
    }
    .tickets-page .queue-width-wrap .queue-table-scale-shell {
        width: 100%;
        transform-origin: top left;
    }
    .tickets-page .queue-width-wrap.queue-auto-fit .queue-table-scale-anchor {
        overflow-x: hidden;
    }
    .tickets-page .queue-width-wrap.queue-auto-fit .queue-table-scale-shell {
        width: calc(100% / var(--queue-table-scale, 1));
        transform: scale(var(--queue-table-scale, 1));
    }
    .tickets-page .queue-width-wrap.queue-auto-fit table.list.queue.tickets thead th.osta_priority,
    .tickets-page .queue-width-wrap.queue-auto-fit table.list.queue.tickets tbody td.osta_priority {
        width: 1% !important;
        min-width: 16px !important;
        max-width: 20px !important;
    }
    .tickets-page .queue-width-wrap .sticky.bar.fixed {
        width: var(--queue-width, 100%) !important;
        max-width: var(--queue-max-width, 100%) !important;
    }
    .tickets-page .queue-width-wrap .sticky.bar.fixed .content::after {
        content: "";
        display: table;
        clear: both;
    }
    .tickets-page .queue-width-wrap .sticky.bar.fixed .pull-right.flush-right.page-top {
        display: block !important;
        float: right !important;
    }
    .tickets-page .queue-width-wrap .sticky.bar .pull-right.flush-right.page-top {
        max-width: 100%;
    }
    .tickets-page .queue-width-wrap .sticky.bar .pull-right.flush-right.page-top form[action="tickets.php"] {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
        max-width: 100%;
    }
    .tickets-page .queue-width-wrap .sticky.bar .pull-right.flush-right.page-top form[action="tickets.php"] .attached.input {
        display: inline-flex !important;
        align-items: stretch;
        margin-right: 0;
        max-width: 100%;
    }
    .tickets-page .queue-width-wrap .sticky.bar .pull-right.flush-right.page-top form[action="tickets.php"] .input.attached button.attached.button {
        display: none !important;
    }
    .tickets-page .queue-width-wrap .sticky.bar .pull-right.flush-right.page-top form[action="tickets.php"] .input.attached:focus-within button.attached.button {
        display: inline-block !important;
    }
    .tickets-page .queue-width-wrap .sticky.bar .pull-right.flush-right.page-top form[action="tickets.php"] .input.attached input {
        min-width: 0;
        max-width: min(220px, calc(100vw - 180px));
    }
    .tickets-page .queue-width-wrap .sticky.bar.opaque.fixed form[action="tickets.php"] .attached.input,
    .tickets-page .queue-width-wrap .sticky.bar.opaque.fixed form[action="tickets.php"] .action-button.advanced-search.gray-light2 {
        display: inline-block !important;
    }
    .tickets-page .queue-width-wrap .sticky.bar form[action="tickets.php"] .input.attached button.attached.button,
    .tickets-page .queue-width-wrap .sticky.bar.opaque.fixed form[action="tickets.php"] .input.attached button.attached.button {
        position: static !important;
        left: auto !important;
        top: auto !important;
        flex: 0 0 36px;
    }
    .tickets-page table.list.queue.tickets td.osta_ticket {
        white-space: normal;
    }
    .tickets-page table.list.queue.tickets td.osta_ticket .ticket-num {
        white-space: nowrap;
        display: inline-block;
    }
    .tickets-page table.list.queue.tickets td.osta_ticket .pull-right {
        float: none;
        display: inline-block;
        margin-left: 4px;
    }

    /* Keep queue tickets as real table on narrow screens (disable mobile card layout) */
    @media only screen and (max-width: 760px) {
        .tickets-page table.list.queue.tickets {
            display: table !important;
            border-collapse: separate !important;
            width: 100% !important;
            border: 1px solid #cfd4d6 !important;
            border-radius: 6px !important;
            margin: 5px 0 0 0 !important;
            background: initial !important;
            background-color: #fff !important;
            border-spacing: 0 !important;
        }
        .tickets-page table.list.queue.tickets th.queue-col-mobile-hide,
        .tickets-page table.list.queue.tickets td.queue-col-mobile-hide,
        .tickets-page table.list.queue.tickets th.queue-col-select,
        .tickets-page table.list.queue.tickets td.checkbox-cell {
            display: none !important;
        }
        .tickets-page table.list.queue.tickets thead {
            display: table-header-group !important;
        }
        .tickets-page table.list.queue.tickets tbody {
            display: table-row-group !important;
        }
        .tickets-page table.list.queue.tickets tfoot {
            display: table-footer-group !important;
        }
        .tickets-page table.list.queue.tickets tr {
            display: table-row !important;
            margin: 0 !important;
            overflow: visible !important;
            border: 0 !important;
            border-left: 0 !important;
            border-radius: 0 !important;
            box-shadow: none !important;
        }
        .tickets-page table.list.queue.tickets th,
        .tickets-page table.list.queue.tickets td {
            display: table-cell !important;
        }
        .tickets-page table.list.queue.tickets th:not(.queue-col-priority):not(.queue-col-number):not(.queue-col-subject),
        .tickets-page table.list.queue.tickets td:not(.queue-col-priority):not(.queue-col-number):not(.queue-col-subject) {
            display: none !important;
        }
        .tickets-page table.list.queue.tickets thead tr {
            position: static !important;
            top: auto !important;
            left: auto !important;
        }
        .tickets-page table.list.queue.tickets thead th {
            background-color: #fff !important;
            color: #686868 !important;
            height: 30px !important;
            vertical-align: middle !important;
        }
        .tickets-page table.list.queue.tickets th:first-child {
            border-radius: 6px 0 0 0 !important;
            background-image: url(../icons/checkmark.svg) !important;
            background-repeat: no-repeat !important;
            background-position: center left 12px !important;
            background-size: 16px !important;
            height: 40px !important;
            width: 30px !important;
        }
        .tickets-page table.list.queue.tickets th:last-child {
            border-radius: 0 6px 0 0 !important;
        }
        .tickets-page table.list.queue.tickets thead th a {
            display: block !important;
            color: #128dbe !important;
            font-weight: normal !important;
            font-size: 16px !important;
            background: url(../../osta/icons/asc-desc.svg) 100% 50% no-repeat !important;
            background-size: 20px !important;
            margin: 0 !important;
            height: 30px !important;
            padding: 8px 0 2px 10px !important;
            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 !important;
            white-space: nowrap !important;
        }
        .tickets-page table.list.queue.tickets thead th a.asc {
            background: #cfe6ff url(../../osta/icons/asc.svg) 100% 50% no-repeat !important;
            background-size: 20px !important;
        }
        .tickets-page table.list.queue.tickets thead th a.desc {
            background: #cfe6ff url(../../osta/icons/desc.svg) 100% 50% no-repeat !important;
            background-size: 20px !important;
        }
        .tickets-page table.list.queue.tickets th:not(:first-child) a:hover {
            background: #cfe6ff url(../../osta/icons/asc-desc.svg) 100% 50% no-repeat !important;
            background-size: 20px !important;
        }
        .tickets-page table.list.queue.tickets tbody td {
            position: static !important;
            padding: 0 10px !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            font-size: 13px !important;
            border: initial !important;
            color: #686868 !important;
        }
        .tickets-page table.list.queue.tickets thead th.queue-col-priority,
        .tickets-page table.list.queue.tickets tbody td.queue-col-priority {
            width: 18px !important;
            min-width: 18px !important;
            max-width: 18px !important;
            padding: 0 !important;
        }
        .tickets-page table.list.queue.tickets thead th.queue-col-number,
        .tickets-page table.list.queue.tickets tbody td.queue-col-number {
            width: 86px !important;
            min-width: 86px !important;
            max-width: 86px !important;
            padding-left: 6px !important;
            padding-right: 6px !important;
        }
        .tickets-page table.list.queue.tickets thead th.queue-col-subject,
        .tickets-page table.list.queue.tickets tbody td.queue-col-subject {
            width: auto !important;
            min-width: 0 !important;
            max-width: none !important;
        }
        .tickets-page table.list.queue.tickets tbody td.osta_ticket {
            padding: 0 10px 0 4px !important;
            height: auto !important;
        }
        .tickets-page table.list.queue.tickets thead th,
        .tickets-page table.list.queue.tickets thead th a,
        .tickets-page table.list.queue.tickets tbody td.osta_username,
        .tickets-page table.list.queue.tickets tbody td .date-text,
        .tickets-page table.list.queue.tickets a.preview,
        .tickets-page table.list.queue.tickets a.preview b {
            font-size: 13px !important;
        }
        .tickets-page table.list.queue.tickets td:first-child {
            display: table-cell !important;
            float: none !important;
            width: auto !important;
            max-width: none !important;
            z-index: auto !important;
            border-bottom: initial !important;
        }
        .tickets-page table.list.queue.tickets td.osta_priority {
            visibility: visible !important;
        }
        .tickets-page table.list.queue.tickets input[type="checkbox"] {
            visibility: visible !important;
            margin: 0 !important;
        }
        .tickets-page table.list.queue.tickets tbody td::before {
            content: none !important;
            display: none !important;
        }
        .tickets-page table.list.queue.tickets tfoot tr {
            box-shadow: none !important;
            border: 0 !important;
        }
        .tickets-page table.list.queue.tickets tfoot td {
            margin: 0 !important;
            width: auto !important;
            height: auto !important;
            background: #fff !important;
        }
        .tickets-page table.list.queue.tickets ~ div {
            margin: 0 !important;
        }
        .tickets-page table.list.queue.tickets .osta_ticket div,
        .tickets-page table.list.queue.tickets .osta_number div {
            float: none !important;
        }
    }

    #header-inner {
        width: 80% !important;
    }

    #content {
        min-width: 900px !important;
        width: 80% !important;
        top: -44px !important;
    }

    #nav-inner {
        min-width: 900px !important;
        width: 80% !important;
    }

    #nav li {
        max-width: 80% !important;
    }

    #landing_page h1 {
        margin-left: 0 !important;
        top: 0 !important;
    }

    p.buttons {
        text-align: left !important;
    }

    #pre-footer {
        background: unset !important;
    }

    #pre-footer .form-wrapper {
        margin: 0 !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    #pre-footer-inner {
        width: 100% !important;
        padding: 0 !important;
    }

    .form-wrapper {
        padding: 0 !important;
    }

    .form-wrapper button {
        left: 0 !important;
        float: none !important;
    }

    /* JH: make link and merge icons in fixed sticky bar white, not blue*/
    .sticky.bar.fixed i.icon-link:before,
    .sticky.bar.fixed i.icon-code-fork:before {
        color: #128DBE !important;
        fill: #128DBE !important;
    }

    .sticky.bar.fixed a.pnt-mod svg {
        fill: #128dbe !important;
    }
    .sticky.bar.fixed i.icon-print {
        fill: #128dbe !important;
    }

    .sticky.bar.fixed a#tickets-link .icon-link:before {
        color: #128dbe !important;
    }

    #customQ_nav .jb-overflowmenu-menu-primary li.item a > i {
        top: -1px !important;
        opacity: 1 !important;
    }

    .ui-datepicker-multi-3 .ui-datepicker-group {
        width: 16em !important;
        padding-left: 10px !important;
    }

    .ui-datepicker-multi .ui-datepicker-group table {
        table-layout: fixed !important;
    }

    .ui-datepicker td span, .ui-datepicker td a {
        text-align: center !important;
    }

    #ui-datepicker-div {
        z-index: 2000 !important;
    }

}

/* JH: dirty; der osTicketAwesome Entwickler hat es tatsaechlich so implementiert...
    Sorgt dafür, dass sämtliche dynamische Überschriften in der mobilen Ansicht übersetzt sind
    TODO: regelmäßig überprüfen ob das noch so drinstehen muss...*/
@media screen and (max-width: 800px)
{
    .list td.osta_ticket:before {
        content: "Ticketnummer" !important;
    }
    .list td.osta_lastupdated:before {
        content: "Aktualisiert" !important;
    }
    .list td.osta_subject:before {
        content: "Betreff" !important;
    }
    .list td.osta_username:before {
        content: "Erstellt von" !important;
    }
    .list td.osta_assignee:before {
        content: "Zugewiesen an" !important;
    }
    .list td.osta_duedate:before {
        content: "Fälligkeitsdatum" !important;
    }
    .list td.osta_closedate:before {
        content: "Geschlossen am" !important;
    }
    .list td.osta_erstelltam:before {
        content: "Erstellt am" !important;
    }
    .list td.osta_hilfethema:before {
        content: "Hilfethema" !important;
    }
    .list td.osta_department:before {
        content: "Abteilung" !important;
    }
    .list td.osta_anfragetyp:before {
        content: "Anfragetyp" !important;
    }
    .list td.osta_software:before {
        content: "Software" !important;
    }
    .list td.osta_verantwortlicher:before {
        content: "Verantwortlicher" !important;
    }
    .list td.osta_team:before {
        content: "Team" !important;
    }

    #loginBox {
        top: 15px !important;
    }

    #loginBox #header-logo {
        display: none;
    }

    #loginBox button[type=submit], #loginBox input[type="submit"], #loginBox .primary.button {
        color: rgba(255,255,255,1) !important;
    }
}
/* JHi, Lindner - Uebersetzung im Code zugeordnet */
td.osta_priority.osta_priority_ultra {
    /***************************************************/
    background: url(../img/priority-pattern-overlay.png) #fc6872!important;
}
/* JHi, Lindner - Uebersetzung im Code zugeordnet */
td.osta_priority_hoch {
    /***********************************************/
    background: url(../img/priority-pattern-overlay.png) #e5bc61!important;
}
td.osta_priority_normal {
    background: url(../img/priority-pattern-overlay.png) #a5cb59!important;
}
/* JHi, Lindner - Uebersetzung im Code zugeordnet */
td.osta_priority_niedrig {
    /***************************************************/
    background: url(../img/priority-pattern-overlay.png) #5bb3f5!important;
}
/* Increase select2 dropdown height to show more options */
.select2-container--default .select2-results > .select2-results__options,
.select2-container--classic .select2-results > .select2-results__options {
    max-height: 400px;
}

/* Quick-add sort dialog: show missing title error and highlight field */
#popup form[action="#admin/quick-add/queue-sort"] .error {
    display: block !important;
    color: #a00;
    margin-top: 6px;
}
#popup form[action="#admin/quick-add/queue-sort"] fieldset.has-error input,
#popup form[action="#admin/quick-add/queue-sort"] fieldset.has-error select,
#popup form[action="#admin/quick-add/queue-sort"] fieldset.has-error textarea {
    border-color: #a00 !important;
    box-shadow: 0 0 0 1px rgba(160, 0, 0, 0.2);
}
/* Advanced search dialog tabs should stay clickable */
#popup .dialog#advanced-search {
    width: 920px !important;
    max-width: calc(100vw - 40px);
}
#advanced-search ul.tabs {
    position: relative;
    z-index: 2;
}
#advanced-search .tab_content {
    position: relative;
    z-index: 1;
}
#advanced-search .queue-sort .action-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
#advanced-search .queue-sort .sortable-rows tr {
    cursor: move;
}
#advanced-search .queue-sort .sort-handle {
    cursor: move;
}
/* Queue table sorting: show ranked direction only for active sort columns. */
.tickets-page table.list.queue.tickets thead th {
    overflow: hidden;
}
.tickets-page table.list.queue.tickets thead th a.queue-sort-link,
.tickets-page table.list.queue.tickets thead th a.queue-sort-link.asc,
.tickets-page table.list.queue.tickets thead th a.queue-sort-link.desc {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background-image: none !important;
    background-color: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.tickets-page table.list.queue.tickets thead th a.queue-sort-link.asc,
.tickets-page table.list.queue.tickets thead th a.queue-sort-link.desc {
    background-color: #cfe6ff !important;
}
.tickets-page table.list.queue.tickets th:not(:first-child) a.queue-sort-link:hover,
.tickets-page table.list.queue.tickets th:not(:first-child) a.queue-sort-link.asc:hover,
.tickets-page table.list.queue.tickets th:not(:first-child) a.queue-sort-link.desc:hover {
    background-image: none !important;
    background-color: #cfe6ff !important;
}
.tickets-page table.list.queue.tickets .queue-sort-label {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tickets-page table.list.queue.tickets .queue-sort-indicator {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 1px;
    color: #2d6383;
    line-height: 1;
}
.tickets-page table.list.queue.tickets .queue-sort-rank {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    min-width: 7px;
    text-align: right;
}
.tickets-page table.list.queue.tickets .queue-sort-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}
.tickets-page table.list.queue.tickets .queue-sort-arrow--asc {
    border-bottom: 6px solid currentColor;
}
.tickets-page table.list.queue.tickets .queue-sort-arrow--desc {
    border-top: 6px solid currentColor;
}
.dark-mode .tickets-page table.list.queue.tickets thead th a.queue-sort-link,
.dark-mode .tickets-page table.list.queue.tickets thead th a.queue-sort-link.asc,
.dark-mode .tickets-page table.list.queue.tickets thead th a.queue-sort-link.desc {
    background-image: none !important;
}
.dark-mode .tickets-page table.list.queue.tickets thead th a.queue-sort-link.asc,
.dark-mode .tickets-page table.list.queue.tickets thead th a.queue-sort-link.desc,
.dark-mode .tickets-page table.list.queue.tickets th:not(:first-child) a.queue-sort-link:hover {
    background-color: #22272f !important;
}
.dark-mode .tickets-page table.list.queue.tickets .queue-sort-indicator {
    color: #9baabe;
}
/* Queue ticket table checkbox alignment + click target */
table.list.queue.tickets .checkbox {
  position: relative;
  display: inline-block;
}
table.list.queue.tickets .checkbox input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  opacity: 0;
  z-index: 2;
}
table.list.queue.tickets .checkbox label {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  margin: 0;
  padding: 0;
}
table.list.queue.tickets .checkbox label::before,
table.list.queue.tickets .checkbox label::after {
  left: 0 !important;
  top: 0 !important;
}

/* Ticket reply collaborators: make multi-select wider and taller */
#ccs .select2-container.collabselection-container {
  width: 100% !important;
}
#ccs .select2-container--default.collabselection-container .select2-selection--multiple {
  min-height: 92px;
  max-height: 220px;
  overflow-y: auto;
}
.select2-container--open .select2-dropdown.collabselection-dropdown .select2-results__options {
  max-height: 65vh;
}

/* Fallback targeting for select2 container next to #collabselection */
#ccs select#collabselection {
  width: 100% !important;
  min-height: 120px;
}
#ccs select#collabselection + .select2-container {
  width: 100% !important;
  min-width: 0 !important;
}
#ccs select#collabselection + .select2-container .select2-selection--multiple {
  min-height: 120px !important;
  max-height: 260px;
  overflow-y: auto;
}
#ccs select#collabselection + .select2-container .select2-selection__rendered {
  display: block;
  max-height: 220px;
  overflow-y: auto;
}
#ccs select#collabselection + .select2-container .select2-selection__choice {
  white-space: normal;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
}

/* Typeahead custom fields: keep all matches, but use scrollable dropdown */
ul.typeahead.dropdown-menu.custom-field-typeahead {
  max-height: 55vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Dynamic compact mode for right header links (set via JS when wrapping starts) */
#header.header-right-compact #nav2 > a,
#header.header-right-compact #nav2 > span > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding-left: 6px !important;
  padding-right: 6px !important;
}
#header.header-right-compact #nav2 > a .header-link-label,
#header.header-right-compact #nav2 > span > a .header-link-label {
  display: none !important;
}

/* Compact header/sub navigation and sticky action menus */
#header #header-main-menu-toggle,
#sub_nav-wrap #subnav-compact-toggle,
#content .sticky.bar .sticky-compact-actions-toggle {
  display: none;
}

.compact-toggle-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #f2f4f7;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

.compact-toggle-button:hover,
.compact-toggle-button.is-open {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  color: #fff;
}

.compact-toggle-icon {
  display: inline-flex;
  width: 14px;
  height: 12px;
  position: relative;
}

.compact-toggle-icon::before,
.compact-toggle-icon::after,
.compact-toggle-icon span {
  background: currentColor;
  border-radius: 2px;
}

.compact-toggle-icon::before,
.compact-toggle-icon::after,
.compact-toggle-icon span {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 14px;
  height: 2px;
}

.compact-toggle-icon::before { top: 0; }
.compact-toggle-icon span { top: 5px; }
.compact-toggle-icon::after { top: 10px; }

.compact-popover {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 2100;
  width: min(380px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  background: #fff;
  border: 1px solid #d8dee5;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(28, 42, 58, 0.22);
  color: #243443;
  overflow: hidden;
}

.compact-popover.is-open {
  display: block;
}

.compact-popover-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #e8edf2;
  background: #f8fafc;
}

.compact-popover-title {
  flex: 1 1 auto;
  font-weight: 600;
  font-size: 14px;
  color: #223140;
}

.compact-popover-close,
.compact-popover-back {
  border: 0;
  background: transparent;
  color: #4b5a68;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  font: inherit;
}

.compact-popover-close:hover,
.compact-popover-back:hover {
  background: #e9eff5;
  color: #1f2d3a;
}

.compact-popover-close {
  font-size: 22px;
  line-height: 1;
}

.compact-popover-back-placeholder {
  width: 54px;
  flex: 0 0 54px;
}

.compact-menu-list,
.compact-queue-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.compact-menu-entry + .compact-menu-entry {
  border-top: 1px solid #edf2f6;
}

.compact-menu-link,
.compact-menu-sublink,
.compact-queue-link,
.compact-queue-drill {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #21313f;
  cursor: pointer;
  font: inherit;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
}

.compact-menu-link:hover,
.compact-menu-sublink:hover,
.compact-queue-link:hover,
.compact-queue-drill:hover {
  background: #f1f6fa;
  color: #17232f;
}

.compact-menu-sublist {
  list-style: none;
  margin: 0 0 8px;
  padding: 0 0 0 10px;
}

.compact-menu-sublink {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 13px;
  color: #516170;
}

.compact-queue-entry + .compact-queue-entry {
  margin-top: 4px;
}

.compact-queue-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.compact-queue-link,
.compact-queue-drill {
  flex: 1 1 auto;
}

.compact-queue-drill i {
  margin-left: auto;
  color: #7c8894;
}

.compact-menu-open-link {
  flex: 0 0 auto;
  align-self: center;
  padding: 9px 12px;
  border: 1px solid #d4dce4;
  border-radius: 8px;
  background: #fff;
  color: #24405a;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}

.compact-menu-open-link:hover {
  background: #f2f7fb;
  border-color: #c5d2dd;
}

.compact-queue-entry.is-pending .compact-queue-link,
.compact-queue-entry.is-pending .compact-queue-drill,
.compact-queue-entry.is-pending .compact-menu-open-link {
  color: #1f9d49;
  font-weight: 700;
}

#header.header-mainnav-compact #nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  top: 0;
  padding: 0 !important;
  background: transparent;
}

#header.header-mainnav-compact #nav > li,
#header.header-mainnav-compact #nav > a:not(#osticket-home):not(#header-main-menu-toggle) {
  display: none !important;
}

#header.header-mainnav-compact #header-main-menu-toggle {
  display: inline-flex;
  margin-left: 6px;
}

#header.header-mainnav-compact .compact-main-menu-panel {
  left: 0;
}

#sub_nav-wrap.sub-nav-compact {
  height: auto !important;
}

#sub_nav-wrap.sub-nav-compact #customQ_nav {
  display: none !important;
}

#sub_nav-wrap.sub-nav-compact > #sub_nav-wrap2 > ul#sub_nav {
  display: none !important;
}

#sub_nav-wrap.sub-nav-compact #sub_nav-wrap2 {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 27px;
}

#sub_nav-wrap.sub-nav-compact #subnav-compact-toggle {
  display: inline-flex;
  margin: 0 0 0 28px;
  min-height: 28px;
  padding: 4px 12px;
  border-color: #d2d8df;
  border-radius: 6px;
  background: #fff;
  color: #263544;
  box-shadow: 0 2px 8px rgba(28, 42, 58, 0.08);
}

#sub_nav-wrap.sub-nav-compact #subnav-compact-toggle:hover,
#sub_nav-wrap.sub-nav-compact #subnav-compact-toggle.is-open {
  background: #f1f6fa;
  color: #17232f;
}

#sub_nav-wrap .compact-subnav-panel {
  top: calc(100% + 6px);
  left: 8px;
  width: min(420px, calc(100vw - 24px));
}

#content .sticky.bar.sticky-actions-compact > .content {
  position: relative;
}

#content .sticky.bar .sticky-compact-anchor {
  display: none;
}

#content .sticky.bar.sticky-actions-compact .sticky-compact-anchor {
  position: relative;
  display: inline-flex;
  float: left;
  align-items: center;
  gap: 8px;
  margin: 3px 0 0 12px;
}

#content .sticky.bar.sticky-actions-compact .sticky-compact-actions-toggle {
  display: inline-flex;
  border-color: #ccd5de;
  background: #fff;
  color: #203040;
  box-shadow: 0 2px 8px rgba(28, 42, 58, 0.08);
}

#content .sticky.bar.sticky-actions-compact .sticky-compact-actions-toggle:hover,
#content .sticky.bar.sticky-actions-compact .sticky-compact-options-toggle:hover,
#content .sticky.bar.sticky-actions-compact .sticky-compact-options-toggle.is-open,
#content .sticky.bar.sticky-actions-compact .sticky-compact-actions-toggle.is-open {
  background: #f1f6fa;
  color: #16222e;
}

#content .sticky.bar.sticky-actions-compact .sticky-compact-options-toggle {
  display: inline-flex;
  border-color: #ccd5de;
  background: #fff;
  color: #203040;
  box-shadow: 0 2px 8px rgba(28, 42, 58, 0.08);
}

#content .sticky.bar .sticky-compact-actions-panel {
  top: calc(100% + 10px);
  left: 0;
  right: auto;
  width: min(430px, calc(100vw - 24px));
  overflow: visible;
}

#content .sticky.bar.sticky-actions-compact .sticky-compact-actions-panel {
  padding: 12px;
}

#content .sticky.bar .sticky-compact-options-panel {
  top: calc(100% + 10px);
  left: auto;
  right: 0;
  width: min(320px, calc(100vw - 24px));
  overflow: visible;
  padding: 10px;
}

#content .sticky.bar.sticky-actions-compact .sticky-compact-source-hidden {
  display: none !important;
}

#content .sticky.bar.sticky-actions-compact .sticky-compact-actions-panel,
#content .sticky.bar.sticky-actions-compact .sticky-compact-options-panel {
  padding: 8px;
}

#content .sticky.bar.sticky-actions-compact .sticky-compact-menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: min(68vh, 520px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

#content .sticky.bar.sticky-actions-compact .sticky-compact-menu-list li + li {
  border-top: 1px solid #edf2f6;
}

#content .sticky.bar.sticky-actions-compact .sticky-compact-menu-item {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color: #223140;
  font-size: 14px;
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
}

#content .sticky.bar.sticky-actions-compact .sticky-compact-menu-item:hover {
  background: #f1f6fa;
  color: #17232f;
}

/* Keep the new compact navigation active; suppress legacy mobile header/menu layers. */
#header-mobile,
#mobile_right_buttom,
#right_menu,
#nav-right,
#hidden-layer,
#top_menu {
  display: none !important;
}

#header #nav,
#header #nav2 {
  display: block !important;
}

#header.header-mainnav-compact #header-constrain {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#header.header-mainnav-compact #nav.pull-right,
#header.header-mainnav-compact #nav2.pull-right {
  display: flex !important;
  align-items: center;
  float: none;
  position: static;
  top: auto;
  bottom: auto;
  margin: 0;
}

#header.header-mainnav-compact #nav.pull-right {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 0 0 12px !important;
}

#header.header-mainnav-compact #nav2.pull-right {
  flex: 0 0 auto;
  padding: 0 12px 0 0 !important;
  gap: 2px;
}

#sub_nav-wrap,
#sub_nav-wrap2,
nav#customQ_nav {
  display: block !important;
}

/* Header notifications bell + drawer */
.table.two-column tr.notifications-settings-block > td {
  border-top: 1px solid #d7dde4;
  border-bottom: 1px solid #d7dde4;
  padding-top: 10px;
  padding-bottom: 10px;
}

.table.two-column tr.notifications-settings-focus > td {
  border-top: 2px solid #9fc7de;
  border-bottom: 2px solid #9fc7de;
  background: #f3f9fd;
}

.table.two-column tr.notifications-settings-focus > td:first-child {
  border-left: 4px solid #4b98c4;
}

#notifications-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
}

#notifications-badge {
  display: none;
  position: absolute;
  right: 2px;
  top: 8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9px;
  background: #d93025;
  color: #fff;
  font-size: 11px !important;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
}

#notifications-badge.is-visible {
  display: inline-block;
}

.ost-staff-mention {
  display: inline-block;
  max-width: 100%;
  padding: 2px 8px;
  margin: 0 1px;
  border: 1px solid #b7d5f3;
  border-radius: 999px;
  background: linear-gradient(180deg, #eef7ff 0%, #ddeffd 100%);
  color: #1d5a8a !important;
  font-weight: 600;
  font-size: 0.95em;
  line-height: 1.35;
  text-decoration: none !important;
  white-space: nowrap;
  vertical-align: baseline;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.ost-staff-mention:hover,
.ost-staff-mention:focus {
  color: #17476c !important;
  text-decoration: none !important;
}

.ost-staff-mention.is-selected {
  border-color: #278fd0;
  background: linear-gradient(180deg, #dff1ff 0%, #c9e7ff 100%);
  box-shadow: 0 0 0 2px rgba(39, 143, 208, 0.18);
}

.redactor-in .ost-staff-mention {
  cursor: text;
  user-select: all;
  -webkit-user-select: all;
}

.notifications-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 1900;
}

.notifications-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.notifications-docked .notifications-overlay {
  display: none !important;
}

.notifications-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--notifications-drawer-width, 20vw);
  max-width: 92vw;
  background: #fff;
  border-left: 1px solid #d3d8de;
  box-shadow: -3px 0 14px rgba(0, 0, 0, 0.2);
  transform: translateX(100%);
  transition: transform 140ms ease;
  z-index: 1950;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.notifications-drawer.is-open {
  transform: translateX(0);
}

.notifications-drawer.is-docked {
  transform: translateX(0);
}

.notifications-resize-handle {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  z-index: 2;
}

.notifications-drawer.is-docked .notifications-resize-handle {
  display: block;
}

.notifications-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px;
  border-bottom: 1px solid #e6eaef;
  font-size: 16px;
}
.notifications-drawer-header.actions-only {
  justify-content: flex-end;
}

.notifications-drawer-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.notifications-drawer-actions button,
.notifications-drawer-actions a {
  border: 1px solid transparent;
  background: transparent;
  color: #5d6b78;
  border-radius: 4px;
  cursor: pointer;
  padding: 2px 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.notifications-drawer-actions button:hover,
.notifications-drawer-actions button:focus,
.notifications-drawer-actions a:hover,
.notifications-drawer-actions a:focus {
  background: #eef3f7;
  border-color: #d8e0e8;
  outline: none;
}

.notifications-drawer-actions button svg,
.notifications-drawer-actions a svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: block;
}

#notifications-pin.is-pinned {
  background: #dfeff9;
  border-color: #b4cfe3;
  color: #2b5f82;
}

#notifications-pin.is-locked {
  opacity: 0.65;
  cursor: not-allowed;
}

#notifications-close {
  font-size: 24px;
  line-height: 20px;
  padding: 0 6px !important;
}

.notifications-meta {
  padding: 8px 12px;
  border-bottom: 1px solid #f0f3f7;
  font-size: 12px;
  color: #697784;
}

.notifications-list {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 10px 12px;
}

.notifications-empty,
.notifications-events-empty {
  padding: 12px 8px;
  color: #6c7986;
  font-size: 13px;
}

.notifications-card {
  border: 1px solid #e1e5ea;
  border-radius: 5px;
  margin-bottom: 8px;
  background: #fafbfd;
  overflow: hidden;
}

.notifications-card.is-read {
  border-color: #e8edf2;
  background: #f7f9fb;
}

.notifications-card-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 9px 10px;
  cursor: pointer;
  font-size: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "num actions"
    "sub actions"
    "sum actions"
    "meta actions";
  gap: 2px 8px;
  color: inherit;
  box-sizing: border-box;
}

/* Keep card text position stable on hover/focus; avoid global button hover border/padding rules */
.notifications-card-toggle:hover,
.notifications-card-toggle:focus,
.notifications-card-toggle:active {
  border: 0 !important;
  padding: 9px 10px !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  outline: none;
}

.notifications-card:hover,
.notifications-card:focus-within {
  border-color: #bcc7d3;
  background: #f4f7fa;
}

.notifications-card.is-read .notifications-card-toggle {
  opacity: 0.62;
}

.notifications-card.is-read:hover .notifications-card-toggle,
.notifications-card.is-read:focus-within .notifications-card-toggle,
.notifications-card.is-read.is-open .notifications-card-toggle {
  opacity: 0.82;
}

.notifications-card-number {
  grid-area: num;
  font-weight: 600;
  color: #1f2f40;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.notifications-card-number .notifications-open-ticket {
  color: #126a9a;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
  border-radius: 2px;
  padding: 0 1px;
}

.notifications-card-number .notifications-open-ticket:hover,
.notifications-card-number .notifications-open-ticket:focus {
  color: #0b4f77;
  text-decoration: underline;
  background: rgba(18, 106, 154, 0.12);
}

.notifications-card-watch-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  line-height: 1.2;
  padding: 1px 6px;
  border-radius: 10px;
  border: 1px solid #c5d7e5;
  color: #2f5876;
  background: #eaf4fc;
  white-space: nowrap;
}

.notifications-card-watch-badge i {
  font-size: 11px;
}

.notifications-card-subject {
  grid-area: sub;
  font-size: 14px;
  color: #2d3d4d;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notifications-card-summary {
  grid-area: sum;
  display: block;
  font-size: 13px;
  color: #31465a;
  margin-bottom: 2px;
}

.notifications-card-meta {
  grid-area: meta;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.notifications-card-when {
  color: #1976a7;
  font-size: 14px;
}

.notifications-card-by {
  color: #6a7682;
  font-size: 14px;
}

.notifications-card-actions {
  grid-area: actions;
  align-self: center;
  justify-self: end;
  margin-right: 8px;
  color: #5d6b78;
}

.notifications-card.is-open .notifications-card-actions i {
  transform: rotate(180deg);
}

.notifications-card-actions i {
  transition: transform 120ms ease;
}

.ticket-watch-action-button {
  border-color: #cfd8e2 !important;
}

.ticket-watch-action-button.is-watched {
  background: #e7f3fd !important;
  border-color: #9ec5e3 !important;
}

.ticket-watch-action-button a {
  color: #2b526f !important;
}

.ticket-watch-action-button.is-watched a {
  color: #0d5f94 !important;
}

.ticket-watch-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
}

.ticket-watch-pill.is-watched {
  color: #0d5f94;
  background: #e7f3fd;
  border: 1px solid #9ec5e3;
}

.notifications-card-events {
  display: none;
  border-top: 1px solid #e8edf2;
  background: #fff;
  padding: 0 10px 8px;
}

.notifications-event-list {
  list-style: none;
  margin: 0;
  padding: 6px 0 0;
}

.notifications-event-list li {
  border-bottom: 1px solid #f1f4f8;
  padding: 6px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.notifications-event-list li:last-child {
  border-bottom: 0;
}

.notifications-event-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 22px;
  margin-top: 1px;
  background: #dfe5eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.notifications-event-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.notifications-event-avatar-empty {
  color: #748291;
  font-size: 11px;
}

.notifications-event-avatar-system {
  color: #5f6c79;
}

.notifications-event-avatar-system svg {
  width: 14px;
  height: 14px;
  display: block;
  fill: currentColor;
}

.notifications-event-content {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
}

.notifications-event-when {
  display: block;
  font-size: 14px;
  color: #5f6c79;
}

.notifications-event-text {
  display: block;
  font-size: 14px;
  color: #243444;
}

.notifications-event-link {
  color: #126a9a;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.notifications-event-link:hover,
.notifications-event-link:focus {
  color: #0b4f77;
}

/* Ticket thread hash focus: keep target visible below sticky header and easy to spot */
#thread-items .thread-entry-hash-target {
  position: relative;
  scroll-margin-top: 180px;
}

#thread-items .thread-entry-hash-target::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 3px;
  background: #128dbe;
}

#thread-items .thread-entry-hash-target > .thread-entry {
  border-radius: 4px;
  background-color: rgba(18, 141, 190, 0.05);
  box-shadow: 0 0 0 2px rgba(18, 141, 190, 0.24);
  animation: thread-entry-hash-pulse 900ms ease-out 1;
}

@keyframes thread-entry-hash-pulse {
  0% {
    background-color: rgba(18, 141, 190, 0.15);
    box-shadow: 0 0 0 3px rgba(18, 141, 190, 0.34);
  }
  100% {
    background-color: rgba(18, 141, 190, 0.05);
    box-shadow: 0 0 0 2px rgba(18, 141, 190, 0.24);
  }
}

body.notifications-open {
  overflow: hidden;
}

body.notifications-docked {
  padding-right: var(--notifications-docked-width, 360px);
  box-sizing: border-box;
}

body.notifications-docked #header,
body.notifications-docked #sub_nav-wrap {
  left: 0 !important;
  right: var(--notifications-docked-width, 360px) !important;
  width: auto !important;
  box-sizing: border-box;
}

/* In docked mode, keep queue width bound to the content area (not viewport). */
body.notifications-docked.tickets-page .queue-width-wrap,
body.notifications-docked .tickets-page .queue-width-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

/* Keep sticky action headers (e.g. ticket view) aligned with docked drawer */
body.notifications-docked .sticky.bar.fixed {
  left: 0 !important;
  right: var(--notifications-docked-width, 360px) !important;
  width: auto !important;
  transform: none !important;
  box-sizing: border-box;
}

/* Queue sticky sizing/positioning is handled in scp.js for .queue-width-wrap */
body.notifications-docked.tickets-page .queue-width-wrap .sticky.bar.fixed,
body.notifications-docked .tickets-page .queue-width-wrap .sticky.bar.fixed {
  left: 0 !important;
  right: auto !important;
  transform: none !important;
}

body.notifications-docked.notifications-open {
  overflow: auto;
}

body.notifications-resizing {
  cursor: ew-resize !important;
  user-select: none;
}

/* Keep ticket queues as real tables on phones (disable legacy card transform). */
@media only screen and (max-width: 760px) {
  table.list.queue.tickets {
    display: table !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: fixed !important;
  }

  table.list.queue.tickets thead {
    display: table-header-group !important;
  }

  table.list.queue.tickets tbody {
    display: table-row-group !important;
  }

  table.list.queue.tickets tfoot {
    display: table-footer-group !important;
  }

  table.list.queue.tickets thead tr {
    position: static !important;
    top: auto !important;
    left: auto !important;
  }

  table.list.queue.tickets tr {
    display: table-row !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  table.list.queue.tickets tr.priority-low,
  table.list.queue.tickets tr.priority-normal,
  table.list.queue.tickets tr.priority-high,
  table.list.queue.tickets tr.priority-emerency {
    border-left: 0 !important;
  }

  table.list.queue.tickets th,
  table.list.queue.tickets td {
    display: table-cell !important;
    position: static !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 13px !important;
    vertical-align: middle !important;
  }

  table.list.queue.tickets td:nth-of-type(2),
  table.list.queue.tickets td:last-of-type {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  table.list.queue.tickets td::before,
  table.list.queue.tickets th::before {
    content: none !important;
    display: none !important;
  }

  table.list.queue.tickets .queue-col-mobile-hide,
  table.list.queue.tickets .queue-col-select,
  table.list.queue.tickets td.checkbox-cell,
  table.list.queue.tickets th.checkbox-cell {
    display: none !important;
  }

  table.list.queue.tickets th:not(.queue-col-priority):not(.queue-col-number):not(.queue-col-subject),
  table.list.queue.tickets td:not(.queue-col-priority):not(.queue-col-number):not(.queue-col-subject) {
    display: none !important;
  }

  table.list.queue.tickets thead th.queue-col-priority,
  table.list.queue.tickets tbody td.queue-col-priority {
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    padding: 0 !important;
  }

  table.list.queue.tickets thead th.queue-col-number,
  table.list.queue.tickets tbody td.queue-col-number {
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  table.list.queue.tickets thead th.queue-col-subject,
  table.list.queue.tickets tbody td.queue-col-subject {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  table.list.queue.tickets td:first-child {
    display: table-cell !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    border-bottom: 0 !important;
    z-index: auto !important;
  }

  table.list.queue.tickets td.osta_priority {
    visibility: visible !important;
    text-indent: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  table.list.queue.tickets input[type="checkbox"] {
    visibility: visible !important;
  }

  table.list.queue.tickets td a,
  table.list.queue.tickets td .date-text,
  table.list.queue.tickets td.osta_username,
  table.list.queue.tickets a.preview,
  table.list.queue.tickets a.preview b {
    font-size: 13px !important;
  }
}

@media screen and (max-width: 960px) {
  body.staff-side .compact-popover {
    left: 50vw !important;
    right: auto !important;
    transform: translateX(-50%);
    width: min(430px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
  }

  body.staff-side #content .sticky.bar .sticky-compact-options-panel {
    width: min(360px, calc(100vw - 16px)) !important;
  }

  #mobile-chrome-toggle {
    display: none;
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 4px);
    left: 50%;
    transform: translate(-50%, -10px);
    z-index: 1000002;
    border: 1px solid #4c5a67;
    background: rgba(23, 32, 39, 0.94);
    color: #ffffff;
    border-radius: 16px;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1;
    gap: 6px;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease;
  }

  #mobile-chrome-toggle i {
    font-size: 12px;
  }

  body.staff-side.mobile-chrome-autohide-enabled #mobile-chrome-toggle {
    display: inline-flex;
  }

  body.staff-side.mobile-chrome-hidden #mobile-chrome-toggle {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }

  body.staff-side.mobile-chrome-autohide-enabled #header,
  body.staff-side.mobile-chrome-autohide-enabled #sub_nav-wrap,
  body.staff-side.mobile-chrome-autohide-enabled #content .sticky.bar.fixed {
    transition: transform 160ms ease, opacity 160ms ease;
  }

  body.staff-side.mobile-chrome-hidden #header {
    transform: translateY(calc(-100% - 6px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.staff-side.mobile-chrome-hidden #sub_nav-wrap {
    transform: translateY(calc(-100% - 8px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.staff-side.mobile-chrome-hidden #content .sticky.bar.fixed {
    transform: translateY(calc(-100% - 10px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #messages-post-note-tab::before,
  #messages-post-reply-tab::before {
    top: 3px !important;
    height: 15px !important;
    width: 15px !important;
    background-size: 15px !important;
  }
}

#messages-post-note-tab::before,
#messages-post-reply-tab::before {
  top: 3px !important;
  height: 15px !important;
  width: 15px !important;
  background-size: 15px !important;
}