body {
    background: var(--header-title);
}

#header-constrain #header-image img {
    display: block !important;
    margin-top: -12px !important;
    height: 60px !important;
}

#login-title #header-image img {
    display: inline-block !important;
    height: 100% !important;
}

#login-title div#header-text #header-title {
    color: var(--header-bg);
}

#login-title {
    margin: 0;
}

#loginBox h3 {
    color: var(--header-bg);
}

#loginBox button[type=submit],
#loginBox input[type="submit"],
#loginBox .primary.button {
    background-color: var(--header-bg);
    border-color: var(--header-bg);
    color: var(--header-title) !important;
}

div#sub_nav-wrap {
    margin-top: 70px;
}

#sub_nav {
    margin: 67px auto;
}

input.basic-search,
.input.attached .button.attached,
#kbSearch #query {
    border: 1px solid var(--header-bg) !important;
}

.input.attached .button.attached {
    border-left: 0 !important;
}

@media screen and (max-width: 760px) {

    .attached.input,
    .action-button.advanced-search.gray-light2 {
        top: 70px !important;
    }

    .button-text.advanced-search,
    span.sort-button-text,
    .pull-right.flush-right.page-top .action-button.muted {
        color: var(--header-bg) !important
    }

    .input.attached .button.attached,
    form[action="tickets.php"] .input.attached .button.attached {
        border: 1px solid var(--header-bg) !important;
        border-left: 0 !important;
    }

    form[action="tickets.php"] .action-button.advanced-search.gray-light2 {
        opacity: 1 !important;
    }

    .button-text.advanced-search svg {
        fill: var(--header-bg) !important;
    }
}

#content {
    min-height: 87.5vh;
}

#footer {
    height: 50px;
}

#footer #osticket svg,
#footer #ostawesome svg {
    fill: var(--header-bg) !important;
}

.customQ-dropdown ul li:not(.personalQ) h4 {
    margin: 0px;
    margin-top: -5px;
    color: var(--header-bg) !important;
    border-bottom: 1px solid var(--header-bg) !important;
}

.customQ-dropdown ul li:not(.personalQ):hover>h4 {
    background: var(--header-title) !important;
    color: var(--header-bg) !important;
    border-bottom: 1px solid var(--header-bg) !important;
    cursor: default !important;
}

/* Custom CSS for dynamic Grid Display for Custom Data -- START */
.grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0px;
}

table.ticket_info.custom-data tr:first-child td {
    padding: inherit;
}

table.ticket_info.custom-data tr td {
    padding: 12px 0 8px 17px !important;
}

table.ticket_info.custom-data tr td:first-child {
    width: 94px !important;
}

@media screen and (max-width: 768px) {
    .grid-layout {
        grid-template-columns: 1fr;
    }

    table.ticket_info.custom-data th {
        padding-left: 8px;
        padding-right: 8px;
    }

    table.ticket_info.custom-data tr td {
        padding: 7px 8px 3px 8px !important;
    }

    table.ticket_info.custom-data tr td:first-child {
        width: 100px !important;
    }

    table.ticket_info.custom-data tr:last-child td {
        padding-bottom: 12px !important;
    }
}

/* Custom CSS for dynamic Grid Display for Custom Data -- END */

/* Custom CSS for handling Priority Level Mapping -- START */
div#priority-5,
div#priority-4,
div#priority-3,
div#priority-2,
div#priority-1 {
    clear: both;
}

div#priority-5 .color,
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.Critical,
table.list tbody tr:hover td.Critical,
table.list tbody tr:nth-child(2n+1):hover td.Critical {
    background: url(../../osta/img/priority-pattern-overlay.png) #FF3B30 !important;
}

td.Urgent,
table.list tbody tr:hover td.Urgent,
table.list tbody tr:nth-child(2n+1):hover td.Urgent {
    background: url(../../osta/img/priority-pattern-overlay.png) #FF9500 !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) #FFCC00 !important
}

td.Medium,
table.list tbody tr:hover td.Medium,
table.list tbody tr:nth-child(2n+1):hover td.Medium {
    background: url(../../osta/img/priority-pattern-overlay.png) #34C759 !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) #30B0C7 !important;
}

td.priority.Critical a {
    color: #FF3B30;
}

td.priority.Urgent a {
    color: #FF9500;
}

td.priority.High a {
    color: #FFCC00;
}

td.priority.Medium a {
    color: #34C759;
}

td.priority.Low a {
    color: #30B0C7;
}

div#priority-5 .color {
    background: #FF3B30;
}

div#priority-4 .color {
    background: #FF9500;
}

div#priority-3 .color {
    background: #FFCC00;
}

div#priority-2 .color {
    background: #34C759;
}

div#priority-1 .color {
    background: #30B0C7;
}

td.osta_priority.osta_priority_critical {
    background: url(../img/priority-pattern-overlay.png) #FF3B30 !important;
}

td.osta_priority_urgent {
    background: url(../img/priority-pattern-overlay.png) #FF9500 !important;
}

td.osta_priority_high {
    background: url(../img/priority-pattern-overlay.png) #FFCC00 !important;
}

td.osta_priority_medium {
    background: url(../img/priority-pattern-overlay.png) #34C759 !important;
}

td.osta_priority_low {
    background: url(../img/priority-pattern-overlay.png) #30B0C7 !important;
}

/* Custom CSS for handling Priority Level Mapping -- END */

/* Custom CSS to override icon-time on sticky header and main header -- START */
.pull-right i.icon-time,
.sticky.bar.fixed i.icon-time,
.action-button i.icon-time {
    font-size: 1.3em;
}

i.icon-time::before {
    top: 0;
}

.sticky.bar.fixed i.icon-time::before {
    fill: #fff !important;
    color: #fff !important;
}

/* Custom CSS to override icon-time on sticky header and main header -- END */

/* Custom CSS to apply Dashboard UI Changes to Time Summary along with custom changes -- START */
.admintimesummary div[style="min-height:25px;"],
.timesummary div[style="min-height:25px;"] {
    top: -6px;
}

.admintimesummary button.link.button,
.timesummary button.link.button {
    padding: 8px 12px;
    border-color: #d3d3d3;
}

.admintimesummary button.link.button:hover,
.timesummary button.link.button:hover {
    padding: 8px 12px;
    border: .5px solid #d3d3d3;
}

.admintimesummary input.hasDatepicker,
.timesummary input.hasDatepicker {
    min-width: 100px !important;
    margin: 0;
    height: 30px;
}

.admintimesummary button.ui-datepicker-trigger,
.timesummary button.ui-datepicker-trigger {
    top: 4px;
}

.admintimesummary .select2-selection.select2-selection--single,
.timesummary .select2-selection.select2-selection--single {
    margin: 0 0 2px 0;
    height: 32px;
}

.admintimesummary button.green.button.action-button.muted,
.timesummary button.green.button.action-button.muted {
    background: #fff;
    padding: 1px 9px 7px 14px;
    top: -1px;
    margin: 0 -6px 0 4px !important;
}

.admintimesummary button.green.button.action-button:before,
.timesummary 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");
}

.admintimesummary input.hasDatepicker,
.timesummary input.hasDatepicker {
    min-width: 100px !important;
}

form[action="admintimesummary.php"] #basic_search .select,
form[action="timesummary.php"] #basic_search .select {
    max-width: 200px !important;
}

.admintimesummary .tab_content,
.timesummary .tab_content {
    min-height: initial;
}

.admintimesummary button.link.button,
.timesummary button.link.button {
    margin: 6px 0 0 0;
}

.admintimesummary ul.tabs li a,
.timesummary ul.tabs li a {
    margin-top: 4px;
    display: inline;
}

.admintimesummary hr,
.timesummary hr {
    display: none;
}

.admintimesummary h2:first-child,
.timesummary h2:first-child {
    margin-bottom: 10px;
}

.admintimesummary ul.tabs,
.timesummary ul.tabs {
    display: none;
    border-bottom: 0;
}

.admintimesummary .pull-left,
.timesummary .pull-left {
    margin-top: 0;
}

table.admintimesummary,
table.timesummary {
    text-align: right;
    border-bottom: 2px solid #ddd;
}

table.admintimesummary tbody:first-child th,
table.timesummary tbody:first-child th {
    border-bottom: 1px dashed #ddd;
    padding: 0 4px 8px;
}

table.admintimesummary tbody:nth-child(2) tr:nth-child(odd),
table.timesummary tbody:nth-child(2) tr:nth-child(odd) {
    background-color: #f0faff;
}

table.admintimesummary tbody:nth-child(2) th,
table.timesummary tbody:nth-child(2) th,
table.admintimesummary tbody:nth-child(2) td,
table.timesummary tbody:nth-child(2) td {
    padding: 5px 8px;
    border-right: 1px solid #ccc;
    color: #999;
}

table.admintimesummary tbody:nth-child(2) td,
table.timesummary tbody:nth-child(2) td {
    padding: 5px 4px;
    border-right: 1px solid #ccc;
}

table.admintimesummary tbody:nth-child(2) tr:hover,
table.timesummary tbody:nth-child(2) tr:hover {
    background-color: #FFFFDD;
}

table.admintimesummary tbody:nth-child(2) tr:hover th,
table.timesummary tbody:nth-child(2) tr:hover th {
    color: #000;
}

table.admintimesummary,
table.timesummary {
    border-bottom: 1px solid #ddd;
}

.admintimesummary .table td,
.timesummary .table td {
    background: inherit !important;
}

table.timesummary.table {
    width: 100%;
    height: 75vh;
    overflow-y: scroll;
    display: block;
    table-layout: fixed;
}

table.timesummary.table th:not(:last-child),
table.timesummary.table td:not(:last-child) {
    width: 10%;
}

table.timesummary.table th:last-child,
table.timesummary.table td:last-child {
    width: max-content;
}

.task-header>h2>.link-header {
    display: flex !important;
    width: 100%;
}

.task-header>h2>.link-header>span,
.task-header>h3 {
    max-width: 90%;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.time-post .post-entry-value-btn {
    background-color: unset;
    color: unset !important;
}
.time-post .post-entry-value-btn:hover {
    background-color: #08C;
}
.post-time-entry-btn-group {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.post-time-entry-btn-group>.btn {
    position: relative;
    float: left;
    background-color: #fff;
    color: #08C;
    border: .5px solid #8c9aac;
    padding: 10px 5px;
}

.post-time-entry-btn-group .btn+.btn {
    margin-left: -1px;
}
.post-time-entry-btn-group>.btn:hover{
    background-color: #fff;
    color: #08C;
    box-shadow: none;
}
.custom-time-entry {
    display: flex;
    flex-direction: column;
    padding: 10px;
    justify-content: center;
    align-items: center;
    background-color: #edf1f5;
    width: 207px;
    border: .5px solid #8c9aac;
    position: relative;
    top: -1px;
}
.add-custom-time-spent-btn {
    border: .5px solid #8c9aac;
    position: relative;
    left: -1px;
}
/* Dark Mode -- START */
.dark-mode .admintimesummary ul.tabs li a[href="#dept"]:before,
.dark-mode .timesummary ul.tabs li a[href="#dept"]:before {
    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='%238C949F' d='M3%2C6H21V8H3V6M3%2C11H21V13H3V11M3%2C16H21V18H3V16Z' /%3E %3C/svg%3E");
}

.dark-mode .admintimesummary ul.tabs li a[href="#topic"]:before,
.dark-mode .timesummary ul.tabs li a[href="#topic"]:before {
    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='%238C949F' d='M11%2C9H13V7H11M12%2C20C7.59%2C20 4%2C16.41 4%2C12C4%2C7.59 7.59%2C4 12%2C4C16.41%2C4 20%2C7.59 20%2C12C20%2C16.41 16.41%2C20 12%2C20M12%2C2A10%2C10 0 0%2C0 2%2C12A10%2C10 0 0%2C0 12%2C22A10%2C10 0 0%2C0 22%2C12A10%2C10 0 0%2C0 12%2C2M11%2C17H13V11H11V17Z' /%3E %3C/svg%3E");
}

.dark-mode .admintimesummary ul.tabs li a[href="#staff"]:before,
.dark-mode .timesummary ul.tabs li a[href="#staff"]:before {
    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='%238C949F' 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");
}

.dark-mode .admintimesummary ul.tabs li a[href="#staff"]:before,
.dark-mode .timesummary ul.tabs li a[href="#staff"]:before {
    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='%238C949F' 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");
}

.dark-mode.admintimesummary-page svg text,
.dark-mode.timesummary-page svg text {
    fill: #c9d1d9;
}

.dark-mode.admintimesummary-page svg path[stroke="#000000"],
.dark-mode.timesummary-page svg path[stroke="#000000"] {
    fill: #2ea043;
}

.dark-mode.admintimesummary-page svg path[stroke="#2f69bf"],
.dark-mode.timesummary-page svg path[stroke="#2f69bf"] {
    stroke: #58a6ff;
}

.dark-mode.admintimesummary-page svg circle,
.dark-mode.timesummary-page svg circle {
    fill: #58a6ff;
}

.dark-mode .admintimesummary button.green.button.action-button:before,
.dark-mode .timesummary button.green.button.action-button:before {
    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='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");
}

.dark-mode .button:hover,
.dark-mode button:hover,
.dark-mode .admintimesummary button.green.button.action-button.muted:hover,
.dark-mode .timesummary button.green.button.action-button.muted:hover {
    background-color: #2ea043 !important;
    color: #c9d1d9 !important;
    border: initial !important;
}

.dark-mode .tab_content div[style="margin-top: 5px"],
.dark-mode table.admintimesummary tbody:nth-child(2) tr:nth-child(odd),
.dark-mode table.timesummary tbody:nth-child(2) tr:nth-child(odd) {
    background-color: #1e2226;
}

.dark-mode table.admintimesummary tbody:first-child th,
.dark-mode table.timesummary tbody:first-child th {
    border-bottom: 1px dashed #30363d;
}

.dark-mode table.admintimesummary tbody:nth-child(2) th,
.dark-mode table.timesummary tbody:nth-child(2) th {
    border: 1px solid #30363d;
}

.dark-mode table.admintimesummary tbody:nth-child(2) td,
.dark-mode table.timesummary tbody:nth-child(2) td {
    border-right: 1px solid #30363d;
}

.dark-mode table.admintimesummary,
.dark-mode table.timesummary {
    border-bottom: 1px solid #30363d;
}

.dark-mode table.list.queue.tickets a.preview {
    border: none !important;
}

.dark-mode .thread-body *:not(a) {
    color: #c9d1d9 !important;
}
.dark-mode .post-time-entry-btn-group>.btn,
.dark-mode .custom-time-entry .add-custom-time-spent-btn {
    background-color: #21262d;
    border-color: #535a61;
}

.dark-mode .post-time-entry-btn-group>.btn:hover,
.dark-mode .custom-time-entry .add-custom-time-spent-btn:hover {
    background-color: #21262d !important;
}

.dark-mode .custom-time-entry {
    background-color: #0d1117;
}

.dark-mode .add-custom-time-spent-btn {
    border-color: #535a61;
}

.dark-mode .custom-time-entry {
    border-color: #535a61;
}
/* Dark Mode -- END */
/* Custom CSS to apply Dashboard UI Changes to Time Summary along with custom changes -- END */
table.list.queue.tickets a.preview {
    border: none;
    font-size: 14px;
    font-weight: bold;
}
/* APX Custom Code: Popup/Modal max height set for smaller screen resolutions -- START */
@media (max-width: 1366px) and (max-height: 768px) {
    .dialog#popup {
        max-height: 40rem !important;
    }
}
/* APX Custom Code: Popup/Modal max height set for smaller screen resolutions -- END */