@charset "utf-8";

/* CSS Document */
/*
/*      STAFF - desktop
*/
table.list tbody td a {
    font-weight: 500;
}

table.list tbody tr:nth-child(2n+1) td {
    background-color: #ffffff;
}

table.list tbody tr:nth-child(2n+1) td {
    background-color: #f0faff;
}

table.list tbody tr.highlight:nth-child(2n+1) td {
    background-color: #dddddd;
}

form table.list+div b {
    margin-right: 5px;
}

/* ==========================================================================
 GLOBAL STYLES
========================================================================== */
html {
    background: var(--nav-bar-bg);
}

body {
    background: #f3f3f5;
}

body,
.thread-body {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px !important;
    color: #4c5156;
}

a {
        color: #205a8d;
}

a:hover,
.link:hover {
    text-decoration: none !important;
}

b {
    font-weight: 600;
}

.input.attached.focus {
    outline-offset: initial;
    outline-style: initial;
    outline-width: initial;
    outline-color: initial;
}

button {
    border-width: 1px;
}

button:focus {
    outline: none;
}

select:focus,
input:focus {
    outline: .5px solid #606d7f;
}

input[type='radio']:checked,
input[type='checkbox']:checked {
    filter: hue-rotate(335deg) opacity(.9);
    -webkit-filter: hue-rotate(335deg) opacity(.9);
}

code {
    color: #029200;
}

/* ==========================================================================
 PAGE LAYOUT 
========================================================================== */
#container {
    width: 100%;
    margin: 0;
    /*height: 60px;*/
}

#content {
    max-width: 1200px;
    margin: 0 auto;
    background: initial;
    border: none;
    min-height: 670px;
}

th {
    font-family: 'Open Sans', sans-serif;
}

/* ==========================================================================
 HEADER
========================================================================== */
#header {
    background-color: var(--header-bg);
    background-image: url(../../osta/img/backdrops/02.png);
    background-size: cover;
    border: initial;
    box-shadow: initial;
    width: 100%;
    height: 60px;
    top: 0;
    z-index: 4;
    position: absolute;
}

#header a {
    color: var(--header-title);
    font-weight: 200;
    font-size: 14px;
}

#header p {
    border: none;
    color: var(--header-title);
    /*background: var(--header-bg);*/
    /*messes up Client header*/
    max-width: initial;
    margin: 0;
    padding: 18px;
}

p#info {
    font-weight: 100;
}

p#info strong {
    font-weight: 400;
}

div[style="margin-bottom:20px; padding-top:5px;"] {
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
 FALLBACK COLORS
========================================================================== */
.pull-right#nav a:hover,
.pull-right#nav a svg:hover {
    color: var(--header-title-hover);
    fill: var(--header-title-hover);
    font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif;
}

#header #nav a {
    color: var(--header-title);
    font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif;
}

#header #nav a:hover {
    color: var(--header-title-hover) !important;
}

.rtl #header li:nth-child(5) {
    margin-left: -2px !important;
}

#header a[href*="login.php"]:hover {
    background: rgba(255, 255, 255, 0.10980392156862745);
}

.sidr {
    background: #f3f3f5;
}

.c-hamburger span,
.c-hamburger span::before,
.c-hamburger span::after {
    background: #555;
}

:root {
    --header-bg: #e4e4e4;
    --header-title: #444444;

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

    --stickybar: #444444;

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

/* ==========================================================================
 NAVIGATION
========================================================================== */
#nav {
    background: var(--header-title);
    border: none;
    padding-top: 0;
    z-index: initial;
}

#sub_nav {
    background: var(--nav-bar-bg) !important;
    height: 12px;
    padding: 0;
    max-width: 1240px;
    margin: 57px auto;
    border: 0;
    line-height: 22px;
}

#sub_nav .small.icon-sort-down.pull-right {
    display: none;
}

nav#customQ_nav #sub_nav {
    line-height: 28px;
}

@media screen and (max-width: 1270px) {
    ul#sub_nav {
        margin-left: 12px !important;
    }
}

#sub_nav a {
    padding: initial;
}

ul#sub_nav a.active {
    font-weight: 600;
}

#sub_nav li.top-queue+li>a {
    margin-left: 14px;
}

a#new-ticket {
    margin-left: 14px !important;
}

.sidr-inner a#new-ticket {
    margin-left: 0 !important;
}

#nav a {
    margin-left: 8px;
}

a#dark-mode-link {
    margin-left: 6px;
}

a#logout {
    margin-left: 5px;
}

#nav>li:first-of-type {
    margin-left: 8px;
}

#nav li a {
    margin-left: 0;
}

#nav li:hover a,
a#agent-panel:hover,
a#admin-panel:hover {
    color: var(--header-title) !important;
    fill: var(--header-title) !important;
}

#nav li.active,
#nav li.inactive:hover {
    background-color: var(--header-title);
    box-shadow: none;
    border: none;
    padding-left: initial;
    padding-right: initial;
}

#nav .active {
    color: var(--nav-bar-link) !important;
    font-weight: 400;
}

#nav .active,
#nav .inactive {
    border-radius: initial;
    border-style: initial;
}

#sub_nav a,
#nav .active a,
#nav .inactive a {
    color: var(--header-title);
}

#sub_nav a {
    color: var(--nav-bar-link);
}

#sub_nav a:hover {
    color: #000000;
}

#nav li.inactive>ul {
    width: initial;
    background: var(--header-title);
    border-bottom: none;
    border-left: none;
    border-right: none;
    border-radius: none;
    -moz-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}

#nav .inactive li a {
    background-position: 10px 50%;
    background-repeat: no-repeat;
    padding: 4px 34px 4px 34px;
}

.rtl #nav .inactive li a {
    padding-left: 34px;
    padding-right: 34px;
}

#nav .inactive li a:hover {
    color: var(--mobile-menu-bg);
    background-color: rgba(0, 0, 0, 0.1);
}

#customQ_nav .jb-overflowmenu-menu-primary li.item>a {
    padding: 0;
}

#sub_nav>li>a {
    margin-left: 17px !important;
    padding: 0;
}

.rtl #sub_nav>li>a {
    margin-right: 17px !important;
    padding-right: 0 !important;
}

.rtl ul#sub_nav li:first-child a {
    margin-right: 0 !important;
    padding-right: 0 !important;
}

/* ==========================================================================
 LOGO
========================================================================== */
#left-logo {
    width: 300px;
    height: 28px;
    margin: 15px 14px;
    float: left;
    -webkit-transition: left 2s;
    transition: left 2s;
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    z-index: 0;
}

.rtl #left-logo {
    float: right;
    right: 0;
}

/* TEXT LOGO */
#header-text {
    padding: 2px;
}

#header-title {
    color: var(--header-title);
    line-height: 21px;
    padding: 0;
    font-style: normal;
    font-weight: 400;
    font-size: 21px;
    font-family: "Montserrat", sans-serif;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

#header-subtitle {
    color: var(--header-title);
    margin: 0;
    position: relative;
    font-size: 10px;
    font-family: verdana;
    font-style: initial;
    letter-spacing: 2.4px !important;
    display: block;
    font-weight: 100;
}

/* IMAGE LOGO */
#left-logo {
    max-width: 300px;
    height: 34px;
    margin: 12px 11px;
}

#header-default svg {
    height: 34px;
    fill: var(--header-title);
}

#header-default:hover svg {
    fill: var(--header-title-hover);
}

#header-text {
    display: none;
}

#header-image img {
    display: none;
}

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

/* ==========================================================================
 HEADER NAV 
========================================================================== */
#nav.pull-right {
    background: initial;
    position: relative;
    top: 16px;
    color: #f3f3f5;
    /* fallback */
    color: var(--header-bg);
    padding: 0 calc(1% + 5px) 0 0 !important;
}

.rtl #nav.pull-right {
    padding: 0 0 0 calc(1% + 5px) !important;
}

a.no-pjax[href*="/scp/logout.php"] svg {
    fill: var(--header-title);
    display: inline-block;
    width: 18px;
    height: 18px;
    content: "";
    position: relative;
    top: 4px;
}

.rtl a.no-pjax[href*="/scp/logout.php"] svg {
    transform: rotate(180deg);
}

#nav.pull-right .active,
#nav.pull-right .inactive {
    min-width: initial;
}

#nav.pull-right li.active,
#nav.pull-right li.inactive:hover {
    background-color: initial;
}

#nav.pull-right li.inactive>ul {
    width: initial;
    background: var(--header-bg);
    left: -33px;
}

.rtl #nav.pull-right li.inactive>ul {
    left: -33px;
    right: initial;
}

#nav.pull-right .active,
#nav.pull-right .inactive,
#nav.pull-right li.active,
#nav.pull-right li.inactive:hover {
    padding-left: initial;
    padding-right: initial;
}

.rtl #nav li:first-child {
    margin-left: 8px !important;
}

.rtl #nav.pull-right li>ul li:first-child {
    margin-left: 0 !important;
}

#nav>li+li:nth-child(5) {
    /*margin-left: 0;*/
    /*what was this for?!*/
}

#nav.pull-right .active a {
    font-weight: 400;
}

/* ==========================================================================
 TOP MARGIN
========================================================================== */
.pull-left {
    float: left;
    margin: 0;
}

.rtl .pull-left {
    float: right !important;
}

p.full-width .pull-right {
    margin: 9px 0 0 0;
    /*target*/
    margin: 0 0 0 0;
}

.pull-right.flush-right.page-top {
    float: left;
}

/* ==========================================================================
 TYPOGRAPHY
========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Product Sans', 'Open Sans', sans-serif;
    ;
}

h2 {
    color: #777777;
    font-weight: 400;
    font-size: 25px;
    margin: 0;
}

h2 a {
    line-height: 33px;
}

h3 {
    padding: 5px 0;
    color: #777777;
    font-weight: 400;
    font-size: 19px;
    margin: 0;
}

.pull-left.flush-left h2 a {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: relative;
    /* padding-right: 2.2em; */
    padding-right: 4px;
}

.flush-left h2 svg {
    display: inline-block;
    position: relative;
    top: 4px;
    left: 0;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    fill: #8BCB0D;
}

.flush-left h2 a:hover>svg,
.flush-left h2 a:focus>svg,
.flush-left h2 a:active>svg {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

.sticky.bar.fixed .flush-left h2 a svg {
    fill: var(--header-title);
}

label {
    color: #4c5156 !important;
}

.error {
    color: #d62705;
    font-size: 13px;
    font-weight: 500;
}

li.error a:before {
    display: none;
}

.faded strong {
    font-weight: 500;
}

/* ==========================================================================
 ICONS
========================================================================== */
a [class^="icon-"],
a [class*=" icon-"] {
    color: #128dbe;
}

.pull-right i[class^="icon-"],
.pull-right i[class*=" icon-"] {
    display: inline-block;
    float: left;
}

.rtl .pull-right i[class^="icon-"],
.rtl .pull-right i[class*=" icon-"] {
    float: right;
}

i.icon-refresh {
    display: none;
}

.configureQ {
    margin: 16px 0 0 4px;
}

[class^="icon-"].icon-fixed-width,
[class*=" icon-"].icon-fixed-width {
    padding: 0;
    /* Completed Tasks */
    margin: 0 6px 0 3px;
    width: 20px;
}

#sort-dropdown [class^="icon-"].icon-fixed-width,
#sort-dropdown [class*=" icon-"].icon-fixed-width {
    margin: 0 4px 0 3px;
}

.configureQ>.noclick-dropdown {
    padding: 25px 0 0 0;
    margin-top: -3px;
    margin-left: -7px;
}

.configureQ i.icon-fixed-width.icon-pencil {
    background-position: 1px -2px;
}

.floating-options i.icon-edit,
.floating-options i.icon-share {
    padding: 15px !important;
    background-position: center center;
    float: right;
    top: 0;
}

.floating-options i.icon-share {
    background-size: 24px !important;
    top: 1px;
}

.floating-options i.icon-share:after {
    clear: both;
}

.quicknote .body a {
    margin: 0 0 15px 0;
}

.quicknote {
    margin: 10px 0;
    border: .5px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.quicknote .body {
    padding: 0 10px;
}

#new-note {
    margin-top: 10px;
    background: rgba(219, 243, 255, 0.6509803921568628);
}

#quick-notes i.note-type.icon-user {
    margin-left: 0;
}

.re-icon i:before {
    /*Redactor Toolbar trash icon*/
    top: -4px;
}

.delete-draft:hover {
    background-color: rgba(212, 8, 8, 0.9294117647058824) !important;
}

.faded {
    margin: 3px 0 0 0 !important;
    /* font-size: 18px; */
    /*target*/
    color: #888;
}

.thread-event .faded {
    margin: 3px 0 0 0 !important;
    font-size: 18px;
}

.thread-event .type-icon i {
    top: 0 !important;
}

.thread-entry .muted-button {
    border-radius: 5px;
    padding: 3px 5px;
    margin: -4px 0 -1px 5px;
    border: .5px solid rgba(0, 0, 0, 0.21);
    color: #666;
    color: rgba(0, 0, 0, 0.5);
    background: rgba(255, 255, 255, 0.21);
}

.label.label-bare:hover,
.thread-entry .muted-button:hover {
    background: rgba(255, 255, 255, 0.48);
}

a[href="#moreoptions"] i.icon-reorder {
    padding-right: 2px;
}

/* ==========================================================================
 TICKET PAGES
========================================================================== */
form[action="tickets.php"] {
    display: inline;
}

form#reply {
    width: 98% !important;
}

#resp_sec tr:first-of-type td[colspan="2"]:first-of-type {
    display: none;
}

#resp_sec .redactor-box {
    margin-top: 10px !important;
}

.redactor-styles,
.redactor-styles p,
.-redactor-container .redactor-styles {
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    color: #000;
    max-width: initial !important;
}

.redactor-styles {
    padding: 5px 12px 0px 12px;
}

.redactor-styles h1,
.redactor-styles h2,
.redactor-styles h3,
.redactor-styles h4,
.redactor-styles h5,
.redactor-styles h6 {
    font-family: 'Open Sans', sans-serif;
    line-height: initial;
}

.redactor-box.redactor-styles-on {
    border: 1px solid #aaaaaa;
}

.inner br:nth-child(2) {
    /* display: none; */
    /*breaks signature line breaks*/
}

#tasks.tab_content {
    min-height: 80px;
}

.redactor-box.redactor-styles-on .redactor-toolbar.redactor-toolbar {
    padding: 0 0 0 0;
    border-radius: 6px 6px 0 0;
    box-shadow: 0 4px 6px -3px rgba(0, 0, 0, 0.22);
}

.redactor-box.redactor-styles-on {
    border: 1px solid #aaaaaa !important;
}

.tixTitle h3 {
    font-weight: 400;
    color: #777777;
    font-size: 22px;
}

.avatar.pull-left {
    margin-left: -60px;
    display: inline-block;
    width: 100px;
    /*target*/
    height: auto;
}

.thread-entry .avatar.pull-left.avatar {
    width: 50px;
}

/* ==========================================================================
 UNIVERSAL TABLE STYLES
========================================================================== */
/* HEAD */
table[width="940"] {
    width: 100%;
}

table.list,
#ticketTable {
    width: 100%;
    border: 1px solid #cfd4d6;
    border-radius: 6px;
    margin: 5px 0 0 0;
    background: initial;
    background-color: #fff;
    border-spacing: 0;
    border-collapse: separate;
}

.logs-page table.list {
    table-layout: fixed;
}

table.list thead th {
    background-color: #fff;
    color: #686868;
}

table.list th:not(:first-child) a:hover {
    background: #cfe6ff url(../../osta/icons/asc-desc.svg) 100% 50% no-repeat;
    background-size: 20px;
}

table.list thead th.osta_priority a:hover {
    background-position: 3px 14px !important;
}

.rtl table.list th:nth-child(3) a:hover,
.rtl table.list th:nth-child(4) a:hover,
.rtl table.list th:nth-child(5) a:hover,
.rtl table.list th:nth-child(6) a:hover,
.rtl table.list th:nth-child(7) a:hover {
    background: #cfe6ff url(../../osta/icons/asc-desc.svg) 8px 50% no-repeat;
    background-size: 20px;
}

table.list th:first-child {
    border-radius: 6px 0 0 0;
    background-image: url(../icons/checkmark.svg);
    background-repeat: no-repeat;
    background-position: 20px center;
    background-size: 16px;
    height: 40px;
    content: "";
    width: 30px !important;
}

table.list.queue.tickets th:first-child {
    /*target*/
    background-position: center left 12px;
}

.rtl table.list th:first-child {
    border-radius: 0 6px 0 0;
}

table.list th:last-child {
    border-radius: 0 6px 0 0;
}

table.ticket_info table {
    background: #fff;
    padding: 4px;
    border-radius: 6px;
}

table.list th {
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    height: 30px;
}

table.list thead th a {
    display: block;
    /* helps with asc-desc bg images */
    color: #128dbe;
    font-weight: normal;
    font-size: 16px;
    background: url(../../osta/icons/asc-desc.svg) 100% 50% no-repeat;
    background-size: 20px;
    will-change: background;
    transition: all 0.3s ease-in-out;
    margin: 0;
    height: 30px;
    padding: 8px 0 2px 10px;
    /* this positions the text */
    text-shadow: -1px -1px 0 #FFF, 0 -1px 0 #FFF, 1px -1px 0 #FFF, 1px 0 0 #FFF, 1px 1px 0 #FFF, 0 1px 0 #FFF, -1px 1px 0 #FFF, -1px 0 0 #FFF;
}

.rtl table.list thead th a {
    background-position: 8px 50%;
    padding-right: 15px;
    padding-left: 0;
}

table.list thead th a.asc {
    background: #cfe6ff url(../../osta/icons/asc.svg) 100% 50% no-repeat;
    background-size: 20px;
}

.rtl table.list thead th a.asc {
    background: #cfe6ff url(../../osta/icons/asc.svg) 8px 50% no-repeat;
    background-size: 20px;
}

table.list thead th a.desc {
    background: #cfe6ff url(../../osta/icons/desc.svg) 100% 50% no-repeat;
    background-size: 20px;
}

.rtl table.list thead th a.desc {
    background: #cfe6ff url(../../osta/icons/desc.svg) 8px 50% no-repeat;
    background-size: 20px;
}

th.osta_ticket a {
    margin-left: 5px !important;
    padding-left: 22px !important;
    line-height: 24px;
    font-style: initial;
    font-family: Montserrat;
    font-size: 14px !important;
    font-weight: 600 !important;
}

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

    table.list thead th a,
    table.list thead th a.asc,
    table.list thead th a.desc {
        background-image: initial;
    }
}

/* BODY */
table.list tbody td {
    margin: 0;
    padding: 0 10px 0 10px;
    vertical-align: middle;
    border: initial;
    font-size: 11px;
    color: #686868;
}

table.list td.checkbox-cell {
    padding: 18px 0px;
}

table.list tbody td.osta_ticket {
    padding: 0 10px 0 4px;
}

a[style="display:inline"] {
    font-size: 14px;
    font-weight: 500;
}

table.list td div.wrap {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* FOOT */
table.list tfoot td {
    font-size: 14px;
    background: #fff;
    border-radius: 0 0 6px 6px;
    padding: 12px;
    border-top: .5px solid #e0e0e0;
}

td.empty:before {
    display: none;
}

.truncate {
    display: initial;
    width: auto;
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.osta_ticket .truncate {
    white-space: initial !important;
}

/* ==========================================================================
 TICKET LIST COLUMN WIDTHS
========================================================================== */
form[action="tickets.php"] table.list thead th {
    width: initial !important;
}

form[action="tickets.php"] table.list thead th:first-child,
form[action="tickets.php"] table.list thead th:nth-child(2) {
    text-align: center;
}

form[action="tickets.php"] table.list th:first-child,
form[action="tickets.php"] table.list td:first-child {
    max-width: 1vw;
}

form[action="tickets.php"] table.list th:nth-child(2),
form[action="tickets.php"] table.list td:nth-child(2) {
    max-width: 2vw;
}

form[action="tickets.php"] table.list th:nth-child(3),
form[action="tickets.php"] table.list td:nth-child(4) {
    /* <-acount for hidden mobile td */
    max-width: 9vw;
}

form[action="tickets.php"] table.list th:nth-child(4),
form[action="tickets.php"] table.list td:nth-child(5) {
    max-width: 10vw;
}

form[action="tickets.php"] table.list th:nth-child(5),
form[action="tickets.php"] table.list td:nth-child(6) {
    max-width: 20vw;
}

form[action="tickets.php"] table.list th:nth-child(6),
form[action="tickets.php"] table.list td:nth-child(7) {
    max-width: 10vw;
}

form[action="tickets.php"] table.list th:nth-child(7),
form[action="tickets.php"] table.list td:nth-child(8) {
    max-width: 4vw;
}

form[action="tickets.php"] table.list th>.wrap,
form[action="tickets.php"] table.list th>.wrap a {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

form[action="tickets.php"] table.list td:nth-child(6) div.wrap {
    max-width: 75%;
}

.rtl form[action="tickets.php"] table.list td:nth-child(6) div.wrap {
    float: right;
}

form[action="tickets.php"] table.list td:nth-child(6) div.overdueTicket.wrap {
    max-width: calc(75% - 20px);
}

@media screen and (max-width: 1080px) {
    .tickets-page table.list thead th a {
        padding: 8px 0 2px 0 !important;
    }

    .tickets-page table.list tbody td {
        /*padding-left: 0 !important;*/
    }
}

@media screen and (max-width: 860px) {
    .tickets-page table.list thead th a {
        /* background-image: initial !important;	 */
    }
}

/* ==========================================================================
 TICKET LIST HEAD
========================================================================== */
table.list thead th.osta_priority a {
    color: #fff;
    font-size: 1px;
    background-image: url(../icons/exclaimation.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 6px;
    content: "";
}

table.list thead th:first-child a.desc {
    height: 39px !important;
}

form[action="tickets.php"] table.list thead th:first-child:hover {
    background-color: #cfe6ff;
    box-shadow: inset 0 -1px 0 0 #fff;
}

form[action="tickets.php"] table.list thead th:first-child a {
    background-image: initial;
}

form[action="tickets.php"] table.list thead th:first-child a {
    background-image: none;
}

.tickets-page table.list thead th:first-child a.asc,
table.list thead th:first-child a.desc {
    background: initial;
}

/*priority*/
.tickets-page table.list th:first-child a {
    border-radius: 6px 0 0 0 !important;
}

table.list thead th a#selectToggle {
    background: initial;
}

/*checkbox*/

/*description*/

/*number*/
table.list thead th:last-child,
table.list thead th:last-child a {
    border-radius: 0 6px 0 0;
}

.rtl table.list thead th:last-child,
.rtl table.list thead th:last-child a {
    border-radius: 6px 0 0 0;
}

table.list tbody tr:hover td.osta_priority {
    opacity: .8;
}

table.list tbody tr:hover td.osta_priority_emergency {
    filter: brightness(160%);
}

table.list tbody tr:hover td.osta_priority_high {
    filter: brightness(118%);
}

table.list tbody tr:hover td.osta_priority_normal {
    filter: brightness(118%);
}

table.list tbody tr:hover td.osta_priority_low {
    filter: brightness(120%);
}



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

table.list tbody tr:hover td {
    background: #ffe9d2;
}

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

.new-reply {
    background-size: 8px !important;
    background-repeat: no-repeat !important;
    content: '1' !important;
    display: inline-block;
    margin: 0;
    background: #fff;
    color: #000000;
    font-weight: 400;
    padding: 2px;
    border-radius: 10px;
    width: 10px;
    height: 10px;
    line-height: 10px;
    text-align: center;
    position: relative;
    left: -5px;
    border: 1px solid #8a8a8a;
    animation: new-reply-pulse 1.5s ease-in-out infinite;
}

@-webkit-keyframes new-reply-pulse {
    0% {
        -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(117, 178, 226, .3);
        box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(117, 178, 226, .3)
    }

    50% {
        -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(117, 178, 226, .3);
        box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(117, 178, 226, .3)
    }

    to {
        -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(117, 178, 226, .3);
        box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(117, 178, 226, .3)
    }
}

@keyframes new-reply-pulse {
    0% {
        -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(117, 178, 226, .3);
        box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(117, 178, 226, .3)
    }

    50% {
        -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(117, 178, 226, .3);
        box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(117, 178, 226, .3)
    }

    to {
        -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(117, 178, 226, .3);
        box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(117, 178, 226, .3)
    }
}

.nowrap {
    white-space: nowrap;
}

td.osta_ticket div {
    white-space: nowrap;
    vertical-align: middle;
}

td.osta_lastupdated {
    line-height: 22px;
}

.date-text {
    position: relative;
    top: 1px;
}

/*from*/
form[action="tickets.php"] table.list tbody td:nth-child(5) {
    padding-left: 10px;
    font-size: 14px !important;
}

/*description*/
form[action="tickets.php"] table.list tbody td:nth-child(6) {
    padding-left: 10px;
}

.Icon.overdueTicket.link.truncate {
    padding: 0 0 0 20px;
}

td.table-description div {
    font-size: 14px !important;
}

i.icon-comments-alt {
    top: 5px;
    right: 4px;
}

#thread-count {
    float: right;
    position: relative;
    right: 4px;
}

.rtl #thread-count {
    float: left;
    left: 0;
}

#thread-icon {
    float: right;
    padding: 0 4% 0 4px;
}

.rtl #thread-icon {
    float: left;
    padding: 0 4px 0 4%;
}

i.icon-comments-alt {
    top: 2px;
}

/*name*/
form[action="tickets.php"] table.list tbody td:nth-child(7) {
    padding-left: 10px;
    font-size: 12px;
}

/*number*/
a.Icon.Ticket.preview,
a.Icon.apiTicket.preview,
a.Icon.emailTicket.preview,
a.Icon.phoneTicket.preview,
a.Icon.webTicket.preview,
a.Icon.otherTicket.preview {
    margin: 0 0 0 12px;
    margin: 0;
}

a.Icon.Ticket.preview b,
a.Icon.apiTicket.preview b,
a.Icon.emailTicket.preview b,
a.Icon.phoneTicket.preview b,
a.Icon.webTicket.preview b,
a.Icon.otherTicket.preview b {
    font-weight: normal;
    font-size: 10px;
    font-family: 'Open Sans', sans-serif;
}

a[data-preview^="#tasks"],
.orgs #tickets .list a.preview,
.users #tickets .list a.preview,
table.list.queue.tickets a.preview,
#relations a.Ticket.preview,
.tasks .list td:not(.task-number) a[href^="tickets.php"] {
    font-weight: 400;
    border: .5px solid #128dbe;
    border-radius: 2px;
    padding: 2px 3px 2px 3px;
    background: #ffffff7a;
    margin: 0;
    font-size: 10px;
}

a.preview:empty {
    display: none !important;
}

.orgs #tickets .list a.preview,
.users #tickets .list a.preview {
    padding: 2px 3px 0 3px;
}

.orgs #users .list tbody td {
    padding: 14px 0;
    font-size: 14px;
}

.orgs #users .list tbody td:nth-child(3) {
    font-size: 13px;
}

.orgs #users i.icon-fixed-width.icon-file-text-alt {
    top: 4px;
}

.users #tickets .list thead th a {
    padding: 8px 0 2px 0;
}

.users #tickets .list th:first-child {
    background-image: none;
    width: 6% !important;
}

.users #tickets .list th:nth-child(2) {
    width: 13% !important;
}

.users #tickets .list th:nth-child(3) {
    width: 11% !important;
}

.users #tickets .list th:nth-child(4) {
    width: 42% !important;
}

.users #tickets .list th:nth-child(5),
.users #tickets .list th:nth-child(6) {
    width: 14% !important;
}

.users #tickets .list td {
    padding: 14px 0;
    /* font-size: 14px !important; */
    /* messing up User view Tickets tab */
}

.users #tickets .pull-right.faded-more {
    padding-right: 20px;
}

.preview {
    float: left;
}

.rtl .preview {
    float: right;
}

_::-webkit-full-page-media,
_:future,
:root a.preview {
    border: 1px solid #128dbe;
}

/* ==========================================================================
 TICKET LIST - FOOT
========================================================================== */
form[action="tickets.php"] table.list tfoot td {
    padding: 10px 8px 6px 0 !important;
    border-top: .5px solid rgba(0, 0, 0, 0.09) !important;
    border-radius: 0 0 6px 6px;
    font-size: 14px !important;
}

table.list+div,
table.list~div {
    font-size: 14px;
    padding: 12px 12px 0 12px;
}

table.list~div b {
    margin-right: 10px;
}

table.list+div a#queue-export,
#table-foot-options a#queue-export,
table.list.queue.tickets~div a#queue-export {
    margin-left: 10px !important;
}

/* ==========================================================================
 TICKET VIEW
========================================================================== */
.ticket_info {
    background: #fff;
    border: 1px solid #cfd4d6;
    border-radius: 6px;
    margin: 0;
    padding: 0;
}

.ticket_info th {
    color: #4c5156 !important;
    font-weight: 600;
}

.ticket_info td {
    border-radius: 6px;
    background: #fff;
}

.ticket_info {
    margin: 0 0 10px 0;
}

.ticket_info td {
    padding: 3px 8px;
}

.ticket_infotr:first-child td {
    padding-top: 7px;
}

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

.has_bottom_border {
    padding-bottom: 5px;
    border-bottom: none;
}

.flush-left h2 {
    margin: 0;
}

.clear.tixTitle.has_bottom_border h3 {
    margin: -8px 0 3px -4px;
}

.templates .pull-left.flush-left,
.emails .pull-left.flush-left,
.staff .pull-left.flush-left,
.teams .pull-left,
.roles .pull-left,
.departments .pull-left,
.directory .pull-left,
.dashboard .pull-left,
.users .pull-left,
.orgs .pull-left,
.tasks .pull-left.flush-left,
.kb .pull-left,
.categories .pull-left,
.canned .pull-left {
    margin-top: 0;
}

#ticketThread::before {
    margin-left: 83px;
}

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

.thread-entry::before {
    border-top: 2px solid #f3f3f5;
}

.thread-entry::after {
    /*border-bottom: 2px solid #f3f3f5;*/
}

.thread-entry.message .header,
.thread-preview-entry.message .header {
    background: #ffddba;
}

.thread-entry.avatar.message .header:after {
    border-left: 7px solid #ffddba;
}

.thread-entry .header,
.thread-preview-entry .header {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 5px 5px 0 0;
}

.thread-entry .header .title {
    margin-left: 0;
}

.thread-entry.note .header,
.thread-preview-entry.note .header,
.thread-preview-entry.collapsed .header {
    background: #dae9eb;
}

.thread-entry.response .header,
.thread-preview.entry.response .header {
    background: #b2e9f1;
}

.thread-entry.avatar .header:before {
    border-left: 8px solid #dddddd;
}

.textra.light {
    float: right;
    padding-left: 5px;
}

.thread-entry .label-bare {
    display: inline-block;
    padding: 5px 9px 3px 9px;
    border: 0.5px solid #99bbc0;
    background: rgba(255, 255, 255, 0.21);
    margin: -3px 0 0 0;
    color: #3b8ebd;
}

.thread-entry .label-bare i.icon-user,
.thread-entry .label-bare i.icon-code-fork {
    width: 13px;
    height: 13px;
    background-size: 13px !important;
    margin: -2px 0 6px 0;
}

.thread-entry .label-bare .icon-code-fork:before {
    content: "\f126";
    top: 0px !important;
    left: 3px;
    font-size: 14px;
}

.thread-entry.message .header a.white.button.action-button.show-images {
    padding: 1px 4px 4px 4px;
    border: .5px solid #c9b49e;
    background: initial;
    float: right;
    background: rgba(255, 255, 255, 0.21);
}

.thread-preview-entry.collapsed.response .header .thread-name span:first-child {
    color: #4c5156;
}

.thread-entry.message .header a.white.button.action-button.show-images:hover {
    border: .5px solid #c9b49e !important;
    background: rgba(255, 255, 255, 0.37);
}

.thread-event .description {
    margin: 11px 0 0 5px !important;
    padding-top: 0;
    padding-left: 0;
    display: block;
    width: calc(100% - 114px);
    line-height: initial !important;
    color: #3b4450;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    float: left;
}

.thread-entry.avatar.response .header:before {
    border-right-color: #afebf3;
    z-index: 9
}

.thread-entry.avatar.response .header:after,
.thread-entry.avatar.note .header:after {
    /* border-right: 7px solid #dae9eb !important; */
    /*target*/
}

.thread-event {
    background-color: #fff0 !important;
    padding: 0 2px 9px;
    margin: 0 0 16px 60px;
    overflow: hidden;
}

.thread-event i {
    color: #6a798c !important;
}

.thread-event .type-icon {
    border: .5px solid #d8d8d8;
    padding: 9px 12px;
    background-color: #fff;
    position: relative;
    left: -2px;
    top: 0;
    float: left;
}

#thread-items::before {
    margin-left: 79px;
}

#response_options>form {
    /* Ticket View */
    border: .5px solid #cfd4d6;
    /* border-top: none; */
    border-radius: 6px;
}

#response_options>form>table {
    table-layout: fixed;
    padding: 12px;
}

#response_options>form>table td {
    padding: 0 0 10px 0;
}

tbody#to_sec select,
tbody#resp_sec select {
    width: 400px;
}

#ticket_thread.tab_content {
    position: initial;
}

.dropzone {
    z-index: 1;
    position: relative;
    top: -2px;
}

.dropzone .redactor-box {
    margin-top: 14px;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
}

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

.redactor-toolbar {
    background: #f7f7f7;
}

.redactor-toolbar li a {
    color: #128dbe;
}

.redactor-toolbar li a:hover {
    background-color: #128dbe;
}

.redactor-editor {
    font-family: 'Open Sans', sans-serif !important;
}

.filedrop .dropzone {
    border: 1.5px dashed #75a4b1 !important;
    padding: 4px 10px 10px 10px !important;
    border-radius: 0 0 5px 5px !important;
    background-color: #e8f6fa !important;
    color: #7f7f7f !important;
}

.filedrop .dropzone a {
    color: rgb(18, 141, 190);
    text-decoration: underline !important;
}

#response_options>form {
    background: #ffffff;
}

table.ticket_info.custom-data th {
    padding: 13px 17px;
    border-radius: 5px 5px 0 0;
    border-bottom: 1px solid #ccc;
    background-color: initial;
}

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

table.ticket_info.custom-data tr:first-child td {
    padding: 17px 0 17px 17px;
}

table.ticket_info.custom-data tr:only-child td {
    padding: 17px 0 17px 17px;
}

#tasks_content .list td a,
#tasks_content .list td:nth-child(5) {
    font-size: 14px;
}

.tasks .list .task-number a,
#tasks_content .list td a[title="Preview Task"] {
    font-size: 10px;
    padding: 1px 3px 0 13px;
    min-height: 16px;
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: top 2px left 2px;
    background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23128dbe' d='M21%2C7L9%2C19L3.5%2C13.5L4.91%2C12.09L9%2C16.17L19.59%2C5.59L21%2C7Z' /%3E %3C/svg%3E");
}

a#reload-task {
    float: none;
    border: initial;
    font-size: inherit;
}

.merged-parent,
.merged-child {
    font-size: 15px;
    border: 1px solid #777777;
    padding: 2px 6px;
    position: relative;
    top: -3px;
    background: #00000003;
    border-radius: 2px;
}

#relations a.Ticket.preview {
    position: relative;
    top: 2px;
}

#ticket_tabs_container #relations td {
    padding-left: 0;
}

#ticket_tabs_container #relations table.list th:first-child {
    background-image: initial;
    width: 2% !important;
}

#ticket_tabs_container #relations table.list th:nth-child(2) {
    width: 8% !important;
}

#ticket_tabs_container #relations table.list th:nth-child(3) {
    width: 50%;
    font-size: 14px;
}

#ticket_tabs_container #relations table.list th:nth-child(4),
#ticket_tabs_container #relations table.list th:nth-child(5),
#ticket_tabs_container #relations table.list th:nth-child(6) {
    width: 12% !important;
}

/* ==========================================================================
 PRIORITY POPUP (osTicket Awesome mod)
========================================================================== */
table.list th.head-priority a {
    width: 3px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 6px !important;
}

td.cursor.priority {
    padding: 0;
}

table.list tbody tr:nth-child(2n+1):hover td {
    background: #ffe9d2;
}

td.Emergency,
table.list tbody tr:hover td.Emergency,
table.list tbody tr:nth-child(2n+1):hover td.Emergency {
    background: url(../../osta/img/priority-pattern-overlay.png) #fc6872 !important;
}

td.High,
table.list tbody tr:hover td.High,
table.list tbody tr:nth-child(2n+1):hover td.High {
    background: url(../../osta/img/priority-pattern-overlay.png) #e5bc61 !important
}

td.Normal,
table.list tbody tr:hover td.Normal,
table.list tbody tr:nth-child(2n+1):hover td.Normal {
    background: url(../../osta/img/priority-pattern-overlay.png) #a5cb59 !important;
}

td.Low,
table.list tbody tr:hover td.Low,
table.list tbody tr:nth-child(2n+1):hover td.Low {
    background: url(../../osta/img/priority-pattern-overlay.png) #5bb3f5 !important;
}

table.list tbody tr.highlight td {
    /* background: #ddd !important; */
}

table.list tbody tr.highlight td {
    border-top: .1px solid #aaa !important;
    border-bottom: .1px solid #aaa !important;
    background-color: #ddd;
}

td.priority {
    margin: 0 !important;
    padding: 0 !important;
    width: 14px;
    overflow: hidden;
    border-left: 1px solid #DCDCDC !important;
}

td.priority a {
    border-collapse: collapse;
    display: block;
    text-decoration: none;
    font-size: 1px;
    margin: 0 !important;
    height: 34px;
    width: 15px;
}

.priority-popup {
    font-size: 17px;
    line-height: 30px;
}

.tip_content h2,
.priority-popup h3 {
    margin: 4px 0 9px 0;
    /*conflicts with Status link on individual Ticket margin: */
    color: #777777;
    font-weight: 400;
    font-size: 20px;
}

.tip_content.tickets h2 {
    margin: 0;
}

.priority-popup input[type="radio"] {
    margin: 0 5px 0 0;
}

.color {
    float: left;
    margin-right: 5px;
    padding: 0 0 0 0;
    border-bottom: 6px solid #fff;
}

div#priority-4,
div#priority-3,
div#priority-2,
div#priority-1 {
    clear: both;
}

div#priority-4 .color,
div#priority-3 .color,
div#priority-2 .color,
div#priority-1 .color {
    width: 10px;
    height: 24px;
    position: relative;
    top: 4px;
}

td.priority.Emergency a {
    color: #fc6872;
}

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

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

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

td.priority.Normal a {
    color: #a5cb59;
}

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

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

.priority-levels {
    display: flex;
}

.priority-levels .group {
    margin: 0 40px 0 0;
}

.priority-levels .group .input-wrap {
    float: left;
    margin: 3px 0 0 0;
}


td.osta-ticket-action {
    cursor: url(../../osta/icons/edit.png) 10 15, url(../../osta/icons/edit.svg), pointer !important;
    padding: 0 !important;
}

div.body #msg_warning,
div.body #msg_error,
div.body #msg_notice,
div.body #msg_alert {
    margin: 0 0 8px 0;
}

/* ==========================================================================
 TICKET VIEW - 2019
========================================================================== */
input.ckb {
    margin: 0 auto;
}

table.list tbody td.osta_username {
    font-size: 14px;
}

th.osta_priority,
th.osta_priority a {
    width: 16px;
}

th.osta_priority a {
    text-shadow: initial !important;
    font-size: 0 !important;
}

table.list thead th.osta_priority a {
    padding: 0;
    height: 39px;
}

table.list tbody tr.highlight td.osta_priority {
    filter: grayscale(90%);
}

table.list tbody tr.highlight td.osta_priority_emergency {
    filter: grayscale(100%) brightness(125%);
}

table.list tbody td.osta_priority {
    padding: 0;
    border: 2px solid #fff !important;
    border-top: 1px solid #fff !important;
    border-bottom: 1px solid #fff !important;
}

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

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

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

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

td.osta_priority div {
    display: none;
}

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

/* ==========================================================================
 INPUTS
========================================================================== */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: url(../../osta/svg/chevron-down-thin.svg) no-repeat;
    background-position: right 4px center !important;
    background-size: 20px 20px;
    background-color: #fff;
    color: #424242;
    border: .5px solid #bfbfbf !important;
    height: 32px;
    min-width: 305px;
    position: relative;
    top: -1px;
    padding: 0 17px 0 8px !important;
    font-family: 'Open Sans', sans-serif;
}

.rtl select {
    background-position: left 5px center !important;
    padding: 0 8px 0 0 !important;
}

input[type=text],
input[type=password],
textarea,
input {
    min-width: 100px;
    margin: 3px 0 3px 0;
    /*target (Staff login page)*/
    height: 32px;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    padding: 0 0 0 8px;
    border: .5px solid #bfbfbf;
    outline: none !important;
}

textarea {
    padding: 7px 0 0 8px;
    height: initial;
}

.rtl input[type=text],
.rtl input[type=password],
.rtl textarea,
.rtl input {
    padding: 0 8px 0 0;
}

input[type="button"],
input[type="reset"],
input[type="submit"] {
    color: #898989;
    border: .5px solid #898989;
    padding: 8px 26px !important;
    height: unset;
}

input[type="submit"],
input[type="reset"],
input[type="button"],
.action-button,
.button,
button,
button.link.button,
input[type="button"] {
    border-radius: 3px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    /*margin: 0;*/
    padding: 6px 16px;
    color: #898989;
    cursor: pointer;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.action-button:hover,
.button:hover,
button:hover,
button.link.button:hover,
input[type="button"]:hover {
    /*padding: 6px 16px;*/
    /*target*/
    background: #ccd1d6;
    color: #3b4450;
    border: .5px solid #8c9aac;
}

a.green.button {
    background: #fff;
    border: .5px solid #b9b9b9;
}

.green.button:hover {
    background: #ffffff !important;
    border: .5px solid #8c9aac !important;
    color: #3b4450 !important;
    box-shadow: unset;
}

form[action="profile.php"] .action-button,
form[action="profile.php"] .action-button:hover {
    /*height: 40px;*/
    /*target*/
}

input[type="submit"],
input[type="reset"],
input[type="button"],
button,
button.link.button,
input[type="button"] {
    will-change: background;
    transition: all 0.3s ease-in-out;
    font-family: 'Open Sans', sans-serif !important;
}

form#login input[type="text"],
form#login input[type="password"] {
    margin: unset;
}

.action-button {
    margin: 0;
}

input.translatable {
    height: 32px;
    width: 405px;
    border: .5px solid #bfbfbf;
    position: relative;
    top: -1px;
    color: #424242;
}

input[type="text"].translatable {
    border-right: initial !important;
}

div.translatable {
    border: .5px solid #bbb;
    border-right: .5px solid #bbb;
    border-radius: 3px;
}

.input.attached {
    height: 32px;
}

.input.attached input {
    min-width: 169px;
    height: 32px;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    padding: 0 0 0 8px;
    border: .5px solid #bfbfbf;
    border-right: 0;
    float: left;
}

.rtl .input.attached input {
    padding: 0 8px 0 0;
}

input#user-email {
    margin: 0 0 4px 0 !important;
}

.button.attached {
    margin-left: -4px;
    margin-right: -4px;
    margin: 0 -4px 5px -4px;
    box-shadow: none !important;
    border: .5px solid #bfbfbf !important;
    border-left: 0 !important;
    border-radius: 0 3px 3px 0;
    float: left;
}

.banlist .button.attached {
    margin: 3px -4px 5px -4px;
}

.input.attached .button.attached {
    height: 100%;
    box-sizing: border-box;
    border: unset !important;
}

.button.attached:after {
    clear: both;
}

a.attached.button:hover {
    border-left: 0;
}

a.attached.button i.icon-search {
    top: 5px;
}

input[type="radio"] {
    min-width: initial;
    margin: 0 3px 0 0;
    width: 16px;
    height: 15px;
    position: relative;
    top: 3px;
    -webkit-appearance: radio !important;
}

.rtl input[type="radio"] {
    margin: 0 0 0 3px;
}

input[name="title"] {
    margin: 0 !important;
}

td.required+td input,
td.required+td select,
td.required+td .select2-selection,
div#definition td.required+td div.translatable,
form[action*="change-password"] input[type="text"],
form[action*="change-password"] input[type="password"] {
    border-right: 2px solid red !important;
}

#definition td.required+td input {
    border-right: 0 !important;
}

select[name="source"] {
    padding-left: 5px;
}

.rtl select[name="source"] {
    padding-right: 5px;
}

.settings .error {
    /*display: none;*/
    /*why?!*/
}

input[name$="-ext"] {
    min-width: 30px;
    width: 60px;
}

input[placeholder="Keywords � Optional"] {
    padding: 0 0 0 6px !important;
}

.rtl input[placeholder="Keywords � Optional"] {
    padding: 0 6px 0 0 !important;
}

#new-user-form input[type="text"],
#new-user-form input[type="email"] {
    width: 320px;
}

#new-user-form input[size="5"] {
    width: 56px !important;
}

#new-user-form select {
    min-width: 91px;
}

#sequences .manage-buttons {
    margin-right: 80px;
}

.rtl #sequences .manage-buttons {
    margin-left: 80px;
}

.settings input[type="file"] {
    height: 22px;
    margin: 0;
    padding: 5px;
}

#sequences div[style="display:inline-block"] {
    font-size: 16px !important;
    line-height: 16px;
}

input[type="file"] {
    padding: 6px 0 29px 6px;
    background: #d7f4ff;
    height: 0;
}

.buttons input {
    min-width: 100px;
}

#theme-save-button:hover {
    background: #fff;
}

button#do_search,
input[type="submit"],
input[type="reset"],
input[type="button"],
form.-redactor-container button[type=submit] {
    margin: 0 4px;
    box-shadow: none;
    padding: 9px 30px !important;
    color: #515d6d;
    border: initial !important;
    background: #dcdfe2;
    letter-spacing: 1.6px;
    font-weight: 700;
}

button#do_search {
    padding: 9px 43px !important;
}

.dialog input[value="Reset"] {
    display: none;
}

#user-form form.user input[type="tel"],
#user-form form.user input[type="text"] {
    min-width: 222px;
}

td input[type="tel"]+input {
    width: 50px !important;
    min-width: 50px !important;
}

#basic_search input[type="submit"] {
    border: .5px solid rgba(166, 182, 166, 0.7294117647058823) !important;
}

.save.pending,
input[type="submit"],
input[value="Create"],
input[style="color: rgb(255, 0, 0);"],
form.-redactor-container button[type=submit] {
    color: #3c763d !important;
    background-color: #d0e9c6;
    box-shadow: unset;
    border: initial !important;
}

input[style="color: rgb(255, 0, 0);"] {
    box-shadow: unset;
    -webkit-animation: async-save-warning-pulse 1.5s ease-in-out infinite;
    animation: async-save-warning-pulse 1.5s ease-in-out infinite;
}

@-webkit-keyframes async-save-warning-pulse {
    0% {
        box-shadow: 0 0 0 0 #75a4b1, 0 0 0 0 rgba(77, 130, 85, 0.44)
    }

    50% {
        box-shadow: 0 0 0 0 #75a4b1, 0 0 0 4px rgba(77, 130, 85, 0.44)
    }

    100% {
        box-shadow: 0 0 0 0 #75a4b1, 0 0 0 0 rgba(77, 130, 85, 0.44)
    }
}

@keyframes async-save-warning-pulse {
    0% {
        box-shadow: 0 0 0 0 #75a4b1, 0 0 0 0 rgba(77, 130, 85, 0.44)
    }

    50% {
        box-shadow: 0 0 0 0 #75a4b1, 0 0 0 4px rgba(77, 130, 85, 0.44)
    }

    100% {
        box-shadow: 0 0 0 0 #75a4b1, 0 0 0 0 rgba(77, 130, 85, 0.44)
    }
}

input[type="submit"]:hover,
input[value="Create"]:hover,
.save.pending:hover {
    color: #2a3e2a !important;
    box-shadow: unset;
}

.button:hover,
.button:active,
.save.pending:hover,
button#do_search:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
input[type="button"]:active,
input[type="reset"]:hover,
input[type="reset"]:active,
button.link.button:active,
form.-redactor-container button[type=submit]:hover,
form.-redactor-container button[type=submit]:active {
    box-shadow: unset;
    border: initial !important;
    background: #c9cdd0;
    color: #343a42;
    /* height: unset; */
    /*target*/
}

.action-button:hover,
.action-button:active {
    box-shadow: unset;
    background: #fff;
}

input.button[name="delete"]:hover {
    border: .5px solid #c61818 !important;
    color: #c61818 !important;
    background: #edd5d6 !important;
}

a.green.button.action-button.ticket-task-action {
    /* padding: 9px 30px !important; */
    /* target */
}

.action-button.muted {
    box-shadow: none;
}

.action-button i {
    /*position: initial !important;*/
    /*background-position: 1px 1px;*/
    /*whatever reason this is here, it needs to be targeted specifically*/
    /*STILL NEEDED?!*/
    /*background-repeat: no-repeat;*/
}

.action-button i:hover {
    /*background-position: 1px 1px;*/
    /*whatever reason this is here, it needs to be targeted specifically*/
}

.action-dropdown,
.noclick-dropdown {
    width: fit-content;
}

.action-dropdown ul li a>i {
    background-position: 0 0 !important;
    width: 20px !important;
    height: 20px !important;
    top: 6px;
    font-size: 21px;
    background-repeat: no-repeat !important;
    margin: 0 6px 0 0;
}

.rtl .action-dropdown ul li a>i {
    margin: 0 0 0 6px;
}

.action-dropdown ul li>a {
    line-height: 30px;
}

.rtl .action-dropdown ul.bleed-left li>a {
    padding-right: 8px;
}

#msg_info i.icon-info-sign {
    display: none;
}

.action-button i.icon-caret-down,
.action-button.muted i.icon-caret-down {
    border-left: .5px solid #ccc;
    float: right !important;
    padding: 0 0 0 4px;
    height: 21px;
}

.rtl .action-button i.icon-caret-down {
    border-right: initial;
    margin-left: 6px;
    margin-right: 0;
}

span.action-button {
    margin: 0 2px;
}

/*span.action-button[data-original-title="Change Status"] {
    margin-left: 0;
}*/
a#post-note,
.icon-mail-reply:before,
.icon-reply:before {
    color: #128dbe;
}

a#post-note:hover {
    background-color: #fff;
}

a.attached.button:hover {
    background: #fff;
    background: -moz-linear-gradient(top, #fafafa 0%, #e7ebf0) #ffffff;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e7e7e7)) #ffffff;
}

.link.button {
    background: #fff;
    border: .5px solid #b1b1b1;
    padding: 6px 16px;
    color: #b1b1b1;
}

.link.button:hover,
.link.button:active {
    background: #ccd1d6;
    color: #fff;
}

.red.button.action-button {
    /*margin-right: 0;*/
    /*whatever reason this is here, it needs to be targeted specifically*/
}

.red.button.action-button:hover>a [class^="icon-"] {
    color: #d01919;
}

.red.button:hover {
    box-shadow: none;
    color: #d01919;
    border: .5px solid #d01919 !important;
    background-color: #fff;
    height: 22px;
}

button.red.button[name="delete"] {
    background: #fff;
    border-width: .5px !important;
    border: .5px solid #aa9e9e;
    box-shadow: unset;
}

button.red.button[name="delete"]:hover {
    background: #ffd9d9 !important;
    border: .5px solid #cd8f8f !important;
}

.button-text.advanced-search svg {
    width: 16px !important;
    height: 16px !important;
    position: relative;
    fill: #128dbe;
    top: 0 !important;
    left: 4px;
    margin: 2px 4px 0 0;
    float: right;
}

.action-button.advanced-search.gray-light2 {
    margin-right: 0;
    margin-left: 8px;
    position: relative;
    /* right: -3px; */
}

.rtl .action-button.advanced-search.gray-light2 {
    right: 1px;
}

.button-text.advanced-search:hover>svg {
    fill: #0c5c7b;
}

.action-button:hover>i {
    /*color: #0c5c7b;*/
    /*target*/
}

.action-button:hover>a [class^="icon-"] {
    color: #0c5c7b;
}

.action-button.danger {
    background: -moz-linear-gradient(top, #fafafa 0%, #e7ebf0) #ffffff;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f3f3f3)) #ffffff;
    border: .5px solid #aaa;
    opacity: 1;
}

.action-button.danger:hover {
    background: #ef0d0d !important;
}

#content .pull-right .action-button.muted,
.action-button.muted[data-dropdown="#sort-dropdown"] {
    float: right;
    margin: 0 0 0 6px;
    /* sort button on ticket pages */
}

.rtl .action-button.muted[data-dropdown="#sort-dropdown"] {
    float: left;
    margin: 6.5px 6px 0 0;
}

.tasks .action-button.muted[data-dropdown="#sort-dropdown"] {
    margin: 0 0 0 6px;
}

.valign-helper {
    margin-top: 48px !important;
}

button.translatable {
    margin: 1px 1px 0 0;
    background: unset;
}

input~button.translatable {
    width: 28px;
    height: 28px;
    padding: 0;
}

input~button.translatable:hover {
    background: #f7db94bd !important;
    border: initial;
}

input.translatable[value="Support"] {
    width: 247px !important;
    height: 30px !important;
    padding: 0 0 0 8px !important;
}

.button-text.advanced-search,
span.sort-button-text,
.pull-right.flush-right.page-top .action-button.muted {
    letter-spacing: initial;
    color: #585858;
}

button[type=submit],
input[type="submit"],
.primary.button {
    box-shadow: unset;
}

button[name="remove-users"] {
    background: #fff;
}

#user-info a.inline.button {
    padding: 6px 16px;
    margin: 0 0 0 10px;
    border: .5px solid #797777;
}

#user-info a.inline.button:hover {
    height: 22px;
    line-height: 22px;
}

.action-dropdown ul li>a>i[class^="icon-"]:before {
    top: 1px !important;
    margin: 0 10px 0 0 !important;
}

.action-dropdown ul li>a:hover>i[class^="icon-"]:before {
    color: #fff !important;
}

#advanced-search i.icon-save {
    position: relative;
    top: 1px;
    margin-right: 6px !important;
}

button.save.button {
    background: #dcdfe2;
}

button.save.button:hover {
    background: #c9cdd0;
}

form#advsearch button#do_save {
    /*advanced ticket search*/
    color: #3c763d !important;
    background-color: #d0e9c6;
    padding: 9px 40px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
}

form#advsearch button#do_save:hover {
    /*advanced ticket search*/
    color: #2a3e2a !important;
    background: #ccd1d6;
    box-shadow: initial;
}

/* ==========================================================================
 SVG ICONS - TWEAKS
========================================================================== */
.action-button i {
    position: relative !important;
    top: 2px !important;
    left: 1px;
    margin: 0 4px 0 0;
}

i.icon-upload:before {
    top: 0;
    width: 32px;
}

i.icon-mail-reply {
    top: 1px !important;
}

.tip_content .links {
    border-top: .5px solid #ddd;
}

.tip_content i.icon-info-sign.faded {
    top: 0;
    /*target*/
    margin-right: 4px !important;
}

button.action-button.pull-right .icon-gear:before {
    top: -2px;
}

form[action="#sequence/manage"] i.icon-plus {
    float: initial;
}

input[type="submit"] i,
input[type="reset"] i,
input[type="button"] i,
.action-button i,
.button i {
    margin-right: 4px;
}

/* ==========================================================================
 TOOLTIPS
========================================================================== */
.tooltip {
    position: absolute;
    z-index: 9999999;
    display: block;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-break: auto;
    line-height: 1.428571429;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    white-space: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    font-size: 12px;
    opacity: 0;
    filter: alpha(opacity=0);
}

.tooltip.in {
    opacity: 0.9;
    filter: alpha(opacity=90);
}

.tooltip.top {
    margin-top: -3px;
    padding: 5px 0;
}

.tooltip.right {
    margin-left: 3px;
    padding: 0 5px;
}

.tooltip.bottom {
    margin-top: 3px;
    padding: 5px 0;
}

.tooltip.left {
    margin-left: -3px;
    padding: 0 5px;
}

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #ffffff;
    text-align: center;
    background-color: #000000;
    border-radius: 4px;
}

.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.tooltip.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000000;
}

.tooltip.top-left .tooltip-arrow {
    bottom: 0;
    right: 5px;
    margin-bottom: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000000;
}

.tooltip.top-right .tooltip-arrow {
    bottom: 0;
    left: 5px;
    margin-bottom: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000000;
}

.tooltip.right .tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-right-color: #000000;
}

.tooltip.left .tooltip-arrow {
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-width: 5px 0 5px 5px;
    border-left-color: #000000;
}

.tooltip.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000000;
}

.tooltip.bottom-left .tooltip-arrow {
    top: 0;
    right: 5px;
    margin-top: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000000;
}

.tooltip.bottom-right .tooltip-arrow {
    top: 0;
    left: 5px;
    margin-top: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000000;
}

.tooltip {
    font-family: "Open Sans", Helvetica, Arial, sans-serif !important;
}

.tooltip-inner {
    padding: 6px 10px !important;
    background-color: var(--header-bg) !important;
    color: var(--header-title) !important;
}

.tooltip.bottom {
    margin-top: 1px !important;
}

.tooltip.top {
    margin-top: 0 !important;
}

.tooltip.top .tooltip-arrow {
    border-top-color: var(--header-bg) !important;
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: var(--header-bg) !important;
}

#ticket-preview_container .ticket_info {
    border: initial;
}

#ticket-preview_container .ticket_info th {
    color: #4c5156 !important;
    font-weight: 500;
}

.ticket_info .preview {
    float: none;
    padding: 0;
}

a.manage-collaborators.preview {
    border: initial !important;
}

#ticket-preview_container .tab_content {
    background: #fff;
    border: .5px solid #aaa;
    border-radius: 6px;
}

.tip_menu {
    margin: 20px 0 0 0;
    border-top: .5px solid #aaa;
}

.tip_menu li a:hover {
    color: #128dbe;
}

.tip_menu li a {
    color: #128dbe;
    display: block;
    width: auto;
    float: left;
    padding: 0 16px;
    border-right: .5px solid #ffffff;
}

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

/* ==========================================================================
 TICKET OPEN ticket-open.inc.php
========================================================================== */
.dialog h3 {
    color: #777777;
    font-family: 'Product Sans', 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 25px;
}

.dialog hr {
    visibility: hidden;
}

input#user-search {
    font-size: 14px;
}

#the-lookup-form #msg_info {
    margin: 0 0 20px 0;
    /*padding: 14px 10px 14px 16px;*/
    /*Conflicts with Tickets > Open New > Lookup*/
}

.form_table th,
div.section-break {
    text-align: left;
    background: #eee;
    background-color: initial;
    border: initial;
    padding: 4px 10px 10px 0;
    font-size: 126%;
    color: #777777;
    /*font-family: 'Lato';*/
    font-weight: 400;
}


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

.form-header.section-break {
    margin: 20px 0 15px 0;
}

.form-header.section-break h3 {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
}

.form-header.section-break em p {
    font-size: 14px;
    margin: 0;
}




.form_table .form-instructions {
    font-size: 14px;
}

.form_table .form-instructions p {
    margin: 0;
}

.form_table {
    border: initial;
    padding-top: 10px !important;
}

.form_table.fixed .form_table {
    padding-top: 0 !important;
}

.form_table.fixed .form_table i.icon-retweet,
.form_table.fixed .form_table i.icon-plus {
    width: 19px;
    top: 1px;
    right: 0;
    padding: 0;
    margin: 0;
    padding: 0 6px 0 0;
    float: left;
}

.form_table.settings_table td textarea {
    padding: 8px 0 0 8px;
}

.form_table.settings_table .indented {
    padding-left: 0;
}

.form_table td {
    border-bottom: initial;
}

h3.title,
.form_table th em,
.thread-body.bleed h3 {
    display: block;
    color: #777;
    font-style: initial;
    font-size: 18px;
    margin-top: 10px;
    font-weight: 500;
    font-family: 'Open Sans', sans-serif;
}

.form_table th em strong,
.thread-body.bleed h3 {
    font-weight: 500;
}

.form_table tbody tr:first-child th em {
    margin: 0;
}

.form_table th em b {
    font-weight: normal;
}

.form_table .required {
    font-weight: 500;
}

.thread-body h1,
/*Open Ticket page */
.thread-body h2,
.thread-body h3 {
    margin-top: 20px;
    margin-bottom: 0;
}

.thread-body.bleed {
    background: initial;
}

.time-zone-msg {
    color: #777;
    font-style: italic;
    font-size: 11px;
}

input#user-email {
    width: 336px;
}

input#user-name {
    width: 360px;
}

input[type="checkbox"] {
    min-width: initial;
}

#dynamic-form select {
    width: 330px;
    border: .5px solid #bfbfbf;
}

select#time {
    padding-right: 29px !important;
}

table.grid.form select[name*="time"] {
    width: 173px !important;
}

.rtl select#time {
    padding-left: 29px !important;
}

#response_options input[type=text],
#response_options textarea:not(.richtext) {
    border: .5px solid #bfbfbf;
}

form[action="tickets.php?a=open"] table.form_table.fixed tbody th[colspan="2"]:nth-child(1) {
    padding-top: 25px !important;
}

form[action="tickets.php?a=open"] table.form_table.fixed tbody:nth-child(2) th[colspan="2"]:nth-child(1) {
    padding-top: 0 !important;
}

.tickets .form_table.fixed,
.tickets-page .tickets .form_table {
    width: 100% !important;
}

.tickets .form_table {
    width: 660px;
}

.form_table.fixed select,
.form_table.fixed .select {
    width: 320px;
}

.form_table.fixed label {
    margin-right: 20px;
}

tr#ccRow td.userRow-button a.inline.button,
tr#userRow td.userRow-button a.inline.button,
.form_table.fixed .form_table .button {
    padding: 4px 0 4px 10px !important;
    /* Staff Open a New Ticket buttons */
}

.form_table.fixed .button,
.form_table.fixed .button:hover,
.form_table.fixed .button:active {
    border: .5px solid #bfbfbf !important;
    /* background-color: #e4e4e4 !important; */
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f3f3f3)) #ffffff;
}

#time-zone td {
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    top: -5px;
}

input.hasDatepicker~select {
    width: 103px !important;
}

.tickets a.inline.button {
    min-width: 95px;
}

/* ==========================================================================
 TABLES - MISC
========================================================================== */
table.custom-info th,
td[style="border-bottom: 1px dotted black"] {
    border: none !important;
}

table.custom-info td,
td[style="width:30%;border-bottom: 1px dotted #ccc"] {
    border-bottom: .5px solid rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
 LOADING ANIMATION
========================================================================== */
#loading {
    display: none;
    vertical-align: middle;
    border: initial;
    padding: 0;
    width: 100px;
    height: 100px;
    background: initial;
    position: fixed;
    z-index: 3000;
    box-shadow: initial;
    left: calc(50% - 50px) !important;
    top: 50% !important;
}

#loading h1,
#upgrading h1 {
    display: none;
}

.loading-icon {
    padding: 0;
    margin-left: -8px;
    margin-top: 8px;
    background-color: #fff;
    height: 18px;
    width: 18px;
    display: block;
    background-size: contain;
    border: 4px solid #fff;
    border-radius: 50%;
    position: fixed;
    z-index: 3000;
}

i.icon-spinner {
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100px;
    height: 100px;
}

i.icon-spinner:before {
    display: block !important;
}

#loading i.icon-spinner:before,
#upgrading i.icon-spinner:before {
    background-image: url(../../osta/img/loading.svg);
    content: ' ';
    background-position: center !important;
    border-radius: 50%;
    vertical-align: middle;
    width: 100px !important;
    height: 100px !important;
    background-size: 100px 100px !important;
    top: 0 !important;
}

.icon-3x {
    font-size: initial;
}

.spin {
    -webkit-animation: gi-spin 1.5s infinite linear;
    animation: gi-spin 1.5s infinite linear;
}

@-webkit-keyframes gi-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@keyframes gi-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

#popup,
.modal.fade .modal-dialog {
    opacity: 0;
    animation-name: lightSpeedIn;
    animation-duration: 450ms;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

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

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

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

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

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

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

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

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

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

/* ==========================================================================
 DASHBOARD
========================================================================== */
.dashboard div[style="min-height:25px;"],
.directory div[style="min-height:25px;"] {
    float: right;
    position: relative;
    top: 1px;
    right: -13px;
}

.dashboard div[style="min-height:25px;"] {
    top: -6px;
}

.directory div[style="min-height:25px;"] input[type="text"] {
    margin: 0 6px 0 0;
    height: 30px;
}

.directory div[style="min-height:25px;"] .select2.select2-container {
    margin: 0;
    height: 35px;
}

.directory div[style="min-height:25px;"] input[type="submit"] {
    position: relative;
    top: -3px;
    height: 20px;
    padding: 4px 0 6px 0 !important;
    margin: 0 -11px 0 -6px;
}

.directory div[style="min-height:25px;"] input[type="text"] {
    margin: 0 4px 0 0;
}

form[action="directory.php"] input[type="submit"] {
    padding: 5px 16px !important;
}

#ticket-count {
    float: right;
    position: relative;
    top: 10px;
}

#user-profile .floating-options i.icon-edit,
#user-profile .floating-options i.icon-share {
    /*padding: 3px !important;*/
}

table.list thead th:first-child a.desc {
    border-radius: 6px 0 0 0;
}

.directory table.list td {
    font-size: 13px !important;
}

.table tr.header {
    border-bottom: 0;
}

.thread-body i {
    width: 100%;
}

input.staff-username.typeahead {
    margin: 0;
}

.table tr:not(:last-child):not(.header) {
    border-bottom: 0;
}

.tab_content:not(.left) {
    padding: 10px;
}

.ui-datepicker-trigger:after {
    content: ' ';
    background-image: url(../icons/calendar-clock.svg);
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    position: relative;
    opacity: 1;
    visibility: visible;
    display: inline-block;
    top: 3px;
    left: 2px;
    background-size: 20px;
}

.ui-datepicker-trigger:hover:after {
    opacity: 1;
}

.ui-datepicker-trigger {
    width: 30px;
}

img[src="./images/cal.png"] {
    display: none;
}

button.ui-datepicker-trigger {
    border: .5px solid #aaa;
    display: inline;
    height: 32px;
    width: 40px;
    top: 3px;
    margin-left: 8px;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f3f3f3)) #ffffff;
}

button.ui-datepicker-trigger:hover {
    padding: 0;
}

.rtl button.ui-datepicker-trigger {
    margin-right: 8px;
    margin-left: 0;
}

div[style="min-height:25px;"] {
    float: right;
}

.directory h2 {
    margin-bottom: 26px;
}

.directory select#did {
    min-width: 184px;
}

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

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

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

.dashboard button.ui-datepicker-trigger {
    top: 4px;
}

.dashboard .select2-selection.select2-selection--single {
    margin: 0 0 2px 0;
    height: 32px;
}

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

.dashboard button.green.button.action-button:before {
    content: "";
    position: relative;
    margin: 4px 0 0 0;
    display: inline-block;
    top: 3px;
    height: 16px;
    width: 16px;
    background-size: 18px;
    background-position: center;
    left: initial;
    right: initial;
    background-color: initial;
    background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23128dbe' d='M17.65%2C6.35C16.2%2C4.9 14.21%2C4 12%2C4A8%2C8 0 0%2C0 4%2C12A8%2C8 0 0%2C0 12%2C20C15.73%2C20 18.84%2C17.45 19.73%2C14H17.65C16.83%2C16.33 14.61%2C18 12%2C18A6%2C6 0 0%2C1 6%2C12A6%2C6 0 0%2C1 12%2C6C13.66%2C6 15.14%2C6.69 16.22%2C7.78L13%2C11H20V4L17.65%2C6.35Z' /%3E %3C/svg%3E");
}




.dashboard input.hasDatepicker {
    min-width: 100px !important;
}

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

.dashboard .tab_content {
    min-height: initial;
}

.dashboard button.link.button {
    margin: 6px 0 0 0;
}

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

.dashboard hr {
    display: none;
}

/* My Profile */
i.icon-map-marker {
    top: -4px !important;
}

#recipients .select2-container .select2-search--inline {
    float: initial !important;
}

table.table.two-column {
    width: initial !important;
}

input[name="phone_ext"] {
    min-width: 35px !important;
    width: 35px !important;
}

button#change-pw-button {
    height: 21px;
    position: relative;
    top: -3px;
    /*target?*/
}

form[action="profile.php"] a.button.no-pjax {
    margin-top: 10px;
    height: 22px;
}

.grid.form tr:last-of-type input[type="password"] {
    margin-top: 9px;
    /* Profile > Change Password > last field */
}


/* ==========================================================================
 DATEPICKER
========================================================================== */
.ui-datepicker.ui-datepicker-multi {
    width: auto !important;
}

.ui-widget-content {
    border: .5px solid #c7c7c7;
    background: #e7e7e9;
    color: #333;
}

.ui-widget-header {
    border: none !important;
    background: var(--nav-bar-bg);
    position: relative !important;
    z-index: 100 !important;
    color: var(--nav-bar-link);
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    border: .5px solid #ccc;
    background: #fff;
    font-weight: 500;
    color: #128dbe;
    height: 25px;
    width: 28px;
}

.ui-datepicker-calendar a.ui-state-default.ui-state-hover {
    color: #128dbe;
    font-weight: 500;
    border: .5px solid #97bdcb;
    background: #bdedff !important;
}

.ui-datepicker-close .ui-state-hover {
    border: .5px solid #ccc;
    background: #fff;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    border: 1px solid var(--nav-bar-bg) !important;
    background: var(--nav-bar-bg) !important;
    font-weight: bold;
    color: var(--nav-bar-link) !important;
}

.ui-datepicker th {
    color: var(--header-bg);
    font-weight: 300;
}

.ui-datepicker .ui-datepicker-buttonpane button {
    line-height: 17px;
}

.ui-datepicker .ui-datepicker-title {
    line-height: 2em;
    font-family: 'Open Sans', sans-serif;
}

.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-left span.ui-icon.ui-icon-circle-triangle-w,
.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-right span.ui-icon.ui-icon-circle-triangle-e {
    background-image: initial;
    top: 12px !important;
}

span.ui-icon.ui-icon-circle-triangle-w:before,
span.ui-icon.ui-icon-circle-triangle-e:before {
    position: absolute;
    content: '>';
    display: block;
    color: var(--nav-bar-link);
    width: 20px;
    height: 20px;
    text-indent: initial;
    font-family: monospace;
    font-size: 20px;
    font-weight: 100;
    line-height: 20px;
}

a.ui-datepicker-prev.ui-corner-all span.ui-icon.ui-icon-circle-triangle-w:before {
    content: '<';
    left: 4px;
}

a.ui-datepicker-prev.ui-corner-all:hover span.ui-icon.ui-icon-circle-triangle-w:before {
    left: 2px;
}

a.ui-datepicker-next.ui-corner-all:hover span.ui-icon.ui-icon-circle-triangle-e:before {
    left: 2px;
}

a.ui-datepicker-prev.ui-corner-all.ui-state-hover,
a.ui-datepicker-next.ui-corner-all.ui-state-hover {
    background: initial !important;
}

/* ==========================================================================
 AGENT PANEL
========================================================================== */
.dashboard h2:first-child,
.directory h2:first-child,
.users h2:first-child,
.orgs h2:first-child,
.tasks h2:first-child,
.tickets h2:first-child,
.kb h2:first-child,
.categories h2:first-child,
.canned h2:first-child,
.profile h2 {
    margin-bottom: 10px;
}

.tickets table.list {
    margin: 0;
}

.message.bar {
    background-color: #93e0ff;
    opacity: 1;
    color: #263f49;
}

.message.bar.warning {
    border-bottom: 0;
    z-index: 999999;
}

.message.bar .body {
    margin-left: 20px;
    margin-right: 90px;
}

.message.bar.top.warning .button.inline {
    vertical-align: top;
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
    background: #b0e8ff;
    color: #445b65;
    color: #263f49;
    letter-spacing: 1.4px;
    border: .5px solid #263f49 !important;
}

.message.bar.warning {
    -webkit-animation: async-progress-bar-pulse 1.5s ease-in-out infinite;
    animation: async-progress-bar-pulse 1.5s ease-in-out infinite;
}

@-webkit-keyframes async-progress-bar-pulse {
    0% {
        box-shadow: 0 0 0 2px #75a4b1, 0 0 0 2px #128dbe;
    }

    50% {
        box-shadow: 0 0 0 2px #75a4b1, 0 0 0 10px #128dbe;
    }

    100% {
        box-shadow: 0 0 0 2px #75a4b1, 0 0 0 2px #128dbe;
    }
}

@keyframes async-progress-bar-pulse {
    0% {
        box-shadow: 0 0 0 2px #75a4b1, 0 0 0 2px #128dbe;
    }

    50% {
        box-shadow: 0 0 0 2px #75a4b1, 0 0 0 10px #128dbe;
    }

    100% {
        box-shadow: 0 0 0 2px #75a4b1, 0 0 0 2px #128dbe;
    }
}

table.list td[colspan="6"] i,
table.list td[colspan="7"] i,
table.list td[colspan="8"] i {
    width: 100%;
    padding: 10px 0;
    color: #828282 !important;
}

/* ==========================================================================
 STICKYBAR
========================================================================== */
.sticky.bar.opaque,
.sticky.bar.fixed,
.sticky.bar.fixed .flush-right {
    background-color: var(--stickybar);
}

.sticky.bar.fixed {
    box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .1);
}

.sticky.bar.fixed {
    margin-top: 0;
    padding: 1% !important;
    z-index: 999999;
}

.sticky.bar.fixed .valign-helper {
    margin: 0 !important;
}

.sticky.bar.fixed .action-button.muted[data-dropdown="#sort-dropdown"] {
    margin: 0 0 0 6px;
}

.scroll-up {
    display: none;
}

.sticky.bar.fixed .pull-left h2,
.sticky.bar.fixed .pull-left h2 a,
.sticky.bar.opaque.fixed .pull-left h2,
.sticky.bar.opaque.fixed .pull-left h2 a {
    color: #fff;
}

.sticky.bar.opaque.fixed .pull-left {
    float: left;
    margin: 0
}

.sticky.bar.fixed .action-button,
.sticky.bar.fixed .green.button {
    border: .5px solid #ffffff;
    color: #ffffff;
    text-shadow: none;
    background-color: var(--stickybar) !important;
}

.sticky.bar.opaque.fixed .action-button i.icon-caret-down,
.action-button.muted i.icon-caret-down {
    border-left: 0;
    margin-left: 0;
}

.sticky.bar.fixed .sort-button-text {
    color: #fff;
    font-weight: 100;
}

.sort-button-text {
    text-shadow: none;
}

.sticky.bar .content {
    margin: auto;
    width: 100% !important;
    max-width: 1200px !important;
}

.sticky.bar.fixed .flush-left,
.sticky.bar.fixed .pull-left.flush-left {
    display: inline-block !important;
}

.sticky.bar.fixed .merged-parent,
.sticky.bar.fixed .merged-child,
.sticky.bar.fixed .flush-left h2 a {
    color: var(--header-title);
    border-color: var(--header-title);
}

.sticky.bar.fixed {
    padding: 0 0;
    min-height: unset !important;
}

.sticky.bar.fixed h2:first-child {
    margin: 0 0;
    position: unset !important;
}

.sticky.bar.fixed .configureQ i.icon-cog {
    display: none;
}

.users .sticky.bar.fixed .pull-right {
    margin-top: 0;
}

.pull-right.flush-right.page-top {
    float: right;
}

.rtl .pull-right.flush-right.page-top {
    float: left;
}

/* ==========================================================================
 KNOWLEDGEBASE
========================================================================== */
.Icon.file {
    background-image: url(../../osta/icons/paperclip.svg);
    width: 20px;
}

.icon-paperclip:before,
.icon-paper-clip:before {
    width: 17px;
    position: relative;
    top: 2px;
    background-image: url(../../osta/icons/paperclip.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 8px;
    content: '';
    height: 17px;
}

.attachments .icon-paperclip:before,
.attachments .icon-paper-clip:before {
    background-size: 8px !important;
}

.attachments i.icon-paperclip.icon-flip-horizontal {
    margin: 0 !important;
    top: 3px !important;
}

.attachments small.filesize.faded {
    margin-left: 10px !important;
    display: inline-block;
    position: relative;
    top: 1px;
}

td.table-description i.small.icon-paperclip.icon-flip-horizontal {
    margin-left: 0;
    top: 3px;
    padding-left: 0;
}

#kb {
    padding: 5px 0;
}

#kb li {
    padding: 14px 10px 4px 56px;
    background-image: url(../../osta/icons/faq.svg);
    background-size: 40px;
    background-position: 0 50%, bottom left;
    border-bottom: .5px solid #ddd;
    background-repeat: no-repeat;
}

.kb h4,
#kb li h4 a {
    font-size: 15px;
    vertical-align: initial;
    font-family: 'Open Sans', sans-serif;
}

.canned table.form_table.fixed tr:first-child {
    display: none;
}

.canned .form_table tr:nth-child(2) th em {
    margin-top: -21px;
}

.faq-content {
    /* 	width: initial;
    max-width: calc(100% - 300px) !important;
    margin: 0 15px; */
}

.faq-title.pull-left {
    color: #777777;
    font-weight: 400;
    font-size: 22px;
}

.faq #trans_container .tab_content {
    border: none !important;
}

.faq hr {
    border: 0;
}

#breadcrumbs {
    background-color: unset;
}

.sidebar {
    /*     width: 220px;
    float: right;
    padding: 10px; */
    border: .5px solid #a8a6a6;
    background-color: #ebebeb !important;
    border-radius: 3px;
    margin: 0 14px 20px 0;
}

.rtl .sidebar {
    /*     float: left; */
}

.searchbar .search {
    width: 98%;
}

.pull-right.sidebar.faq-meta div:first-child {
    /*     margin: 0 0 5px 0; */
}

.faq-content {
    width: initial;
}

.faq-content .thread-body.bleed {
    background: unset;
    /*width: calc(100% - 270px);*/
}

.faq button.red.button {
    margin: 0 0 2em 1em;
    border: 1px solid #b9b9b9 !important;
    background: #fff !important;
}

#faq ol li:hover {
    background-color: unset;
}

#faq ol li {
    padding: 10px 0 4px;
    border-bottom: unset;
}

#notes.tab_content .faded:before {
    content: ' (';
}

#notes.tab_content .faded:after {
    content: ')';
}

a.previewfaq {
    font-size: 15px !important;
}

.faq-page .span8 {
    /*     width: 100%; */
}

.faq-page .thread-body {
    /*     width: 100%; */
    border: 0;
}

.kb strong {
    color: #777779;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
}

.categories .pull-right.flush-right .pull-right.flush-right {
    margin-top: 0;
}

ul#trans li.empty,
ul#content-trans li.empty {
    top: -8px;
}

ul#trans,
ul#content-trans {
    display: inline-block;
}

span.count {
    font-size: 150%;
    font-weight: 200;
    position: relative;
    top: 2px;
    color: #128dbe !important;
}

.rtl span.count {
    font-size: 100%;
    top: 0;
    margin-right: 4px;
    display: inline-block;
}

/* ==========================================================================
 ADMIN PANEL
========================================================================== */
/*system.php*/
.system table.list thead:first-child th:first-child {
    border-radius: 6px 6px 0 0;
}

.system table.list th:first-child {
    padding: 0 10px !important;
    background-image: none;
    border-radius: 0;
}

.system table.list tbody tr:nth-child(2n+1) td {
    background-color: #ffffff;
}

.system table.list th {
    font-size: 16px !important;
}

.system table.list td {
    font-size: 13px !important;
    border-bottom: .5px solid #e4e4e4 !important;
    padding-left: 20px !important;
}

.system table.list tr:first-child td {
    border-top: .5px solid #e4e4e4 !important;
}

.system table.list tbody tr:hover td {
    background: #fff;
}

span[style="color:green"] i {
    margin: 0 1px 0 1px !important;
}

.system table.list i {
    top: 0;
    right: -2px;
    margin: 0 4px 0 -2px;
}

.system table.list .icon-warning-sign {
    color: #d51818 !important;
}

.system table.list .label-danger i.icon.icon-warning-sign {
    font-size: 14px;
    color: #d51818 !important;
}

.system tbody:last-child tr:last-child td:first-child {
    border-radius: 0 0 0 6px;
}

.system tbody:last-child tr:last-child td:last-child {
    border-radius: 0 0 6px 0;
}

/*Language Packs*/
.system-page div[style="margin: 0 20px"] {
    border: .5px solid #aaa;
    border-radius: 6px;
    background: #fff;
    margin: 20px 0 0 0 !important;
    padding: 4px 12px 12px 12px;
}

.system-page .label-danger {
    padding: 0 0 6px 0;
    border: .5px solid #949495;
    opacity: .7;
    position: relative;
    top: -5px;
}

.system-page div[style="margin: 0 20px"]>div {
    padding: 10px 0 10px 10px;
    border-bottom: .5px solid #e4e4e4 !important;
    margin: 0;
    min-height: 86px;
    font-size: 13px;
}

.system .ar_EG,
.system .ar,
.system .ar_SA,
.system .az,
.system .bg,
.system .bn,
.system .bs,
.system .ca,
.system .cs,
.system .da,
.system .de,
.system .el,
.system .en_CAD,
.system .en_GB,
.system .en_US,
.system .es_AR,
.system .es_ES,
.system .es_MX,
.system .et,
.system .eu,
.system .fa,
.system .fi,
.system .fr,
.system .gl,
.system .he,
.system .hi,
.system .hr,
.system .hu,
.system .id,
.system .is,
.system .it,
.system .ja,
.system .ka,
.system .km,
.system .ko,
.system .lt,
.system .lv,
.system .mk,
.system .mn,
.system .ms,
.system .nl,
.system .no,
.system .pl,
.system .pt_BR,
.system .pt_PT,
.system .ro,
.system .ru,
.system .sk,
.system .sl,
.system .sq,
.system .sr,
.system .sr_CS,
.system .sv_SE,
.system .sw,
.system .th,
.system .tr,
.system .uk,
.system .ur_IN,
.system .ur_PK,
.system .in,
.system .pk,
.system .vi,
.system .zh_CN,
.system .zh_TW {
    background-position: top 0px right 11px !important;
}

.system-page i.icon.icon-warning-sign {
    margin: 0 8px;
}

.system-page .icon-warning-sign:before {
    content: "\f071";
    color: #5f5f5f;
}

.system-page div[style="margin: 0 20px"] h3 {
    margin-bottom: 0 !important;
    padding-bottom: 0;
    color: #7e7e7e;
}

.system table.list~div h3,
.system table.list~div h3 strong {
    color: #707070;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
}

.advanced-search .adv-search-val .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    height: initial !important;
}

.select2-container--default .select2-selection--multiple:not(.faq-page .select2-selection--multiple) {
    background-color: white;
    border: .5px solid #cacaca;
    border-radius: 4px;
    cursor: text;
    width: 300px;
}

textarea#_3cd1c655ae15857b {
    height: 41px;
}

.select2-container .select2-search--inline .select2-search__field {
    margin-top: 0;
}

/* tr#userRow span.select2.select2-container.select2-container--default,
tr#ccRow .select2-container--default .select2-selection--multiple,
.tickets-page span.select2-dropdown.select2-dropdown--below {
    width: 505px !important;
} */


.row-item {
    border: .5px solid rgba(132, 132, 132, 0.7);
    padding: 12px;
}

.row-item .management {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #777777;
}

.icon-gear:before,
.icon-cog:before {
    color: #128dbe;
}

input.-current {
    min-width: 134px !important;
}

table.form_table.settings_table td em b {
    font-weight: 500 !important;
}

table.form_table.settings_table textarea {
    height: 86px !important;
}

.settings_table select {
    margin-bottom: 10px;
}

#secondary_langs {
    margin-bottom: 10px;
}

/*AGENTS*/
select#tid,
select#did {
    width: 180px;
}

form[action="staff.php"] input.button.muted {
    /* height: 18px; */
    min-width: 50px;
    position: relative;
    top: 0;
    padding: 4px !important;
    margin: 0;
}

#agents---nav-bar-bg_container div[style="padding:2px 5px"],
#users---nav-bar-bg_container div[style="padding:2px 5px"] {
    padding: 10px !important;
}

#agents-tabs_container .pull-left,
#users-tabs_container .pull-left {
    float: left;
    width: 50px;
    height: 50px;
}

span[style^="display:inline-block;width:90%;width:calc(100% - 32px);"] {
    width: initial !important;
    padding-left: initial !important;
    display: initial !important;
}

span[style^="display:inline-block;width:90%;width:calc(100% - 32px);"] a {
    font-size: 17px;
    display: initial;
}

.settings_table .faded:before {
    content: '\a' attr(title);
    white-space: pre;
}

#users-tabs_container .settings_table .faded em:before {
    content: '\A';
    white-space: pre;
}

.settings_table .faded em {
    font-size: 12px;
    color: #999;
    font-style: normal;
}

.form_table.settings_table .icon-file-text:after {
    /*keep*/
    content: url(../../osta/icons/paper.svg);
    display: inherit;
    width: 36px !important;
    height: 36px !important;
    position: relative;
    top: 8px;
}

.form_table.settings_table i.icon-file-text {
    top: -4px;
    background: none;
}

.icon-bell-alt:before {
    content: url(../icons/alerts.svg);
    width: 16px;
    position: relative;
    top: 4px;
}

.icon-question-sign:before {
    content: url(../icons/question.svg);
    width: 16px;
    position: relative;
    top: 4px;
    opacity: .8;
}

.icon-question-sign:hover:before {
    opacity: 1;
}

ul.tabs li {
    padding: 0 6px !important;
}

ul.tabs li:not(.active) a {
    color: #128dbe;
}

#agents-tabs_container [class*=" icon-"],
#users-tabs_container [class*=" icon-"] {
    margin: 0 10px 0 0;
}

#users-tabs_container div[style="padding:2px 5px"] br {
    display: none;
}

/*Manage*/
table.list thead td[colspan="7"]:first-child {
    background: rgba(255, 255, 255, 0);
}

div[style="padding:8px 3px;border-bottom: 2px dotted #ddd;"] {
    border: 0 !important;
}

ul#topic-tabs i.icon-info-sign {
    top: 1px;
}

div[style="padding:8px 3px; margin-top: 1.6em"] {
    margin-top: .1em !important;
}

.account .table.two-column tbody tr td:first-child {
    width: 30%;
}

td[style="padding-top: 50px"] {
    padding-top: 20px !important;
}

.row-item .delete {
    border-left: 1px solid rgba(165, 165, 166, 0.61);
    border-bottom: 1px solid rgba(165, 165, 166, 0.61);
    border-radius: 0 !important;
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
    width: 35px;
}

.form_table.settings_table a[href="pages.php"] {
    margin-bottom: 10px;
}

ul#user-import-tabs {
    margin-bottom: -5px;
}

select[name="help_topic_sort_mode"] {
    width: 118px;
}

.helptopics table.list td[colspan="7"] {
    padding-bottom: 7px !important;
}

select[name="add_secondary_language"] {
    width: 280px;
}

/*Secondary Languages */
div#secondary_langs {
    width: 100% !important;
}

.secondary_lang.ui-sortable-handle {
    display: list-item;
    list-style: none;
}

.secondary-lang-sort,
.secondary-lang-flag,
.secondary-lang-text {
    float: left;
}

.secondary-lang-trash {
    float: right;
}

.secondary_lang.ui-sortable-handle {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 12px;
    margin: 0 0 8px 0;
    background: #fff;
    width: 494px !important;
    display: list-item;
    list-style: none;
    height: 25px;
    -webkit-box-shadow: 4px 4px 5px -4px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 4px 4px 5px -4px rgba(0, 0, 0, 0.3);
    box-shadow: 4px 4px 5px -4px rgba(0, 0, 0, 0.3);
}

.settings table.list .icon-sort,
.secondary-lang-sort i.icon-sort {
    display: inline-block;
    width: 20px;
    height: 20px !important;
    margin: -1px 10px 0 0;
}

.settings table.list .icon-sort:before,
.secondary_lang i.icon-sort:before {
    top: 0;
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 20px !important;
    background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23128dbe' d='M12%2C18.17L8.83%2C15L7.42%2C16.41L12%2C21L16.59%2C16.41L15.17%2C15M12%2C5.83L15.17%2C9L16.58%2C7.59L12%2C3L7.41%2C7.59L8.83%2C9L12%2C5.83Z' /%3E %3C/svg%3E");
}

.secondary-lang-flag {
    width: 36px;
    height: 24px;
    margin: 0 10px 0 0;
    display: inline-block;
}

.secondary-lang-flag .flag {
    background-size: 36px !important;
    background-position: center !important;
    width: 36px;
    height: 24px;
}

.secondary-lang-text {
    display: inline-block;
    margin: 2px 0 0 0;
}

.secondary-lang-trash {
    float: right;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 3px 0 0 0;
}

#secondary_langs i.icon-trash {
    width: 20px;
    height: 20px;
    display: inline-block;
    top: 0;
}

#secondary_langs .icon-trash:before {
    content: "";
    top: 0;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23128DBE' d='M21.03%2C3L18%2C20.31C17.83%2C21.27 17%2C22 16%2C22H8C7%2C22 6.17%2C21.27 6%2C20.31L2.97%2C3H21.03M5.36%2C5L8%2C20H16L18.64%2C5H5.36M9%2C18V14H13V18H9M13%2C13.18L9.82%2C10L13%2C6.82L16.18%2C10L13%2C13.18Z' /%3E%3C/svg%3E");
}





.forms table.list th {
    font-size: 15px !important;
    padding: 0 !important;
}

.forms table.form_table select {
    width: initial;
    min-width: 170px !important;
}

.forms tbody.sortable-rows.ui-sortable input {
    width: 134px !important;
}

.forms tbody.sortable-rows.ui-sortable input.delete-box {
    width: 60px !important;
}

.forms a.action-button.field-config {
    max-width: 174px;
    overflow: hidden !important;
    text-align: center;
    position: relative;
    top: -2px;
}

.manage-form a.action-button.field-config {
    padding: 4px 4px !important;
}

table.form_table td[align="center"] {
    text-align: left;
    padding: 0;
}

.form_table i.icon-edit {
    margin: 0 5px 0 0;
    padding: 0;
}

#schedule-entries i.icon-edit {
    margin: -5px 5px 0 22px !important;
}

tbody#schedule-entries i.icon-sort {
    top: -3px;
}

.form_table.settings_table table[style="width:100%"] {
    margin-bottom: 20px;
}

form[action="settings.php?t=tickets"] table.list th:first-child {
    background-position: 9px center;
}

.queues-page .queues .tabs li:nth-child(6) {
    display: none;
}

.queues-page table.table td[style="width:60%; vertical-align:top"] {
    width: 12% !important;
}

.queues-page hr {
    border: 0;
}

.queues-page select#add-field {
    min-width: 200px !important;
}

.queues-page input.full-width,
.queues-page input[type="text"],
.queues-page select#parent-id {
    width: 230px !important;
    min-width: 230px !important;
    margin: 0 0 18px 0;
}

.queues-page select#search-add-new-field {
    width: 190px !important;
    min-width: 190px !important;
    margin: 0 0 8px 0;
}

.queues-page .green.button {
    background: #dcdfe2;
    position: relative;
    top: -2px;
    padding: 5px 14px;
    color: #515d6d;
}

.queues-page .green.button:hover {
    border: initial !important;
    background: #d0e9c6 !important;
}

.queues-page .grid.form tbody:nth-child(3) tr:first-child select {
    min-width: 40% !important;
}

.queues-page .grid.form tbody:nth-child(3) tr:nth-child(2) input {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

.queues-page .grid.form tbody:nth-child(3) tr:nth-child(2) input {
    min-width: 185px !important;
}

.queues-page .grid.form tbody:nth-child(3) tr:nth-child(2) select {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

/* ==========================================================================
 Users > <user>
========================================================================== */
.users table.ticket_info {
    border: 1px solid #cfd4d6;
    width: calc(100% - 106px);
    float: right;
}

.users table.ticket_info:after {
    clear: both;
}

#tickets.tab_content {
    border: .5px solid #aaa;
}

#user-view-tabs_container .pull-left {
    padding: 12px 0;
}

#user-view-tabs_container .pull-left strong {
    font-weight: 500;
    color: #777777;
}

#user-view-tabs_container form[action="users.php"] table.list th {
    font-family: 'Open Sans', sans-serif;
    font-size: 17px !important;
    font-weight: 400;
    height: 36px;
    padding-left: 9px !important;
}

#user-view-tabs_container table.list td {
    font-size: 11px !important;
}

#user-view-tabs_container th[width="10%"],
#user-view-tabs_container th[width="18%"],
#user-view-tabs_container th[width="8%"],
#user-view-tabs_container th[width="30%"],
#user-view-tabs_container th[width="15%"] {
    width: initial !important;
}

#user-view-tabs_container td:nth-child(4) {
    font-size: 12px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.list a.truncate {
    font-size: 14px;
    font-weight: 500;
}

#user-view-tabs_container a.Icon.overdueTicket {
    font-size: 14px !important;
    background-position: -1px 1px;
    margin: 0;
    padding-left: 21px !important;
}

#user-view-tabs_container table.list tr td {
    padding-left: 11px !important;
}

ul#user-view-tabs {
    margin-top: 10px;
}

#content.users td.right_align.has_bottom_border a {
    margin-right: 4px;
}

form[action="users.php"] i.icon-group {
    /* display: none; */
    /*target*/
}

#user-account-tabs {
    width: 94% !important;
    margin: 0 0 -5px 8px;
    box-shadow: initial;
}

#popup #user-account-tabs {
    margin: 0 0 -7px 8px;
}

button.inline.green.button {
    border: .5px solid #a9a9a9;
    height: unset;
    background: #fff;
}

ul#user-account-tabs li.active {
    top: -5px;
}

/* ==========================================================================
 Manage > Forms
========================================================================== */
.forms [class^="icon-"],
[class*=" icon-"] {
    margin: 0 7px;
}

.sortable.row-item i.icon-reorder {
    top: 0;
}

form[action*="/forms/manage"] .delete {
    height: 48px;
    width: 48px;
    border-radius: 40px;
    text-align: center;
}

form[action*="/forms/manage"] .row-item .delete:hover {
    background: #ff838e;
    color: rgba(255, 255, 255, 0.8) !important;
    border-radius: 0 5px 0 0 !important;
}

form[action*="/forms/manage"] .row-item .delete:hover>a i.icon-trash:before {
    color: #fff !important;
    fill: #fff !important;
}

select[name="new-form"] {
    border: .5px solid #a9a9a9;
    height: 39px;
    top: 1px;
}

/* ==========================================================================
 HIDE UGLY ICONS
========================================================================== */
.Icon {
    width: auto;
    padding-left: initial;
}

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

/* ==========================================================================
 CLEAN TABS
========================================================================== */
ul.clean.tabs {
    z-index: 1;
}

ul.tabs,
ul.tabs.alt {
    background: initial;
    border-bottom: 0;
    bottom: 0;
    margin: 0 auto;
    box-shadow: initial;
}

ul#referral {
    bottom: -6px;
}

ul.tabs li.active {
    border: 1px solid #d5d5d5;
    border-top: 2px solid #ffc386;
    border-bottom: 1px solid #fff;
    background: #fff;
    z-index: 1;
    top: -1px;
}

ul.tabs li.active a {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 500;
    color: #777777;
}

.tab_content {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    min-height: 122px;
}

.tab_content div[style="margin-top: 5px"] {
    margin: 5px 0 0 0 !important;
    background: #fff;
}

.dashboard ul.tabs {
    border-bottom: 0;
}

table.table th {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 500;
    color: #777777;
}

table.table th[width="30%"] {
    padding-left: 8px !important;
}

table.dashboard-stats {
    border-bottom: 1px solid #ddd;
}

ul.tabs li a {
    padding: 0;
}

/* ==========================================================================
 POPUPS AND ALERTS
========================================================================== */
.dialog {
    background: #FFF;
    border: 1px solid #AAA;
    border-radius: 2px;
    box-shadow: rgba(0, 0, 0, 0.4) 0 10px 26px;
}

.dialog th {
    background-color: initial;
    border: none;
    padding: 4px 10px 10px 0;
    padding-left: 0;
    font-size: 126%;
    color: #777777;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}

.dialog th em {
    font-style: normal;
}

.dialog th strong {
    font-weight: 600;
}

.required {
    font-weight: 600;
}

#alert {
    opacity: 0;
    animation-name: bounceIn;
    animation-duration: 450ms;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3) translate3d(0, 0, 0);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.1);
    }

    80% {
        opacity: 1;
        transform: scale(0.89);
    }

    100% {
        opacity: 1;
        transform: scale(1) translate3d(0, 0, 0);
    }
}

/* ==========================================================================
 POPUP DIALOG TOOLBAR RESTORED (missing in osTicket 1.14 and later)
========================================================================== */
.redactor-toolbar-wrapper-air {
    position: initial;
    z-index: 100;
    width: 100% !important;
    display: inline-block;
    background: #f7f7f7;
    border: none;
    box-shadow: 0 1px 4px -2px rgba(0, 0, 0, 0.4);
    border-radius: 5px 5px 0 0 !important;
}

.redactor-air {
    display: inline-block !important;
    width: 100% !important;
    float: left;
    padding: 0 !important;
    margin: 0 !important;
    background: initial;
}

.redactor-air a.re-button-icon.re-button-icon {
    padding: 8px;
    margin: 0;
    background: initial;
}

.redactor-air a {
    border-radius: 0px;
}

.redactor-air a:first-child {
    border-radius: 2px 0 0 0;
}

.redactor-air a:last-child {
    border-radius: 0 2px 0 0;
}

.redactor-air a {
    color: #128dbe;
}

.redactor-air a.re-button-icon.re-button-icon:hover {
    background: #128dbe;
    color: #fff;
}

a.re-button:hover>i {
    color: #fff !important;
}

.redactor-button-active {
    background-color: #ccc !important;
}

.redactor-button-active>i {
    color: #696969 !important;
}

.redactor-air a.re-button.re-image.re-button-icon,
.redactor-air a.re-button.re-textdirection.re-button-icon {
    display: none;
}

/* ==========================================================================
 MERGE / LINK TICKETS POPUP
========================================================================== */
.dialog i.icon-code-fork:before {
    font-size: 27px !important;
    top: -1px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dialog i.icon-link:before {
    font-size: 21px !important;
    top: -4px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dialog .merge-tickets .row-item {
    padding: 8px;
}

.dialog .merge-tickets .merge-tickets i.icon-reorder {
    top: 0 !important;
    margin: 0 5px 0 6px;
    padding: 0;
    width: 12px;
    right: 0;
}

.dialog .merge-tickets a[style="display: inline"] {
    position: relative;
    top: 3px;
}

.dialog .merge-tickets .row-item .delete {
    border-bottom: 0 !important;
}

.merge-tickets a.preview {
    float: none !important;
}

.merge-tickets i.icon-reorder {
    background-image: initial !important;
}

.merge-tickets i.icon-reorder:before {
    display: inline-block !important;
}

.merge-tickets i.icon-reorder:before {
    content: "\f0c9" !important;
    top: 2px;
}

#popup a.icon-comments-alt {
    float: right;
    margin: 4px 5px 0 0;
}

form[action^="#tickets/"] i.icon-trash:before {
    top: -1px !important;
}

form[action^="#tickets/"] .row-item .delete {
    will-change: background, color !important;
    -webkit-transition: all .3s ease-out !important;
    -moz-transition: all .3s ease-out !important;
    -o-transition: all .3s ease-out !important;
    -ms-transition: all .3s ease-out !important;
    transition: all .3s ease-out !important;
}

form[action^="#tickets/"] .row-item .delete:hover {
    background: #ea0c0c;
    color: #fff !important;
}

form[action^="#tickets/"] .row-item:last-of-type .delete:hover {
    border-radius: 0 0 6px 0 !important;
}

form[action^="#tickets/"] .row-item .delete:hover>a i.icon-trash:before {
    color: #fff !important;
}

.merge-spacer {
    margin: 0 0 0 0;
}

.merge-tickets i.icon-plus {
    background-image: initial !important;
}

form[action^="#tickets/"] button.inline.green.button {
    margin-top: 16px;
    padding: 0 4px;
    position: relative;
    top: 0;
    margin: 0;
    line-height: 28px;
}

form[action^="#tickets/"] hr {
    visibility: visible;
    opacity: .5;
}

li.row-item.ui-state-disabled,
li.row-item.ui-sortable-handle {
    width: 576px;
}

/* ==========================================================================
 TIPS
========================================================================== */
i.help-tip {
    color: #128dbe;
    position: relative;
    top: -2px;
}

.body .icon-remove-circle:before,
a.tip_close .icon-remove-circle:before,
.dialog .icon-remove-circle:before,
.modal-header .close .icon-remove-circle:before {
    content: url(../icons/close.svg);
    height: 30px;
    width: 30px;
    top: 0 !important;
}

i.icon-remove-circle {
    top: 12px;
    right: 8px;
}

a.tip_close i.icon-remove-circle,
.dialog a.close i.icon-remove-circle,
.modal-header .close .icon-remove-circle {
    top: 0;
    right: 0;
}

.icon-remove-circle:before {
    content: ' ';
}

.dialog a {
    color: #128dbe;
}

a.tip_close,
.dialog a.close,
.modal-header a.close {
    position: absolute;
    display: inline-block;
    right: 0;
    /*target?!*/
    top: 0;
    /*target?!*/
    font-size: 0;
    color: #ffddb9;
    background: #ffddb9;
    width: 30px;
    height: 30px;
    line-height: 0;
    margin: 16px;
    padding: 0;
    border-radius: 10%;
    z-index: 9;
}

.tip_content a.tip_close {
    margin: 8px;
}

.tip_content.tickets a.tip_close {
    margin: 5px;
}

.dialog a.close,
.modal-header a.close {
    font-size: 20px !important;
    padding: 0 !important;
}

.rtl .dialog a.close {
    left: 0;
}

.modal-header a.close {
    opacity: 1;
}

.tip_content .links a {
    color: #128dbe;
}

.tip_content {
    height: auto !important;
    min-height: 20px;
    /*padding: 15px 25px 10px 10px;*/
    /*Specify target*/
    border: 1px solid #979696 !important;
    background: #fff;
    border-radius: 5px;
    z-index: 3;
    position: absolute;
    line-height: 1.45rem;
    top: -1px;
    left: -28px;
    max-width: 400px;
    -moz-box-shadow: 5px 5px 7px -3px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 5px 5px 7px -3px rgba(0, 0, 0, 0.3);
    box-shadow: 5px 5px 7px -3px rgba(0, 0, 0, 0.3);
}

.tip_content h2 {
    width: calc(100% - 50px);
}

.canned-page .tip_content {
    max-width: unset;
}

.templates-page .tip_content {
    max-width: initial;
}

.logs-page .tip_content {
    max-width: initial;
}

.tip_content.tickets {
    left: -24px;
}

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

.tip_content hr {
    color: #ddd0;
    background-color: #ddd0;
    height: 6px;
}

.tip_content h1 {
    border-bottom: .5px solid #e4dbc2;
    font-weight: 500;
    background: #d2f0ff;
    padding-top: 0px;
    padding: 2px 0 9px 4px;
    width: calc(100% - 40px);
}

.doc-desc-title {
    font-weight: 500;
}

.tip_arrow {
    top: 11px;
    border: 1px solid #fff;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
}

.tip_content strong {
    font-weight: 600;
}

.form_table tr i.help-tip {
    margin-left: 5px;
    opacity: 0.7;
}

.tip_content img.avatar {
    width: 50px;
    height: 50px !important;
    max-height: 60px !important;
}

#collab.tab_content td em {
    font-size: 85%;
    font-style: normal;
}

div[style="width:650px; padding: 2px 2px 0 5px;"] {
    width: 100% !important;
    padding: 0 !important;
}

#collab.tab_content td em:before {
    content: "\A";
    white-space: pre;
}

.tip_content table,
.tip_content table th {
    border: 0
}

.tip_content table td {
    /*border: .5px solid #ddd;*/
    /*target*/
}

.custom-info {
    margin: 0 0 5px 10px !important;
}

#user_tabs_container table.custom-info {
    margin-top: 7px;
}

.tip_content table,
.tip_content table th,
.tip_content table td {
    border: 0;
}

.tip_content.faq {
    max-width: unset;
}

.tip_content.faq .thread-body {
    padding: 1.8em 0.9em 0 0 !important;
}

/* ==========================================================================
 ALERTS
========================================================================== */
#msg_info,
.info-banner,
#msg_notice,
.success-banner,
.notice-banner,
#msg_warning,
.warning-banner,
#msg_error,
.error-banner {
    margin: 0;
    padding: 14px 10px 14px 46px;
    margin-bottom: 10px;
    border-radius: 6px;
    font-size: 16px;
    border: .5px solid;
    font-weight: 500;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 3px rgba(0, 0, 0, 0.04);
}

#msg_info,
.info-banner {
    color: #31708f;
    background-color: #d9edf7;
    background: url(../icons/alert-outline-info.svg) 16px 50% no-repeat #d9edf7 !important;
    border-color: #bce8f1;
    background-size: 22px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 3px rgba(0, 0, 0, 0.04);
}

#msg_notice,
.success-banner,
.notice-banner {
    color: #3c763d;
    background-color: #dff0d8;
    background: url(../icons/alert-outline-message.svg) 16px 50% no-repeat #dff0d8 !important;
    border-color: #bdd1ac;
    background-size: 22px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 3px rgba(0, 0, 0, 0.04);
}

#msg_info,
#msg_notice,
#msg_warning,
#msg_error,
.success-banner,
.notice-banner {
    opacity: 1;
    animation-name: bounceIn;
    animation-duration: 450ms;
    animation-timing-function: linear;
    animation-delay: .4s;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3) translate3d(0, 0, 0);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.1);
    }

    80% {
        opacity: 1.1;
        transform: scale(0.89);
    }

    100% {
        opacity: 1;
        transform: scale(1) translate3d(0, 0, 0);
    }
}

#msg_warning,
.warning-banner {
    color: #8a6d3b;
    background-color: #fcf8e3;
    background: url(../icons/alert-outline-warning.svg) 16px 50% no-repeat #fcf8e3 !important;
    border-color: #dfd3ba;
    background-size: 22px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 3px rgba(0, 0, 0, 0.04);
}

#msg_error,
.error-banner {
    color: #a94442;
    background-color: #f2dede;
    background: url(../icons/alert-outline-error.svg) 16px 50% no-repeat #f2dede !important;
    border-color: #ebccd1;
    background-size: 22px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 3px rgba(0, 0, 0, 0.04);
}

#msg_warning .Icon.overdueTicket {
    background-image: none;
}

#msg_info .icon-info-sign:before,
.info-banner .icon-info-sign:before {
    display: none;
}

#ticket_tabs_container #msg_warning,
#ticket_tabs_container #msg_error,
#ticket_tabs_container #msg_notice,
#ticket_tabs_container #msg_alert {
    margin: 0 0 20px 0;
}

.message.bar.danger {
    border-bottom: 3px solid #ebccd1;
    color: #a94442;
    background-color: #f2dede;

    border-color: #ebccd1;
    background-size: 22px !important;
    z-index: 999999;
    opacity: 1;
}

.message.bar .avatar[class*=" oscar-"] {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%231F5B78' d='M8.5%2C2C6%2C2 4%2C4 4%2C6.5V7C2.89%2C7 2%2C7.89 2%2C9V18C2%2C19.11 2.89%2C20 4%2C20H8.72C10.18%2C21.29 12.06%2C22 14%2C22A8%2C8 0 0%2C0 22%2C14A8%2C8 0 0%2C0 14%2C6C13.66%2C6 13.32%2C6.03 13%2C6.08C12.76%2C3.77 10.82%2C2 8.5%2C2M8.5%2C4A2.5%2C2.5 0 0%2C1 11%2C6.5V7H6V6.5A2.5%2C2.5 0 0%2C1 8.5%2C4M14%2C8A6%2C6 0 0%2C1 20%2C14A6%2C6 0 0%2C1 14%2C20A6%2C6 0 0%2C1 8%2C14A6%2C6 0 0%2C1 14%2C8M13%2C10V15L16.64%2C17.19L17.42%2C15.9L14.5%2C14.15V10H13Z' /%3E %3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-size: 50px 36px;
    position: relative;
    top: 3px;
}

.message.bar.top.danger .avatar[class*=" oscar-"] {
    background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23a94442' d='M8.5%2C2C6%2C2 4%2C4 4%2C6.5V7C2.89%2C7 2%2C7.89 2%2C9V18C2%2C19.11 2.89%2C20 4%2C20H8.72C10.18%2C21.29 12.06%2C22 14%2C22A8%2C8 0 0%2C0 22%2C14A8%2C8 0 0%2C0 14%2C6C13.66%2C6 13.32%2C6.03 13%2C6.08C12.76%2C3.77 10.82%2C2 8.5%2C2M8.5%2C4A2.5%2C2.5 0 0%2C1 11%2C6.5V7H6V6.5A2.5%2C2.5 0 0%2C1 8.5%2C4M14%2C8A6%2C6 0 0%2C1 20%2C14A6%2C6 0 0%2C1 14%2C20A6%2C6 0 0%2C1 8%2C14A6%2C6 0 0%2C1 14%2C8M13%2C10V15L16.64%2C17.19L17.42%2C15.9L14.5%2C14.15V10H13Z' /%3E %3C/svg%3E") !important;
}

.message.bar .avatar.pull-left {
    margin-left: 0;
}

.message.bar .avatar.oscar-boy {
    background-position: initial;
}

.avatar.oscar-borg {
    background-position: unset;
}

.message.bar.top.danger {
    background-color: rgb(255, 201, 201);
}

.message.bar.top.danger button.inline.button.red {
    top: 17px;
    position: absolute;
    right: -2px;
    background: #ffffff45;
    color: #ac4947;
    border: .5px solid #ac4947;
}

#msg_warning .Icon.lockedTicket {
    background-image: initial;
}

.logs-page #msg_warning,
.logs-page #msg_error,
.logs-page #msg_notice,
.logs-page #msg_alert {
    display: block;
    margin: 23px 0 0 0;
}

/* ==========================================================================
 FOOTER
========================================================================== */
#footer {
    color: var(--header-title);
    background: var(--nav-bar-bg);
    position: relative;
    height: 60px;
}

div#footer+div {
    background: var(--nav-bar-bg) !important;
    height: 36px;
    margin: -40px 0;
}

#footer {
    width: 100%;
    background: var(--nav-bar-bg) !important;
    background: rgba(0, 0, 0, 0.05);
    height: 60px;
    bottom: 0;
    padding: 0;
    position: static;
}

#footer #poweredBy {
    background: none;
}

#osticket {
    display: inline-block;
    float: left;
}

a#osticket-link,
a#ostawesome-link {
    padding: 20px;
}

a#osticket-link {
    float: right;
}

a#ostawesome-link {
    float: left;
}

#footer #osticket svg,
#footer #ostawesome svg {
    fill: var(--header-title);
    width: 122px;
}

#ostawesome svg {
    width: 111px;
    position: relative;
    top: 2px;
}

/* jump */
@-webkit-keyframes jump {
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        top: 20px;
    }
}

@keyframes jump {
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        top: 20px;
    }
}

.jump {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
}

.jump:hover,
.jump:focus,
.jump:active {
    -webkit-animation-name: jump;
    animation-name: jump;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

/* ==========================================================================
 LOGIN
========================================================================== */
#loginBody {
    background: var(--header-bg) !important;
}

#loginBody #brickwall {
    background-image: url("../../osta/img/backdrops/01.png");
}

#loginBody #loginBox {
    box-shadow: initial;
    width: 360px;
    margin-left: -181px;
}

#loginBody #loginBox:after {
    background-color: initial;
    border: none;
}

#loginBody #blur {
    -webkit-filter: initial;
    filter: inital;
    filter: initial;
    background: var(--nav-bar-bg);
    border-radius: 3px;
}

#loginBody #background {
    background-image: initial;
}

#loginBody #company .content {
    display: none;
}

#login-title {
    margin: 22px 0 -12px 0;
}

#login-title div#header-text #header-title {
    margin: 0;
    padding: 0;
    color: var(--header-title);
    text-decoration: none;
    line-height: 120%;
    font-style: normal;
    font-weight: 600;
    font-size: 30px;
    display: inline-block;
    font-family: "Montserrat", sans-serif;
    white-space: initial;
}

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

#loginBody #logo .valign-helper {
    padding: 0;
    display: inline;
}

#login-title #header-default svg {
    width: 100% !important;
    height: initial;
}

#loginBody fieldset input {
    background: rgba(255, 255, 255, 0.5);
}

#loginBody fieldset input {
    display: block;
    margin-bottom: 0 !important;
    border: 0;
    /*padding: 18px 14px!important;*/
    /*target*/
    letter-spacing: 1.4px;
    width: calc(100% - 37px) !important;
    height: 36px;
}

#loginBody form {
    width: 270px;
    margin: 0 auto;
}

#loginBody fieldset {
    border: 0;
    width: 270px;
    margin: 0 auto !important
}

#loginBody input[type=password] {
    border-radius: 0 0 3px 0 !important;
}

#loginBody fieldset input:first-child {
    border: 0;
}

#loginBody fieldset input:nth-child(2) {
    border-radius: 0 3px 0 0 !important;
    border: 0;
    width: calc(100% - 37px) !important;
    height: 37px;
    margin-bottom: 1px !important;
}

#login-userid {
    background: rgba(255, 255, 255, 0.3);
    display: inline-block;
    width: 36px;
    height: 37px;
    float: left;
    border-radius: 3px 0 0 0;
    background-size: 22px;
    background-repeat: no-repeat;
    background-position: 7px 7px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(0%2C 0%2C 0%2C 0.1)' d='M12%2C19.2C9.5%2C19.2 7.29%2C17.92 6%2C16C6.03%2C14 10%2C12.9 12%2C12.9C14%2C12.9 17.97%2C14 18%2C16C16.71%2C17.92 14.5%2C19.2 12%2C19.2M12%2C5A3%2C3 0 0%2C1 15%2C8A3%2C3 0 0%2C1 12%2C11A3%2C3 0 0%2C1 9%2C8A3%2C3 0 0%2C1 12%2C5M12%2C2A10%2C10 0 0%2C0 2%2C12A10%2C10 0 0%2C0 12%2C22A10%2C10 0 0%2C0 22%2C12C22%2C6.47 17.5%2C2 12%2C2Z' /%3E%3C/svg%3E");
}

#login-password {
    background: rgba(255, 255, 255, 0.3);
    display: inline-block;
    width: 36px;
    height: 36px;
    float: left;
    border-radius: 0 0 0 3px;
}

#login-password:after {
    background-image: url(../svg/key.svg);
    content: ' ';
    display: inline-block;
    width: 36px;
    height: 36px;
    background-repeat: no-repeat;
    background-position: 6px;
    opacity: .12;
}

#loginBody fieldset input::-webkit-input-placeholder,
/* Chrome/Opera/Safari */
#loginBody fieldset input::-moz-placeholder,
/* Firefox 19+ */
#loginBody fieldset input:-ms-input-placeholder,
/* IE 10+ */
#loginBody fieldset input:-moz-placeholder {
    /* Firefox 18- */
    color: #ddd;
}

#loginBox h3 {
    font-size: 21px;
    text-shadow: none;
    color: var(--header-title);
    font-family: monospace, courier;
    letter-spacing: initial;
    margin: 28px 0;
    font-weight: 100;
    opacity: .7;
}

#loginBox button[type=submit],
#loginBox input[type="submit"],
#loginBox .primary.button {
    box-shadow: none;
    margin: 2px 0 0 0;
    padding: 6px 20px !important;
    height: 36px;
    background: #128dbe;
    text-shadow: initial;
    border: none;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4588235294117647) !important;
    letter-spacing: 1.5px;
    width: 100%;
    font-size: 18px;
}

form#login i.icon-signin,
#loginBody i.icon-signin:before {
    display: none !important;
}

#loginBox h3[style="color:black;"] em {
    /*pw reset confirmation sent page*/
    font-size: 17px;
    font-style: initial;
    font-family: 'Open Sans';
    font-weight: 500;
    line-height: initial;
}

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.08627450980392157) inset;
    box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.08627450980392157) inset;
    border: .5px solid #bfbfbf;
    transition: background-color 5000s ease-in-out 0s;
}

#loginBody form#login button,
#loginBody input[value="Send Email"] {
    float: initial;
    margin: 27px auto 21px auto !important
}

h3[style="display:inline"] {
    margin: 0 0 -12px 0 !important;
    display: block !important;
}

#pw-reset {
    position: relative;
    top: -6px;
}

#loginBox #pw-reset h3 {
    margin: 0;
}

h3 a[href="pwreset.php"] {
    margin-top: 0 !important;
    font-size: 15px;
    text-shadow: none;
    color: var(--header-title);
    letter-spacing: initial;
    margin: 0 0;
    font-weight: 100;
    text-decoration: none;
}

#loginBody #poweredBy .osticket-logo {
    border: none;
    -webkit-filter: none;
    filter: none;
    ms-filter: none;
}

#loginBody #poweredBy {
    display: none;
}

/* 2FA Verification */
#loginBody .form-simple .field-label.required {
    display: none;
}

#loginBody .form-simple em {
    font-size: 15px;
    text-shadow: none;
    color: var(--header-title) !important;
    font-family: 'Open Sans', monospace, courier;
    letter-spacing: initial;
    margin: 0 0 14px;
    font-weight: 100;
    opacity: .7;
    font-style: initial !important;
    line-height: initial;
}

input[autocomplete="one-time-code"] {
    width: 62px !important;
    min-width: 20px;
    text-align: center;
    padding: 0;
}


/* ==========================================================================
  PASSWORD RESET PAGE pwreset.php
========================================================================== */
form[action="pwreset.php"] input.submit {
    margin: 20px !important;
}

#loginBody form[action="pwreset.php"] fieldset input {
    width: 100% !important;
}

#loginBody form[action="pwreset.php"] fieldset input:first-child {
    background-image: unset;
    padding-left: 10px !important;
}

/* ==========================================================================
 MISC.
========================================================================== */
.quicknote a.action,
.floating-options a.action {
    width: initial;
    margin: 4px 2px;
    padding: 3px;
    color: black !important;
    background: -webkit-linear-gradient(#fafafa 0%, #e7ebf0) #ffffff;
    background: -o-linear-gradient(#fafafa 0%, #e7ebf0) #ffffff;
    background: linear-gradient(#fafafa 0%, #e7ebf0) #ffffff;
    border: .5px solid #cdd2d4;
    border-radius: 3px;
}

.quicknote a.action:hover,
.floating-options a.action:hover {
    border: .5px solid #aaa;
}

.avatar>img.avatar {
    width: 100%;
    height: auto;
}

div#user-profile .avatar>img.avatar,
form[action="#users/lookup"] .avatar>img.avatar {
    width: 100px;
}

.users-page .tip_content.users .avatar.pull-left,
.users-page .tip_content.users #user-profile .avatar>img.avatar {
    width: 50px;
    height: 50px;
}

.users-page .tip_content.users .floating-options i.icon-edit,
.users-page .tip_content.users .floating-options i.icon-share {
    padding: 4px !important;
}

.users-page .tip_content.users .quicknote .body {
    padding: 0;
}

div#user-email a {
    color: #128dbe;
}

.code-green {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-weight: 400;
    font-size: 14px;
    color: #3ead08;
}

.forslash {
    margin: 0 6px;
    font-weight: bold;
    color: #bfbfbf;
}

.current-version.highlight {
    font-weight: 700;
    padding: 1px 6px 3px 6px;
    color: #816700;
    background-color: #ffefac;
    border-radius: 3px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 14px;
}

.current-version.checked:after {
    content: ' ';
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23128DBE' d='M21%2C7L9%2C19L3.5%2C13.5L4.91%2C12.09L9%2C16.17L19.59%2C5.59L21%2C7Z' /%3E %3C/svg%3E");
    background-position: center center;
    fill: #128dbe !important;
    color: #128dbe !important;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 20px 20px !important;
    background-repeat: no-repeat !important;
    position: relative;
    top: 4px;
    margin-left: 6px;
}

#version-msg {
    margin: 24px 0 0 0;
}

#version-msg a:after {
    content: ' ';
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23128dbe' d='M17%2C13L12%2C18L7%2C13H10V9H14V13M19.35%2C10.03C18.67%2C6.59 15.64%2C4 12%2C4C9.11%2C4 6.6%2C5.64 5.35%2C8.03C2.34%2C8.36 0%2C10.9 0%2C14A6%2C6 0 0%2C0 6%2C20H19A5%2C5 0 0%2C0 24%2C15C24%2C12.36 21.95%2C10.22 19.35%2C10.03Z' /%3E%3C/svg%3E");
    background-size: 23px;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    display: inline-block;
    position: relative;
    top: 6px;
    margin-right: 0;
    margin-left: 9px;
}

#version-msg a {
    transition: color .5s ease !important;
}

#version-msg a:hover {
    color: #8ac70f
}

#version-msg a:hover:after {
    content: ' ';
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%238ac70f' d='M17%2C13L12%2C18L7%2C13H10V9H14V13M19.35%2C10.03C18.67%2C6.59 15.64%2C4 12%2C4C9.11%2C4 6.6%2C5.64 5.35%2C8.03C2.34%2C8.36 0%2C10.9 0%2C14A6%2C6 0 0%2C0 6%2C20H19A5%2C5 0 0%2C0 24%2C15C24%2C12.36 21.95%2C10.22 19.35%2C10.03Z' /%3E%3C/svg%3E");
}

i.icon-sort-by-attributes-alt.icon-flip-vertical {
    -webkit-transform: rotate(180deg) !important;
    -moz-transform: rotate(180deg) !important;
    -ms-transform: rotate(180deg) !important;
    -o-transform: rotate(180deg) !important;
    transform: rotate(180deg) !important;
}

#client-side-language-bar {
    font-weight: 500;
    margin: 0 0 6px 0;
}

div#profile tr:first-child {
    display: none;
}

.users .green.button:hover {
    box-shadow: none;
}

#upload table th:first-child {
    background: none;
}

#upload table th {
    font-size: 13px;
}

#upload table td {
    padding: 10px 0;
    font-size: 13px;
}

#upload table {
    border: initial;
}

/* ==========================================================================
 POPUP: LOADING SMALL SPINNER
========================================================================== */
.dialog#popup {
    width: 650px;
    min-height: 128px;
}

#popup i.icon-spinner {
    margin: 0 14px !important;
    padding: 0 !important;
    width: 50px;
    height: 50px;
    top: 15px;
}

#popup i.icon-spinner.icon-spin.icon-large:before {
    background-image: url(../../osta/img/loading.svg);
    content: ' ';
    background-position: center !important;
    border-radius: 50%;
    vertical-align: middle;
    width: 50px !important;
    height: 50px !important;
    background-size: 50px 50px !important;
    top: 0 !important;
}

/* ==========================================================================
 OVERLAY
========================================================================== */
#overlay {
    background: #000 !important;
    opacity: .1 !important;
}

#loadingbar {
    background: var(--header-title) !important;
}

/* ==========================================================================
 THEME PAGE
========================================================================== */
#color-themes,
#custom-theme {
    width: 100%;
}

#color-themes tr:first-child td:first-child,
#custom-theme tr:first-child td:first-child {
    width: 100%;
    /* background: #ccc; */
}

#choose-theme.show,
#custom-theme.show {
    opacity: 1;
    pointer-events: auto;
}

#choose-theme.hide,
#custom-theme.hide {
    opacity: .4;
    pointer-events: none;
}

@media (max-width: 1000px) {
    table#color-themes {
        width: 100%;
    }
}

.tab_content h2 {
    line-height: 28px;
}

#color-themes h2 {
    margin: 0 0 -10px 0;
}

.theme-card {
    width: 240px;
    height: 126px;
    background: #ddd;
    border: .5px solid #ddd;
    z-index: 1;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    float: left;
    margin: 20px 20px 15px 20px;
}

.rtl .theme-card {
    float: right;
    margin: 20px 30px 15px 15px;
}

.theme-card-lid {
    opacity: 1;
    width: 240px;
    height: 126px;
    background: #fff;
    overflow: hidden;
    position: relative;
    top: 0;
    z-index: 2;
    border-radius: 2px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
    background-size: 160px;
    background-repeat: no-repeat;
    background-position: center;
}

.theme-card:hover>.theme-card-lid {
    top: -53.33px;
    background-size: 120px;
    background-position: center 67px;
}

.theme-card-bottom {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    position: relative;
    top: -53px;
    height: 53px;
    z-index: 1;
    color: #999;
    font-weight: 500;
    width: 100%;
    background: #eee;
}

.theme-preview {
    float: left;
    padding: 20px 0 20px 20px;
}

.switch {
    float: right;
    padding: 20px 20px 20px 0;
}

.switch:after {
    clear: both;
}

html[lang="ru"] a.pink {
    font-size: 75%;
    display: table-caption;
}

html[lang="ru"] .theme-preview {
    padding: 20px 0 0 10px;
    position: relative;
    bottom: 6px;
}

html[lang="ru"] .theme-preview a {
    font-size: 80%;
    display: table-caption;
}

html[lang="ru"] .switch {
    padding: 20px 10px 20px 0;
    font-size: 80%;
}

.use-custom-theme {
    display: inline-block;
    margin: 20px 15px 15px 20px;
    padding: 16px;
    color: #4c5156 !important;
    text-transform: uppercase;
    opacity: 1;
    width: fit-content;
    background: #fff;
    overflow: hidden;
    z-index: 2;
    font-weight: 400;
    border-radius: 2px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
}

.rtl .use-custom-theme {
    margin: 20px 30px 15px 15px;
}

.use-custom-theme input[type="radio"] {
    margin: 0 0 0 6px;
}

.rtl .use-custom-theme input[type="radio"] {
    margin: 0 6px 0 0;
}

.use-custom-theme:hover {
    transition: all 0.3s ease;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

button[value="Save Theme"],
button#save-custom-colors {
    margin: 15px 30px 20px 20px;
    padding: 14px 20px 10px 20px !important;
    font-size: 16px;
    color: #3c763d;
    background-color: #d0e9c6;
    border: initial;
}

button[value="Save Theme"]:hover,
button#save-custom-colors:hover {
    background: #b4e6a0 !important;
    color: #2a3e2a !important;
    border: initial;
    box-shadow: unset;
}

.rtl button[value="Save Theme"],
.rtl button#save-custom-colors {
    margin: 15px 30px 20px 15px;
}

#color-theme input.switch:empty~label {
    top: 3px;
}

#theme-black {
    background-image: url("../../osta/css/themes/black/black-theme.svg");
}

#theme-mint {
    background-image: url("../../osta/css/themes/mint/mint-theme.svg");
}

#theme-ice {
    background-image: url("../../osta/css/themes/ice/ice-theme.svg");
}

#theme-soft {
    background-image: url("../../osta/css/themes/soft/soft-theme.svg");
}

#theme-pink {
    background-image: url("../../osta/css/themes/pink/pink-theme.svg");
}

#theme-earth {
    background-image: url("../../osta/css/themes/earth/earth-theme.svg");
}

#theme-brown {
    background-image: url("../../osta/css/themes/brown/brown-theme.svg");
}

#theme-blue {
    background-image: url("../../osta/css/themes/blue/blue-theme.svg");
}

#theme-cool {
    background-image: url("../../osta/css/themes/cool/cool-theme.svg");
}

#theme-bright {
    background-image: url("../../osta/css/themes/bright/bright-theme.svg");
}

#logo-options,
#additional-options,
#theme3 {
    margin: 0 0 10px 0;
}

#theme4 {
    margin: 20px 0 0 0;
}

#theme5 {
    margin-top: 44px;
}

#theme6 {
    margin-top: 40px;
}

#theme7 {
    margin-top: 40px;
}

table#theme5 a {
    transition: all 0.3s ease;
    font-size: 90%;
    border: .5px solid;
    background: #fff;
    padding: 0 4px 1px 4px;
    margin-bottom: 10px;
}

table#theme5 a:hover {
    transition: all 0.3s ease;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.0);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.0);
    position: relative;
    top: -1px;
    border: .5px solid #659505;
    color: #659505;
}

#additional-options input[type=text] {
    margin: 0 5px 0 0 !important;
    height: 33px !important;
    padding: 0 0 0 8px !important;
}

#custom-theme {
    margin-top: 20px;
}

#color-pickers {
    padding: 0 0 0 20px;
}

.rtl #color-pickers {
    padding: 0 20px 0 0;
}

input.form-control.input-lg {
    padding: 0 0 0 8px !important;
    margin: 0 0 10px 0;
}

.rtl input.form-control.input-lg {
    padding: 0 8px 0 0 !important;
}

#logo-options input[type="radio"] {
    margin: 0 10px 0 4px;
}

.rtl #logo-options input[type="radio"] {
    margin: 0 4px 0 10px;
}

#additional-options input[type="radio"] {
    margin: 0 10px 0 4px;
}

.rtl #additional-options input[type="radio"] {
    margin: 0 4px 0 10px;
}

#logo-options tr:first-child td,
#additional-options tr:first-child td,
#theme3 tr:first-child td,
#theme4 tr:first-child td {
    padding: 0;
}

#logo-options td,
#additional-options td,
#theme2a tr:nth-child(2) td,
#theme3 td,
#theme4 td,
#theme5 tr:nth-child(2) td,
#theme6 tr:nth-child(2) td,
#theme7 tr:nth-child(2) td {
    padding: 0 0 20px 20px;
}

.rtl #logo-options td,
.rtl #additional-options td,
.rtl #theme2a tr:nth-child(2) td,
.rtl #theme3 td,
.rtl #theme4 td,
.rtl #theme5 tr:nth-child(2) td {
    padding: 0 20px 20px 0;
}

#custom-header-bg-button,
#theme-title-button,
#theme-subtitle-button,
#mobile-text-button,
#mobile-link-button,
#language-bar-save-button,
#logo-options-save-button {
    margin: 0;
    height: 32px !important;
    min-width: 204px;
    font-size: 16px;
    color: #515d6d;
    border: initial !important;
    background: #dcdfe2 !important;
}

#custom-header-bg-button:hover,
#theme-title-button:hover,
#theme-subtitle-button:hover,
#mobile-text-button:hover,
#mobile-link-button:hover,
#language-bar-save-button:hover,
#logo-options-save-button:hover {
    background: #b4e6a0 !important;
    color: #2a3e2a !important;
    border: initial;
    box-shadow: unset;
}

#theme-title-button:before,
#theme-subtitle-button:before,
#mobile-text-button:before,
#mobile-link-button:before {
    width: 20px;
    height: 20px;
    background-size: 10px !important;
    float: left;
    padding: 0 0 0 2px;
    position: relative;
    top: -3px;
}

#custom-text-and-links button {
    margin: 0 0 0 7px;
}

#theme6 button,
#theme7 button {
    background: #dcdfe2;
    color: #6d7989;
    border: medium none;
    margin: 0px auto;
    left: 0;
    right: 0;
    bottom: 40px;
    width: fit-content;
    text-align: center;
    padding: 14px 30px 14px 30px;
    display: inline-block;
    border-radius: 3px;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 13px;
}

#theme6 button:hover,
#theme7 button:hover {
    background: #c9cdd0;
    color: #343a42;
}

button#old-client {
    margin-right: 16px;
    margin-bottom: 10px;
    background: #ff7563;
    color: #fff;
}

button#old-staff {
    background: #8391A3;
    color: #fff;
}

form#header-bg {
    margin: 3px 30px 15px 30px;
}

#show-errors {
    position: absolute;
    top: 29px;
    right: 29px;
    width: 354px;
    border: 1px solid #cdcdcd;
    border-radius: 4px;
    padding: 20px;
}

@media screen and (max-width: 1145px) {
    #show-errors {
        width: 25vw;
    }
}

@media screen and (max-width: 1056px) {
    #show-errors {
        display: none;
    }
}

.show-php-errors {
    vertical-align: top;
    line-height: 32px;
    font-size: 18px;
    height: 42px;
}

#show-errors-title {
    position: relative;
    top: -7px;
}

#logo-options .checkcontainer,
#additional-options .checkcontainer {
    margin: 0 20px 0 0;
}

#custom-text-and-links .responsive-div-theme {
    margin: 0 0 0 20px;
}

.responsive-div-theme {
    width: 100%;
}

.responsive-div-theme div {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#one-theme,
#two-theme {
    width: 50%;
    float: left;
    height: 100%;
}

#two-theme {}

.responsive-div-theme form {
    margin: 0 0 9px 0;
}

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

    #one-theme,
    #two-theme {
        width: auto;
        float: none;
    }
}

a#subnav7.theme {
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}

@-webkit-keyframes bounce {

    0%,
    20%,
    53%,
    80%,
    100% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -8px, 0);
        transform: translate3d(0, -8px, 0);
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, -2px, 0);
        transform: translate3d(0, -2px, 0);
    }
}

@keyframes bounce {

    0%,
    20%,
    53%,
    80%,
    100% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -8px, 0);
        transform: translate3d(0, -8px, 0);
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, -2px, 0);
        transform: translate3d(0, -2px, 0);
    }
}

#theme-picker li {
    height: 26px;
    font-size: 18px;
}

#theme-picker input[type="radio"] {
    margin: 0 3px 0 0;
}

/* Custom CSS Code Mirror */
.cm-s-lucario span.cm-property,
.cm-s-lucario span.cm-variable-2 {
    color: #a1bad2 !important;
}

.cm-s-lucario span.cm-atom,
.cm-s-lucario span.cm-number {
    color: #9a7bc7 !important;
}

.cm-s-lucario span.cm-string,
.cm-s-lucario span.cm-string-2 {
    color: #c5c5c5 !important;
}

/* Custom labels: the container */
.checkcontainer {
    position: relative;
    cursor: pointer;
    padding-left: 27px;
    -webkit-user-select: none;
    /* Chrome, Opera, Safari */
    -moz-user-select: none;
    /* Firefox 2+ */
    -ms-user-select: none;
    /* IE 10+ */
    user-select: none;
    /* Standard syntax */
}

/* Hide the browser's default checkbox */
.checkcontainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkcontainer:hover input~.checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkcontainer input:checked~.checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkcontainer input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkcontainer .checkmark:after {
    left: 10px;
    top: 6px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Create a custom radio button */
.radiobtn {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #eee;
    border-radius: 50%;
    border: .5px solid #b8bdbf;
    will-change: background-color !important;
    -webkit-transition: all .3s ease-out !important;
    -moz-transition: all .3s ease-out !important;
    -o-transition: all .3s ease-out !important;
    -ms-transition: all .3s ease-out !important;
    transition: all .3s ease-out !important;
}

.rtl .radiobtn {
    left: initial;
    right: 0;
}

.switch .radiobtn {
    top: 0;
}

/* On mouse-over, add a grey background color */
.checkcontainer:hover input~.radiobtn {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.checkcontainer input:checked~.radiobtn {}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radiobtn:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.checkcontainer input:checked~.radiobtn:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.checkcontainer .radiobtn:after {
    top: 6px;
    left: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #128dbe;
}

.action-button {
    position: relative;
    overflow: hidden;
}

/* Icon Hang */
@-webkit-keyframes hvr-icon-hang {
    0% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
    }

    50% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
    }

    100% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
    }
}

@keyframes hvr-icon-hang {
    0% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
    }

    50% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
    }

    100% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
    }
}

@-webkit-keyframes hvr-icon-hang-sink {
    100% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
    }
}

@keyframes hvr-icon-hang-sink {
    100% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
    }
}

i.icon-caret-down:before {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: relative;
    padding-right: 2.2em;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

i.icon-caret-down:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 24 24'%3E %3Cpath fill='%23128DBE' d='M7.41%2C8.58L12%2C13.17L16.59%2C8.58L18%2C10L12%2C16L6%2C10L7.41%2C8.58Z' /%3E %3C/svg%3E");
    position: absolute;
    right: 1em;
    padding: 0 1px;
    font-family: FontAwesome;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.action-button:hover>i.icon-caret-down:before,
.action-button:focus>i.icon-caret-down:before,
.action-button:active>i.icon-caret-down:before {
    -webkit-animation-name: hvr-icon-hang-sink, hvr-icon-hang;
    animation-name: hvr-icon-hang-sink, hvr-icon-hang;
    -webkit-animation-duration: .3s, 1.5s;
    animation-duration: .3s, 1.5s;
    -webkit-animation-delay: 0s, .3s;
    animation-delay: 0s, .3s;
    -webkit-animation-timing-function: ease-in-out, ease-in-out;
    animation-timing-function: ease-in-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
    animation-direction: normal, alternate;
}

/* Underline From Center */
.action-button {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: relative;
    overflow: hidden;
    background: #fff
        /*!important*/
    ;
    color: #898989;
    border: .5px solid #b9b9b9;
    letter-spacing: 1.6px;
    -webkit-transition: background-color 0s ease !important;
    transition: background-color 0s ease !important;
}

.action-button:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    right: 50%;
    bottom: 0;
    background: #128DBE;
    height: 1px;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.red.button.action-button:before {
    background: #d01919;
}

span.red.button.action-button:before,
button.red.button.action-button:before {
    background: #d01919;
}

.action-button:hover:before,
.action-button:focus:before,
.action-button:active:before {
    left: 0;
    right: 0;
}

a.button.action-button.add-user:hover {
    border: .5px solid #b9b9b9;
}

a.green.button.action-button:before {
    background: #128dbe;
}

a.green.button.action-button:hover {
    color: #128dbe;
}

/* Icon Drop */
@-webkit-keyframes hvr-icon-drop {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
    }
}

@keyframes hvr-icon-drop {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    51%,
    100% {
        opacity: 1;
    }
}

/* Icon Drop */
button.action-button i.icon-map-marker {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: relative;
    padding-right: 2.2em;
}

button.action-button i.icon-map-marker:before {
    content: '';
    position: absolute;
    left: 3px;
    top: -7px;
    opacity: 1;
    padding: 0 1px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23128DBE' d='M12%2C11.5A2.5%2C2.5 0 0%2C1 9.5%2C9A2.5%2C2.5 0 0%2C1 12%2C6.5A2.5%2C2.5 0 0%2C1 14.5%2C9A2.5%2C2.5 0 0%2C1 12%2C11.5M12%2C2A7%2C7 0 0%2C0 5%2C9C5%2C14.25 12%2C22 12%2C22C12%2C22 19%2C14.25 19%2C9A7%2C7 0 0%2C0 12%2C2Z' /%3E %3C/svg%3E");
}

button.action-button:hover>i.icon-map-marker:before,
button.action-button:focus>i.icon-map-marker:before,
button.action-button:active>i.icon-map-marker:before {
    opacity: 0;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-animation-name: hvr-icon-drop;
    animation-name: hvr-icon-drop;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

a#new-ticket:after {
    content: "\f0f6";
    display: inline;
    font-size: 14px;
    font-weight: 500;
    margin-left: 5px;
    font-family: fontawesome;
}

.demo-disabled {
    display: block;
    color: #777;
    font-style: initial;
    font-size: 18px;
    margin: 30px 0 20px;
    text-align: center;
}

/* Pop */
@-webkit-keyframes hvr-pop {
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

@keyframes hvr-pop {
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

a#new-ticket {
    display: inline-block;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
}

a#new-ticket:hover,
a#new-ticket:focus,
a#new-ticket:active {
    -webkit-animation-name: hvr-pop;
    animation-name: hvr-pop;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

/* SEARCH FORM */
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
    display: none;
}

input[type=search] {}

input[type=search]:focus {}

input:-moz-placeholder {
    color: #999;
}

input::-webkit-input-placeholder {
    color: #999;
}

p[style="text-align:center;"] .button.action-button {
    margin: 0 4px 4px 4px;
    box-shadow: none;
    padding: 9px 30px !important;
    color: #515d6d;
    border: initial !important;
    background: #dcdfe2;
    letter-spacing: 1.6px;
    font-weight: 700;
    -webkit-transform: initial;
    transform: initial;
}

p[style="text-align:center;"] .button.action-button:hover,
p[style="text-align:center;"] .button.action-button:active {
    box-shadow: unset;
    border: initial;
    background: #c9cdd0;
    color: #343a42;
    height: unset;
}

p[style="text-align:center;"] button.red.button.action-button:hover,
p[style="text-align:center;"] button.red.button.action-button:active {
    color: #b04242;
}

p[style="text-align:center;"] .button.action-button[type="submit"] {
    color: #3c763d;
    background-color: #d0e9c6;
}

p[style="text-align:center;"] .button.action-button[type="submit"]:hover,
p[style="text-align:center;"] .button.action-button[type="submit"]:active {
    background: #b4e6a0 !important;
    color: #2a3e2a !important;
    box-shadow: unset;
}

/* ==========================================================================
 SEARCH FIELD
========================================================================== */
form[action="kb.php"] .attached.input,
form[action="orgs.php"] .attached.input,
form[action="users.php"] .attached.input,
form[action="tasks.php"] .attached.input,
form[action="tickets.php"] .attached.input {
    position: relative;
    float: right;
    top: -32px;
    right: -20px;
    border: none !important;
    height: 24px;
    margin: 0 0 0 -300px;
    outline: none;
    /*-webkit-appearance: textfield;*/
    /*messses up seach boxes in mobile*/
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

form[action="tickets.php"] .attached.input {
    top: -34px;
    right: calc(1% + -7px);
}

@media screen and (min-width: 600px) and (max-width: 1260px) {
    form[action="tickets.php"] .attached.input {
        right: -10px;
    }
}

@media screen and (min-width: 600px) and (max-width: 1222px) {
    form[action="tickets.php"] .attached.input {
        right: 10px;
    }
}

/* move again when warning, error etc message */
.attached.input.move-search {
    top: -95px !important;
}

.rtl #kbSearch,
.rtl #basic_search {
    float: left;
}

form[action="logs.php"] #msg_warning,
form[action="audits.php"] #msg_error,
form[action="banlist.php"] #msg_notice,
form[action="logs.php"] #msg_error,
form[action="audits.php"] #msg_warning,
form[action="banlist.php"] #msg_alert,
form[action="logs.php"] #msg_alert,
form[action="audits.php"] #msg_notice,
form[action="banlist.php"] #msg_warning,
form[action="logs.php"] #msg_notice,
form[action="audits.php"] #msg_alert,
form[action="banlist.php"] #msg_error {
    margin-top: 10px;
}

.rtl form[action="kb.php"] .attached.input,
.rtl form[action="orgs.php"] .attached.input,
.rtl form[action="users.php"] .attached.input,
.rtl form[action="tasks.php"] .attached.input,
.rtl form[action="tickets.php"] .attached.input {
    float: left;
    right: initial !important;
    left: 0 !important;
    margin: 0 !important;
    margin-right: -189px !important;
}

form[action="kb.php"] #basic_search .input.attached input,
form[action="orgs.php"] .input.attached input,
form[action="users.php"] .input.attached input,
form[action="tasks.php"] .input.attached input,
form[action="tickets.php"] .input.attached input {
    margin: 0 !important;
    border: 0;
    background-color: rgba(255, 255, 255, 0.3);
    border-right: 0;
    height: 24px;
    padding: 0 0 0 9px;
    width: 140px !important;
    -webkit-border-radius: 10em;
    -moz-border-radius: 10em;
    border-radius: 3px 0 0 3px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

.rtl form[action="kb.php"] #basic_search .input.attached input,
.rtl form[action="orgs.php"] .input.attached input,
.rtl form[action="users.php"] .input.attached input,
.rtl form[action="tasks.php"] .input.attached input,
.rtl form[action="tickets.php"] .input.attached input {
    background-position: left 4px center;
    padding: 0 9px 0 0;
}

form[action="kb.php"] #basic_search .input.attached input:focus,
form[action="orgs.php"] .input.attached input:focus,
form[action="users.php"] .input.attached input:focus,
form[action="tasks.php"] .input.attached input:focus,
form[action="tickets.php"] .input.attached input:focus {
    min-width: 230px;
    background-color: #fff;
    border-color: #66CC75;
    -webkit-box-shadow: initial;
    -moz-box-shadow: initial;
    box-shadow: initial;
}

form[action="kb.php"] #basic_search .input.attached input:focus+.button.attached,
form[action="orgs.php"] .input.attached input:focus+.button.attached,
form[action="users.php"] .input.attached input:focus+.button.attached,
form[action="tasks.php"] .input.attached input:focus+.button.attached,
form[action="tickets.php"] .input.attached input:focus+.button.attached {
    background-color: #fff;
    height: 24px;
}

form[action="kb.php"] .button.attached i.icon-search,
form[action="orgs.php"] .button.attached i.icon-search,
form[action="users.php"] .button.attached i.icon-search,
form[action="tasks.php"] .button.attached i.icon-search,
form[action="tickets.php"] .button.attached i.icon-search {
    background-image: initial;
}

form[action="kb.php"] .button.attached,
form[action="orgs.php"] .button.attached,
form[action="users.php"] .button.attached,
form[action="tasks.php"] .button.attached,
form[action="tickets.php"] .button.attached {
    opacity: .8 !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23128DBE' d='M9.5%2C3A6.5%2C6.5 0 0%2C1 16%2C9.5C16%2C11.11 15.41%2C12.59 14.44%2C13.73L14.71%2C14H15.5L20.5%2C19L19%2C20.5L14%2C15.5V14.71L13.73%2C14.44C12.59%2C15.41 11.11%2C16 9.5%2C16A6.5%2C6.5 0 0%2C1 3%2C9.5A6.5%2C6.5 0 0%2C1 9.5%2C3M9.5%2C5C7%2C5 5%2C7 5%2C9.5C5%2C12 7%2C14 9.5%2C14C12%2C14 14%2C12 14%2C9.5C14%2C7 12%2C5 9.5%2C5Z' /%3E%3C/svg%3E");
    background-position: right 1px center;
    background-size: 20px;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.3);
    border: initial !important;
    margin: 0;
    width: 24px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

form[action="kb.php"] i.icon-search,
form[action="orgs.php"] i.icon-search,
form[action="users.php"] i.icon-search,
form[action="tasks.php"] i.icon-search,
form[action="tickets.php"] i.icon-search {
    top: 0;
    opacity: .7;
}

form[action="kb.php"] input#query:placeholder-shown,
form[action="orgs.php"] input.basic-search:placeholder-shown,
form[action="users.php"] input.basic-search:placeholder-shown,
form[action="tasks.php"] input.basic-search:placeholder-shown,
form[action='tickets.php'] input.basic-search:placeholder-shown {
    /*color: var(--mobile-link-color) !important;*/
    /*hides text cursor*/
    opacity: .8 !important;
    font-size: 13px !important;
    font-style: italic !important;
}

form[action="kb.php"] input#query::placeholder,
form[action="orgs.php"] input.basic-search::placeholder,
form[action="users.php"] input.basic-search::placeholder,
form[action="tasks.php"] input.basic-search::placeholder,
form[action="tickets.php"] input.basic-search::placeholder {
    color: var(--header-bg) !important;
    opacity: .8 !important;
    font-size: 13px !important;
    font-style: italic !important;
}

form[action="kb.php"] input#query::-moz-placeholder,
form[action="orgs.php"] input.basic-search::-moz-placeholder,
form[action="users.php"] input.basic-search::-moz-placeholder,
form[action="tasks.php"] input.basic-search::-moz-placeholder,
form[action='tickets.php'] input.basic-search::-moz-placeholder {
    color: var(--nav-bar-link) !important;
    opacity: .8 !important;
    font-size: 13px !important;
    font-style: italic !important;
}

form[action="kb.php"] input#query::-ms-input-placeholder,
form[action="orgs.php"] input.basic-search::-ms-input-placeholder,
form[action="users.php"] input.basic-search::-ms-input-placeholder,
form[action="tasks.php"] input.basic-search::-ms-input-placeholder,
form[action='tickets.php'] input.basic-search::-ms-input-placeholder {
    color: var(--nav-bar-link) !important;
    opacity: .8 !important;
    font-size: 13px !important;
    font-style: italic !important;
}

#basic_search {
    background-color: #f4f4f4;
    box-shadow: none;
    border-bottom: none;
    border-radius: 0 0 5px 5px;
    height: 0;
    margin-bottom: -1%;
}

/* #basic_search .attached.button {
    background-color: var(--header-title);
    border: none;
} */
#basic_search button[type=submit]:hover {
    color: var(--header-bg);
    box-shadow: none;
}

#basic_search .action-button.muted {
    box-shadow: 0 0 0 0 #cfd4d6 inset;
    margin: 0;
}

#basic_search i.icon-search {
    text-shadow: none;
}

.sticky.bar.opaque.fixed form[action="tickets.php"] .attached.input,
.sticky.bar.opaque.fixed form[action="tickets.php"] .action-button.advanced-search.gray-light2 {
    display: none;
}

/* ==========================================================================
 TINYMCE
========================================================================== */
.mce-tinymce {
    margin-top: 10px !important;
    border: .5px solid #d7d7d7 !important;
}

.mce-panel {
    background-color: #e7e7e9 !important;
    border-radius: 5px !important;
    border: unset !important;
}

.mce-floatpanel.mce-popover.mce-bottom>.mce-arrow:after {
    border-bottom-color: #e7e7e9 !important;
}

.mce-menubar {
    border: .5px solid #d7d7d7 !important;
    border-radius: 5px 5px 0 0 !important;
    background: #e7e7e9 !important;
}

.mce-menubar .mce-menubtn button {
    background: #e7e7e9 !important;
}

.mce-toolbar {
    border-left: .5px solid #e6e6e6 !important;
    border-right: .5px solid #e6e6e6 !important;
}

.mce-stack-layout {
    background: #e7e7e9 !IMPORTANT;
}

.mce-menubar .mce-menubtn button span,
.mce-txt {
    color: #6e6e6e !important;
}

.mce-menu-item:hover .mce-text,
.mce-menu-item.mce-selected .mce-text,
.mce-menu-item:focus .mce-text {
    color: white !important;
}

.mce-btn .mce-caret,
.mce-menubar .mce-caret {
    border-top-color: #6e6e6e !important;
}

.mce-btn {
    border: unset !important;
    border-color: transparent transparent transparent transparent !important;
    position: relative !important;
    text-shadow: unset !important;
    display: inline-block !important;
    background-color: unset !important;
}

.mce-menubtn button {
    color: #333 !important;
    background: #e7e7e9 !important;
}

.mce-menu {
    border-radius: 5px 5px 5px 5px !important;
    border: .5px solid #c7c6c0 !important;
}

div.mce-menu .mce-menu-item-sep,
.mce-menu-item-sep:hover {
    border-bottom: .5px solid #d5cda4 !important;
}

.mce-btn button {
    padding: 3px 5px !important;
    background: #e7e7e9 !important;
}

.mce-btn-group:not(:first-child) {
    border-left: unset !important;
    padding: 0 10px 0 0;
    margin-left: unset !important;
    border-radius: 0 !important;
}

.mce-toolbar-grp {
    border-radius: 0 !important;
}

.mce-splitbtn:hover .mce-open {
    border-left-color: #e7e7e9 !important;
}

.mce-txt {
    font-size: 12px !important;
}

.mce-colorbutton .mce-preview {
    display: none !important;
}

.mce-widget button {
    padding: 5px !important;
}

button.mce-open {
    padding: 5px 5px 5px 0 !important;
}

.mce-i-backcolor {
    top: 0 !important;
    background: #89dce6 !important;
}

div[style="border-width: 1px 0 0;"] {
    /*    border: unset !important;
    border-top: .5px solid #bfbfbf !important;*/
}

.mce-toolbar-grp .mce-flow-layout-item:first-child {
    margin-left: 4px !important;
}

.mce-floatpanel.mce-popover {
    border: .5px solid #bfbfbf !important;
    border-radius: 5px !important;
}

.mce-menu-item .mce-caret {
    border-left: 4px solid #6e6e6e !important;
}

.mce-menu-item .mce-ico,
.mce-menu-item .mce-text {
    color: #6e6e6e !important;
}

.mce-menu-item:hover>i.mce-ico {
    color: white !important;
}

.mce-menu-item .mce-text {
    color: #59574c;
    font-family: 'Open Sans', sans-serif !important;
}

.mce-menu-item-normal.mce-active .mce-text {
    color: white !important;
}

/* Help Menu */
.mce-window-head {
    border-bottom: unset !important;
}

.mce-tabs {
    border-bottom: .5px solid #c5c5c5 !important;
}

.mce-tab {
    background: #e7e7e9 !important;
    border: .5px solid #c8c8c7 !important;
    border-left: unset !important;
    border-bottom: unset !important;
}

.mce-container,
.mce-container-body {
    border-radius: 5px 5px 0 0 !important
}

.mce-tabs,
.mce-tabs+.mce-container-body {
    background: #e7e7e9 !important;
}

.mce-container .mce-table-striped tr:nth-child(even) {
    background-color: #d6d6d6 !important;
}

.mce-tab.mce-active {
    border-top: .5px solid #cac9bf !important;
    margin-bottom: -2px !important;
    height: 14px !important;
    border-bottom: 2px solid #e7e7e9 !important;
}

.mce-container .mce-table-striped thead>tr {
    background-color: #e7e7e9 !important;
}

.mce-container .mce-table-striped tbody>tr:hover {
    background-color: #dbd7c3 !important;
}

.mce-foot {
    border-radius: 0 0 5px 5px !important;
    border-top: .5px solid #c5c5c5 !important;
}

div[style="padding: 10px; background: #e3e7f4; height: 100%;"] {
    background-color: #d6d6d6 !important;
}

.mce-edit-area {
    border: .5px solid #d7d7d7 !important;
    border-radius: 0 !important;
    border-right: 1px solid #e6e6e6 !important;
    border-left: 1px solid #e6e6e6 !important;
}

div[style="left: 427px;top: 10px;width: 47px;height: 30px;"] {
    left: unset !important;
    top: 10px;
    width: 47px;
    height: 30px;
}

.mce-textbox,
.mce-combobox input {
    border: .5px solid #c5c5c5 !important;
}

.mce-floatpanel.mce-popover.mce-bottom>.mce-arrow {
    -webkit-box-shadow: 0 2px 0 0 #e7e7e9;
    -moz-box-shadow: 0 2px 0 0 #e7e7e9;
    box-shadow: 0 2px 0 0 #e7e7e9;
}

#basic_search form[action="banlist.php"] .attached.input button.attached.button {
    background: #7ab800;
}

#basic_search form[action="banlist.php"] .attached.input i.icon-search {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M9.5%2C3A6.5%2C6.5 0 0%2C1 16%2C9.5C16%2C11.11 15.41%2C12.59 14.44%2C13.73L14.71%2C14H15.5L20.5%2C19L19%2C20.5L14%2C15.5V14.71L13.73%2C14.44C12.59%2C15.41 11.11%2C16 9.5%2C16A6.5%2C6.5 0 0%2C1 3%2C9.5A6.5%2C6.5 0 0%2C1 9.5%2C3M9.5%2C5C7%2C5 5%2C7 5%2C9.5C5%2C12 7%2C14 9.5%2C14C12%2C14 14%2C12 14%2C9.5C14%2C7 12%2C5 9.5%2C5Z' /%3E%3C/svg%3E");
}

/* ==========================================================================
 ADVANCED TICKET SEARCH POPUP / EDIT TICKET QUEUE POPUP (uses same css)
========================================================================== */
#advanced-search i.icon-save {
    position: relative;
    /*top: 0; */
    /*target*/
}

button#do_search i.icon-search {
    top: 3px;
    margin-right: 3px;
}

.dialog fieldset input:not([type=checkbox]) {
    border: .5px solid #bfbfbf;
    padding: 3px 3px 3px 8px;
}

.adv-search-field {
    margin-top: 0 !important;
}

#advanced-search .accordian dt {
    border-radius: 4px;
    border: .5px solid #aad3e3;
    background: #d1f2ff;
}

#advanced-search .accordian dt a {
    color: #12759c;
    font-weight: 400;
    display: block;
}

div[style="border-left:1px solid #888;position:relative;padding-bottom:26px;"] {
    border-left: .5px solid #888 !important;
}

.select2-container.select2-container--default.select2-container--open {
    z-index: 999999 !important;
}

#criteria .adv-search-field-container {
    margin-top: 3px;
}

form#advsearch .flex.row .span12 {
    padding-left: 0;
    margin-bottom: 10px;
}

form#advsearch #criteria .flex.row .span12 {
    padding: 5px 10px;
}

@media (max-width: 660px) {
    form[action="#tickets/search"] .row {
        display: unset;
    }

    #advanced-search .span6+.span6 {
        margin-left: 0;
    }

    #advanced-search .row .span6 {
        display: unset;
        width: 100%;
        padding: 5px 10px;
        vertical-align: top;
    }

    #advanced-search div[style="margin-bottom: 0.5em;"] {
        margin-bottom: 5px !important;
        margin-top: 20px;
    }

    #advanced-search .accordian dt {
        margin-bottom: 5px;
        max-width: 300px;
    }

    #advanced-search div[style="border-left:1px solid #888;position:relative;padding-bottom:26px;"] {
        border-left: unset !important;
    }

    #advanced-search div[style="position:absolute;bottom:0"] {
        position: relative !important;
        width: 100%;
        margin-top: 10px;
    }

    #advanced-search div#saved-searches {
        margin-bottom: 0;
    }

    div#advanced-search hr {
        visibility: hidden;
        margin: 0;
    }

    dt.saved-search i.icon-chevron-down.pull-right {
        top: 1px;
    }
}

/* Edit Ticket Queue popup (uses same code as Advanced Ticket Search) */
form#advsearch table td:not(:empty) {
    padding: 4px;
    background: #fff !important;
}

form#advsearch .dialog .table td:not(:empty) {
    background-color: #fff !important;
}

form#advsearch table td#append-column:not(:empty) {
    padding-top: 20px !important;
}

div.translatable {
    outline: initial !important;
}

div.translatable.focus {
    outline: .5px solid #606d7f !important;
}

form#advsearch #inherited-parent {
    margin-bottom: 7px !important;
}

form#advsearch tbody.sortable-rows input.translatable {
    width: 170px;
}

form#advsearch tbody.sortable-rows input[data-name="width"] {
    display: none;
}

form#advsearch input.translatable {
    position: relative;
    top: 1px;
    left: 2px;
}

form#advsearch button.translatable {
    margin: 0;
    padding: 0;
    height: 33px;
}

form#advsearch button.translatable i.fa.fa-globe.icon-globe {
    top: 0;
}

form#advsearch button.translatable:hover {
    border: initial;
    background-color: #EFEFEF;
}

form#advsearch .translatable .flag {
    margin-right: 0;
    width: 15px;
    height: 15px;
    position: relative;
    top: 3px;
}

form#advsearch .translatable.focus:active {
    outline: initial;
}

form#advsearch #append-column i.icon-plus-sign {
    margin-left: 5px;
}

form#advsearch #append-column select#add-column {
    min-width: 212px !important;
}

form#advsearch #append-column button.green.button {
    position: relative;
    top: -3px;
    background: #DCDFE2;
    color: #343a42;
    padding: 4px 14px;
}

form#advsearch #append-column button.green.button:hover {
    border: initial !important;
    background: #c9cdd0 !important
}

/* ==========================================================================
 SAFARI 7.1+ ONLY
========================================================================== */
_::-webkit-full-page-media,
_:future,
:root #sub_nav a,
_::-webkit-full-page-media,
_:future,
:root #nav .active a,
_::-webkit-full-page-media,
_:future,
:root #nav .inactive a,
_::-webkit-full-page-media,
_:future,
:root div#header a {
    color: var(--header-title);
    font-weight: 400;
}

_::-webkit-full-page-media,
_:future,
:root .action-button {
    border: 1px solid #d4d4d4;
}

_::-webkit-full-page-media,
_:future,
:root input,
_::-webkit-full-page-media,
_:future,
:root textarea,
_::-webkit-full-page-media,
_:future,
:root input[type=text],
_::-webkit-full-page-media,
_:future,
:root button#do_search,
_::-webkit-full-page-media,
_:future,
:root .input.attached input,
_::-webkit-full-page-media,
_:future,
:root button.ui-datepicker-trigger,
_::-webkit-full-page-media,
_:future,
:root .input.attached .button.attached,
_::-webkit-full-page-media,
_:future,
:root .dialog fieldset input:not([type=checkbox]) {
    border: 1px solid #bfbfbf
        /*!important*/
    ;
    -webkit-appearance: none;
}

input[type="checkbox"] {
    -webkit-appearance: checkbox;
}

_::-webkit-full-page-media,
_:future,
:root input[type=radio] {
    top: 0;
}

_::-webkit-full-page-media,
_:future,
:root .input.attached .button.attached {
    border-left: 0 !important;
}

_::-webkit-full-page-media,
_:future,
:root div[style="border-left:1px solid #888;position:relative;padding-bottom:26px;"] {
    border-left: 1px solid #888 !important;
}

/* ==========================================================================
 API KEYS
========================================================================== */
form[action="apikeys.php"] table.list th:first-child {
    width: 5%;
}

form[action="apikeys.php"] table.list th:nth-child(2) {
    width: calc(100% - 60% - 4%);
}

form[action="apikeys.php"] table.list th:nth-child(3),
form[action="apikeys.php"] table.list th:nth-child(4),
form[action="apikeys.php"] table.list th:nth-child(5),
form[action="apikeys.php"] table.list th:nth-child(6) {
    width: 15%;
}

form[action="apikeys.php"] table.list td:nth-child(6) {
    font-size: 12px;
}

/* ==========================================================================
 SCHEDULES
========================================================================== */
form[action="schedules.php"] table.list th:first-child {
    width: 4% !important;
}

form[action="schedules.php"] table.list th:nth-child(2) {
    width: calc(100% - 4% - 45%);
}

form[action="schedules.php"] table.list th:nth-child(3),
form[action="schedules.php"] table.list th:nth-child(4),
form[action="schedules.php"] table.list th:nth-child(5) {
    width: 15%;
}

.schedules li a {
    padding: 4px 0 0 0 !important;
}

#schedule-tabs_container .form_table,
#schedule-tabs_container .tab_content:not(.left) {
    padding-top: 0;
}

.schedules table.list tbody tr td:nth-child(2) {
    padding-right: 20px !important;
}

#schedule-holidays i.icon-calendar:before {
    top: -5px;
}

.schedules-page i.icon-calendar {
    top: 0;
}

.schedules-page table.form_table .select2-container {
    width: 294px !important;
}

.schedules-page table.form_table input[type=text] {
    width: 283px !important;
}

.schedules-page .form-simple .custom-field {
    margin-bottom: 22px;
}

/* ==========================================================================
 BAN LIST
========================================================================== */
form[action="banlist.php"] table.list,
#ticketTable {
    margin: 3px 0 0 0;
}

form[action="banlist.php"] table.list th:first-child {
    width: 3.5%;
}

form[action="banlist.php"] table.list th:nth-child(2) {
    width: calc(100% - 53%);
}

form[action="banlist.php"] table.list th:nth-child(3),
form[action="banlist.php"] table.list th:nth-child(4),
form[action="banlist.php"] table.list th:nth-child(5) {
    width: 16.5%;
}

form[action="banlist.php"] table.list td:nth-child(2) a {
    font-size: 13px;
}

.banlist #basic_search {
    background: rgba(0, 0, 0, 0.10196078431372549);
    margin: -10px 0;
    display: block;
    padding: 4px 4px 2px 8px;
    height: 42px;
}

.banlist i.icon-search {
    background-position: 1px -3px;
}

.banlist .attached.input {
    float: right;
    margin-right: 13px;
}

/* ==========================================================================
 CANNED RESPONSES
========================================================================== */
form[action="canned.php"] table.list th:first-child {
    width: 4%;
}

form[action="canned.php"] table.list th:nth-child(2) {
    width: calc(100% - 4% - 45%);
}

form[action="canned.php"] table.list th:nth-child(3),
form[action="canned.php"] table.list th:nth-child(4),
form[action="canned.php"] table.list th:nth-child(5) {
    width: 15%;
}

form[action="canned.php"] table.list td:nth-child(2) a {
    font-size: 14px;
}

.canned table.list .Icon.file {
    margin-left: 5px;
}

/* ==========================================================================
 CATEGORIES
========================================================================== */
form[action="categories.php"] table.list th:first-child {
    width: 4%;
}

form[action="categories.php"] table.list th:nth-child(2) {
    width: calc(100% - 4% - 45%);
}

form[action="categories.php"] table.list th:nth-child(3),
form[action="categories.php"] table.list th:nth-child(4),
form[action="categories.php"] table.list th:nth-child(5) {
    width: 15%;
}

form[action="categories.php"] table.list td:nth-child(4) {
    text-align: left !important;
}

form[action="categories.php"] table.list td:nth-child(2) a {
    font-size: 14px;
}

/* ==========================================================================
 DEPARTMENTS
========================================================================== */
form[action="departments.php"] table.list,
#ticketTable {
    margin: 8px 0 0 0;
}

form[action="departments.php"] table.list th:first-child {
    width: 3.5% !important;
}

form[action="departments.php"] table.list th:nth-child(2),
form[action="departments.php"] table.list th:nth-child(6) {
    width: 20%;
}

form[action="departments.php"] table.list th:nth-child(3),
form[action="departments.php"] table.list th:nth-child(4),
form[action="departments.php"] table.list th:nth-child(5),
form[action="departments.php"] table.list th:nth-child(7),
form[action="departments.php"] table.list th:nth-child(8) {
    width: calc((100% - 43.5%) / 5);
}

form[action="departments.php"] table.list td:nth-child(2) a {
    font-size: 14px;
}

form[action="departments.php"] table.list td:nth-child(2) small {
    font-weight: 600;
    padding-left: 6px;
    color: #f19090;
    font-size: 11px;
    position: relative;
    top: -1px;
}

/* ==========================================================================
 DIRECTORY
========================================================================== */
.directory table.list th:first-child {
    width: 20%;
    background-image: initial;
}

.directory table.list th:nth-child(5) {
    width: 10%;
}

.directory table.list th:nth-child(2) .directory table.list th:nth-child(3),
.directory table.list th:nth-child(4),
.directory table.list th:nth-child(6) {
    width: calc(70% / 4);
}

.directory-page table.list th:first-child a.desc {
    padding: 1px 0 0 8px;
}

.directory table.list td:first-child {
    font-weight: 500;
    padding-left: 20px;
    font-size: 14px !important;
}

form#users-list table.list td,
form#users-list table.list td a,
#mobile-only table.list a.preview.cursor,
#mobile-only table.list a.preview.cursor a {
    border: initial !important;
}

.directory table.list td[colspan="6"] {
    background: #fff !important;
}

.directory select#did {
    width: 184px;
}

.directory input[value="Filter"] {
    width: 90px !important;
    min-width: 90px !important;
}

.directory table.list tfoot td[colspan="6"] {
    border: 1px solid rgb(243, 243, 245) !important;
    padding: 12px !important;
}

.directory table.list tfoot td[colspan="6"]:before {
    display: none;
}

.note-name {
    display: inline-block;
    position: relative;
    top: -17px;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    padding-right: 10px;
    margin-right: 7px;
}

.quicknote .header .options {
    padding-left: 0;
    margin-left: 0;
    border-left: initial;
}

.quicknote .header .header-right a.action i,
.quicknote .header .header-right a.action i:before {
    background-size: 19px !important;
    background-position: 1px -3px;
}

.quicknote .header .header-right a.action {
    position: relative;
    top: -5px;
}

/* ==========================================================================
 EMAILS
========================================================================== */
form[action="emails.php"] table.list,
#ticketTable {
    margin: 8px 0 0 0;
}

form[action="emails.php"] table.list th:first-child {
    width: 4%;
}

form[action="emails.php"] table.list th:nth-child(2) {
    width: calc(100% - 60% - 4%);
}

form[action="emails.php"] table.list th:nth-child(3),
form[action="emails.php"] table.list th:nth-child(4),
form[action="emails.php"] table.list th:nth-child(5),
form[action="emails.php"] table.list th:nth-child(6) {
    width: 15%;
}

form[action="emails.php"] table.list td:nth-child(6) {
    font-size: 12px;
}

form[action="emails.php"] table.list td:nth-child(2) a {
    font-size: 14px;
}

form[action="emails.php"] table.list td:nth-child(2) small {
    font-weight: 600;
    padding-left: 6px;
    color: #f19090;
    font-size: 11px;
    position: relative;
    top: -1px;
}

/* ==========================================================================
 FILTERS
========================================================================== */
form[action="filters.php"] table.list th:first-child {
    width: 4%;
}

form[action="filters.php"] table.list th:nth-child(2) {
    width: calc(100% - (10% * 5) - 14% - 4%);
}

form[action="filters.php"] table.list th:nth-child(3),
form[action="filters.php"] table.list th:nth-child(4),
form[action="filters.php"] table.list th:nth-child(5),
form[action="filters.php"] table.list th:nth-child(6),
form[action="filters.php"] table.list th:nth-child(7) {
    width: 10%;
}

form[action="filters.php"] table.list th:nth-child(8) {
    width: 14%;
}

form[action="filters.php"] table.list td:nth-child(2) a {
    font-size: 14px;
}

.filters-page .form_table input[name="name"] {
    width: 281px;
}

.filters-page .form_table .select2-container {
    width: 294px !important;
}

.filters-page #filter_actions .select2-container {
    width: 294px !important;
}

.filters-page button#new-action-btn {
    padding: 4px 16px;
}

.filters-page .select2.select2-container.select2-container--default~.select2.select2-container.select2-container--default {
    margin-top: 0;
}

/* ==========================================================================
 FORMS
========================================================================== */
form[action="forms.php"] table.list th:first-child {
    background-image: none;
    width: 4%;
}

form[action="forms.php"] table.list th:nth-child(2),
form[action="forms.php"] table.list th:nth-child(3) {
    width: calc((100% - 4%) / 2);
}

form[action="forms.php"] table.list tbody td:nth-child(3) {
    padding: 0;
}

/* ==========================================================================
 HELP TOPICS
========================================================================== */
form[action="helptopics.php"] table.list td:not(:first-child) {
    padding-left: 0;
}

form[action="helptopics.php"] table.list th:first-child {
    width: 4% !important;
}

form[action="helptopics.php"] table.list th:nth-child(2) {
    width: calc(100% - (12% * 6) - 4%);
}

form[action="helptopics.php"] table.list th:nth-child(3),
form[action="helptopics.php"] table.list th:nth-child(4),
form[action="helptopics.php"] table.list th:nth-child(5),
form[action="helptopics.php"] table.list th:nth-child(6),
form[action="helptopics.php"] table.list th:nth-child(7),
form[action="helptopics.php"] table.list td:nth-child(8) {
    width: 12%;
}

form[action="helptopics.php"] table.list td:nth-child(2) a {
    font-size: 14px;
}

form[action="helptopics.php"] table.list td:nth-child(7),
form[action="helptopics.php"] table.list td:nth-child(8) {
    font-size: 11px;
}

form[action="helptopics.php"] table.list thead tr:first-child {
    display: none;
}

div[style="padding:8px 0;border-bottom: 2px dotted #ddd;"] {
    border: initial !important;
}

.language-commit {
    background: url(../../osta/img/priority-pattern-overlay.png) #e5bc61 !important;
}

div.add-translation button {
    color: #25ad30;
}

table.list tbody tr.item-disabled td a {
    opacity: .6;
}

table.list tbody tr.item-disabled td {
    color: #777777a6;
}

/* ==========================================================================
 ADD A NEW HELP TOPIC
========================================================================== */
.helptopics #topic-forms td.handle {
    padding: 0 0 10px 0 !important;
}

#topic-tabs_container .select2-selection {
    width: 300px;
}

#topic-tabs_container div#info input[type="text"] {
    width: 289px;
}

/* ==========================================================================
 USERS
========================================================================== */
form[action="users.php"] table.list,
#ticketTable {
    margin: 2px 0 0 0;
}

form[action="users.php"] table.list th:first-child {
    width: 4%;
}

form[action="users.php"] table.list th:nth-child(2) {
    width: calc(100% - 4% - 45%);
}

form[action="users.php"] table.list th:nth-child(3),
form[action="users.php"] table.list th:nth-child(4),
form[action="users.php"] table.list th:nth-child(5) {
    width: 15%;
}

form[action="users.php"] table.list td:nth-child(2) a {
    font-size: 14px;
}

#content.users form#users-list td i.icon-fixed-width.icon-file-text-alt {
    font-size: 17px;
    float: right;
    padding-right: 30px;
}

/* ==========================================================================
 ORGANIZATIONS
========================================================================== */
form[action="orgs.php"] table.list,
#ticketTable {
    margin: 2px 0 0 0;
}

form[action="orgs.php"] table.list th:first-child {
    width: 4%;
}

form[action="orgs.php"] table.list th:nth-child(2) {
    width: calc(100% - 4% - 45%);
}

form[action="orgs.php"] table.list th:nth-child(3),
form[action="orgs.php"] table.list th:nth-child(4),
form[action="orgs.php"] table.list th:nth-child(5) {
    width: 15%;
}

form[action="orgs.php"] table.list td:nth-child(2) a {
    font-size: 14px;
}

.users a[href="#users/112/edit"] {
    color: #128dbe;
    font-weight: 500;
    font-size: 15px;
    top: 2px !important;
}

div#orgprofile_container .hidden th {
    padding-top: 25px;
}

#orgprofile_container td {
    height: 42px !important;
}

.orgs-page table.list td:nth-child(2) {
    font-size: 14px;
    padding: 10px 0;
}

.orgs #tickets table.list th:first-child {
    background-image: none;
    width: 10% !important;
}

.orgs #tickets form[action="users.php"] table.list th:nth-child(2) {
    width: 18%;
}

.orgs #tickets form[action="users.php"] table.list th:nth-child(3) {
    width: 8%;
}

.orgs #tickets form[action="users.php"] table.list th:nth-child(4),
.orgs #tickets form[action="users.php"] table.list th:nth-child(5) {
    width: 30%;
}

.orgs #tickets form[action="users.php"] table.list td:nth-child(3) {
    font-size: 14px;
    padding: 0;
}

.orgs-page td.user-count-hide {
    font-size: 0;
}

.orgs-page td.user-count-hide:after {
    background: initial !important;
}

/* ==========================================================================
 PAGES
========================================================================== */
form[action="pages.php"] table.list th:first-child {
    width: 4%;
}

form[action="pages.php"] table.list th:nth-child(2) {
    width: 40%;
}

form[action="pages.php"] table.list th:nth-child(3),
form[action="pages.php"] table.list th:nth-child(4),
form[action="pages.php"] table.list th:nth-child(5),
form[action="pages.php"] table.list th:nth-child(6) {
    width: 14%;
}

.pages form[action="pages.php"] table.list tbody tr td:nth-child(2) {
    padding-left: 10px !important;
    font-size: 0 !important;
}

form[action="pages.php"] table.list td:nth-child(6) {
    /* font-size: 12px; */
}

.pages .tab_content {
    margin-bottom: 10px;
}

.pages table.form_table.fixed input[type="text"] {
    width: 308px !important;
}

/* ==========================================================================
 PLUGINS
========================================================================== */
.plugins .centered {
    margin: 40px 0;
}

.plugins .button.action-button[type=submit]:hover {
    color: white;
    box-shadow: initial;
    border: .5px solid rgb(68, 162, 208) !important;
    background-color: rgb(68, 162, 208);
}

.plugins div.section-break {
    font-size: 100%;
}

.plugins tfoot tr {
    height: 43px;
}

.plugins-page table.list tbody td:first-child {
    padding: 0 30px;
    width: 82px;
}

.plugins-page table.list tbody td:nth-child(2) {
    padding: 0 10px;
}

.plugins-page button.button.action-button {
    background: #fff;
    font-size: 13px;
}

.plugins table.list tbody tr td:nth-child(2) {
    font-size: 14px !important;
    padding: 30px 34px 30px 0 !important;
}

.plugins table.list tbody tr td:nth-child(2) strong {
    font-size: 18px;
    font-weight: 500;
    padding-bottom: 12px;
    display: inline-block;
}

.plugins-page form[action="plugins.php"] table.list tbody td:nth-child(2) a {
    font-size: 15px;
    color: #227b9e;
}

.plugins-page form[action="plugins.php"] table.list tbody td:nth-child(2) {
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 28px;
    padding-left: 41px !important;
    background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg version='1.1' id='svg2' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 48 48' style='enable-background:new 0 0 48 48%3B' xml:space='preserve'%3E %3Cstyle type='text/css'%3E .st0%7Bfill:%23F9F9F9%3B%7D .st1%7Bfill:%23ECECEC%3B%7D .st2%7Bfill:%23CCCCCC%3B%7D .st3%7Bfill:none%3Bstroke:%234D4D4D%3B%7D %3C/style%3E %3Csodipodi:namedview bordercolor='%23666666' borderopacity='1.0' id='base' inkscape:current-layer='layer1' inkscape:cx='27.203376' inkscape:cy='26.578528' inkscape:document-units='px' inkscape:pageopacity='0.0' inkscape:pageshadow='2' inkscape:window-height='968' inkscape:window-maximized='1' inkscape:window-width='1280' inkscape:window-x='-4' inkscape:window-y='-4' inkscape:zoom='11.313708' pagecolor='%23ffffff' showgrid='true'%3E %3Cinkscape:grid empspacing='5' enabled='true' id='grid2985' snapvisiblegridlinesonly='true' type='xygrid' visible='true'%3E %3C/inkscape:grid%3E %3C/sodipodi:namedview%3E %3Cg id='layer1' transform='translate(0%2C-1004.3622)' inkscape:groupmode='layer' inkscape:label='Layer 1'%3E %3Cg id='g3000' transform='translate(-6%2C1003)'%3E %3Cpath id='path2987' inkscape:connector-curvature='0' sodipodi:nodetypes='ccccc' class='st0' d='M30%2C2.4l-20%2C10l20%2C10l20-10 L30%2C2.4z'/%3E %3Cpath id='path2989' inkscape:connector-curvature='0' sodipodi:nodetypes='ccccc' class='st1' d='M30%2C22.4v25l20-10v-25L30%2C22.4z' /%3E %3Cpath id='path2991' inkscape:connector-curvature='0' sodipodi:nodetypes='ccccc' class='st2' d='M30%2C22.4v25l-20-10v-25L30%2C22.4z '/%3E %3Cpath id='path2993' inkscape:connector-curvature='0' class='st3' d='M30%2C2.4l-20%2C10v25l20%2C10l20-10v-25L30%2C2.4z'/%3E %3C/g%3E %3C/g%3E %3C/svg%3E ");
}

.plugins-page form[action="?"] table.list tbody td:nth-child(2) {
    padding-right: 152px !important;
    background-repeat: no-repeat;
    background-position: 97% 50%;
    background-size: 100px;
    background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg version='1.1' id='svg2' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 48 48' style='enable-background:new 0 0 48 48%3B' xml:space='preserve'%3E %3Cstyle type='text/css'%3E .st0%7Bfill:%23F9F9F9%3B%7D .st1%7Bfill:%23ECECEC%3B%7D .st2%7Bfill:%23CCCCCC%3B%7D .st3%7Bfill:none%3Bstroke:%234D4D4D%3Bstroke-width:0.25%3B%7D %3C/style%3E %3Csodipodi:namedview bordercolor='%23666666' borderopacity='1.0' id='base' inkscape:current-layer='layer1' inkscape:cx='27.203376' inkscape:cy='26.578528' inkscape:document-units='px' inkscape:pageopacity='0.0' inkscape:pageshadow='2' inkscape:window-height='968' inkscape:window-maximized='1' inkscape:window-width='1280' inkscape:window-x='-4' inkscape:window-y='-4' inkscape:zoom='11.313708' pagecolor='%23ffffff' showgrid='true'%3E %3Cinkscape:grid empspacing='5' enabled='true' id='grid2985' snapvisiblegridlinesonly='true' type='xygrid' visible='true'%3E %3C/inkscape:grid%3E %3C/sodipodi:namedview%3E %3Cg id='layer1' transform='translate(0%2C-1004.3622)' inkscape:groupmode='layer' inkscape:label='Layer 1'%3E %3Cg id='g3000' transform='translate(-6%2C1003)'%3E %3Cpath id='path2987' inkscape:connector-curvature='0' sodipodi:nodetypes='ccccc' class='st0' d='M30%2C2.4l-20%2C10l20%2C10l20-10 L30%2C2.4z'/%3E %3Cpath id='path2989' inkscape:connector-curvature='0' sodipodi:nodetypes='ccccc' class='st1' d='M30%2C22.4v25l20-10v-25L30%2C22.4z' /%3E %3Cpath id='path2991' inkscape:connector-curvature='0' sodipodi:nodetypes='ccccc' class='st2' d='M30%2C22.4v25l-20-10v-25L30%2C22.4z '/%3E %3Cpath id='path2993' inkscape:connector-curvature='0' class='st3' d='M30%2C2.4l-20%2C10v25l20%2C10l20-10v-25L30%2C2.4z'/%3E %3C/g%3E %3C/g%3E %3C/svg%3E ");
}

.plugins-page form[action="plugins.php"] table.list tbody tr.item-disabled td:nth-child(2) {
    opacity: .6;
}

.plugins-page form[action="plugins.php"] table.list tbody tr.item-disabled:hover td:nth-child(2),
.plugins-page form[action="plugins.php"] table.list tbody tr.item-disabled.highlight td:nth-child(2),
.plugins-page form[action="plugins.php"] table.list tbody tr.item-disabled:nth-child(2n+1):hover td:nth-child(2) {
    opacity: 1;
}

/* ==========================================================================
 ROLES
========================================================================== */
form[action="roles.php"] table.list,
#ticketTable {
    margin: 8px 0 0 0;
}

form[action="roles.php"] table.list th:first-child {
    width: 4%;
}

form[action="roles.php"] table.list th:nth-child(2) {
    width: calc(100% - 4% - 45%);
}

form[action="roles.php"] table.list th:nth-child(3),
form[action="roles.php"] table.list th:nth-child(4),
form[action="roles.php"] table.list th:nth-child(5) {
    width: 15%;
}

form[action="roles.php"] table.list tbody td {
    padding-left: 0;
}

form[action="roles.php"] table.list td:first-child {
    padding-left: 10px;
}

form[action="roles.php"] table.list td:nth-child(2) a {
    font-size: 14px;
}

.roles-page a[href="#permissions"]:before {
    display: none;
}

/* ==========================================================================
 SERVICE LEVEL AGREEMENTS
========================================================================== */
form[action="slas.php"] table.list th:first-child {
    width: 4%;
}

form[action="slas.php"] table.list th:nth-child(2) {
    width: calc(100% - 4% - 60%);
}

form[action="slas.php"] table.list th:nth-child(3),
form[action="slas.php"] table.list th:nth-child(4),
form[action="slas.php"] table.list th:nth-child(5),
form[action="slas.php"] table.list th:nth-child(6) {
    width: 15%;
}

td[style="text-align:right;padding-right:35px;"] {
    padding-right: 0;
    text-align: initial !important;
}

.staff-side.slas-page table.form_table input[type="text"] {
    width: 294px;
}

/* ==========================================================================
 STAFF MEMBERS (AGENTS)
========================================================================== */
form[action="staff.php"] table.list,
#ticketTable {
    margin: 6px 0 0 0;
}

form[action="staff.php"] table.list th:first-child {
    width: 40px !important;
}

form[action="staff.php"] table.list th:nth-child(2) {
    width: calc(100% - (14% * 5) - 40px);
}

form[action="staff.php"] table.list th:nth-child(3),
form[action="staff.php"] table.list th:nth-child(4),
form[action="staff.php"] table.list th:nth-child(5),
form[action="staff.php"] table.list th:nth-child(6),
form[action="staff.php"] table.list th:nth-child(7) {
    width: 14%;
}

.staff-page table.list tbody td:nth-child(3) {
    font-size: 14px !important;
}

.staff table.list+div {
    margin: 0 0 40px 0;
}

form[action="staff.php"] table.list td:nth-child(2) a {
    font-size: 14px;
}

.staff #basic_search {
    background: rgba(0, 0, 0, 0.10196078431372549);
    margin: -10px 0 4px 0;
    display: inline-block;
    padding: 4px 4px 2px 8px;
    height: 42px;
    width: 99%;
}

.staff i.icon-search {
    background-position: 1px -3px;
}

.staff div[style="min-height:25px;"] {
    float: left;
}

.staff .pull-left {
    margin: 5px 0 0 0;
}

.staff-page .select2.select2-container.select2-container--default~.select2.select2-container.select2-container--default {
    margin-top: 0;
}

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

form[action="logs.php"] table.list th:nth-child(2) {
    width: 58%;
}

form[action="logs.php"] table.list th:nth-child(4) {
    width: 15%;
}

form[action="logs.php"] table.list th:nth-child(3),
form[action="logs.php"] table.list th:nth-child(5) {
    width: 12%;
}

form[action="logs.php"],
form[action="audits.php"],
form[action="banlist.php"] {
    display: inline-block;
    width: 100%;
}

.banlist .sticky.bar .content,
#system-logs .sticky.bar .content {
    margin: 18px 0 0 0;
    width: 100% !important;
}

form[action="logs.php"] select[name="type"] {
    width: 70px;
}

form[action="logs.php"] input[type="submit"],
form[action="audits.php"] input[type="submit"] {
    margin: 0 !important;
    padding: 4px 8px !important;
    min-width: initial;
    vertical-align: initial;
    position: relative;
    top: -1px;
}

form[action="logs.php"] div[style="margin-bottom:20px; padding-top:5px;"] {
    margin: 17px 0 0 0 !important;
}

.logs #basic_search,
.audits #basic_search {
    background: rgba(0, 0, 0, 0.10196078431372549);
    height: 35px;
}

form[action="logs.php"] .flush-left h2 {
    position: relative;
    top: -7px;
}

form[action="logs.php"] table.list tbody td,
form[action="audits.php"] table.list tbody td {
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

form[action="logs.php"] table.list tbody td a {
    font-size: 14px;
}

.logs-page #actions {
    margin: 0 0 5px 0;
}

.logs-page .pull-left.flush-left {
    margin-top: 10px;
}

/* ==========================================================================
 AUDIT LOGS (PLUGIN)
========================================================================== */
.audits select[name="type"],
.audits select[name="state"] {
    min-width: 140px !important;
    width: 140px !important;
}

form[action="audits.php"] .content {
    margin-top: 10px !important;
}

form[action="audits.php"] .pull-right {
    margin-bottom: 15px;
}

table#dashboard-audit th:first-child {
    width: unset !important;
}

.audits-page #footer,
.audits-page #autocron {
    display: none;
}

/* ==========================================================================
 TASKS
========================================================================== */
form[action="tasks.php"] table.list th:first-child {
    width: 4% !important;
}

form[action="tasks.php"] table.list th:first-child {
    background-position: 20px;
}

form[action="tasks.php"] td:nth-child(2) {
    padding: 0 0 0 10px !important;
}

form[action="tasks.php"] td:nth-child(3) {
    text-align: left !important;
    padding: 0 0 0 10px !important;
}

form[action="tasks.php"] table.list tbody tr.highlight td {
    /* highlight row borders acting weird */
    border-top: unset !important;
    border-bottom: unset !important;
    background-color: #ddd;
}

.tasks-page #content .pull-right .action-button.muted {}

#add-task-mobile {
    display: none;
}

#task_response_options {
    margin-top: 20px;
}

form[action="tasks.php"] table.list,
#ticketTable {
    margin: 0 0 0 0;
}

form[action="tasks.php"] table.list th:first-child {
    width: 4%;
}

form[action="tasks.php"] table.list th:nth-child(2) {
    width: 8%;
}

form[action="tasks.php"] table.list th:nth-child(3) {
    width: 8%;
}

form[action="tasks.php"] table.list th:nth-child(4) {
    width: 14%;
}

form[action="tasks.php"] table.list th:nth-child(5) {
    width: 34%;
}

form[action="tasks.php"] table.list th:nth-child(6) {
    width: 14%;
}

form[action="tasks.php"] table.list th:nth-child(7) {
    width: 18%;
}

form[action="tasks.php"] table.list th:nth-child(2) a {
    font-weight: 600;
}

form[action="tasks.php"] table.list td:nth-child(2) a {
    font-weight: 600;
}

form[action="tasks.php"] table.list td:nth-child(4) {
    padding: 10px 0 10px 10px;
    text-align: left;
}

form[action="tasks.php"] table.list td:nth-child(4) a {
    padding: 0 10px 0 0;
    font-size: 14px !important;
}

form[action="tasks.php"] table.list td:nth-child(4) div.wrap {
    float: left;
    max-width: 79%;
}

form[action="tasks.php"] table.list td:nth-child(4) .tasks-icons {
    float: right;
    height: 18px;
}

form[action="tasks.php"] table.list td:nth-child(4) .tasks-icons small {
    font-size: 12px !important;
    margin-right: 3px;
}

form[action="tasks.php"] table.list td:nth-child(5) {
    font-size: 14px;
}

form[action="tasks.php"] table.list i.icon-fixed-width.icon-comments-alt {
    width: 15px;
}

form[action="tasks.php"] table.list .wrap {
    float: left;
}

form[action="tasks.php"] table.list .tasks-icons {
    float: right;
}

form[action="tasks.php"] table.list i.icon-comments-alt {
    top: 4px;
}

#task_content a.preview {
    float: none;
}

#task_content .pull-left.flush-left a.preview {
    float: none;
    border: 1px solid #128dbe;
    line-height: initial;
    top: -1px;
    font-size: 15px;
    padding: 2px 6px;
    position: relative;
    background: #00000003;
    border-radius: 2px;
    margin: 0 0 0 3px;
}

#task_content .sticky.bar.fixed .pull-left.flush-left a.preview {
    color: var(--header-title);
    border-color: var(--header-title);
}

#tasks table.list th:first-child {
    width: 4% !important;
}

#tasks_content table.list tbody td {
    padding-left: 0;
}

#tasks_content table.list tbody td:first-child {
    padding-left: 14px;
}

@media screen and (min-width: 761px) {
    .tasks-page #content div[style="margin-bottom:20px; padding-top:5px;"] {
        margin: -21px 0 0 0 !important;
    }

}

/* ==========================================================================
 TEAMS
========================================================================== */
form[action="teams.php"] table.list,
#ticketTable {
    margin: 8px 0 0 0;
}

form[action="teams.php"] table.list th:first-child {
    width: 4%;
}

form[action="teams.php"] table.list th:nth-child(2) {
    width: calc(100% - (12% * 5) - 4%);
}

form[action="teams.php"] table.list th:nth-child(3),
form[action="teams.php"] table.list th:nth-child(4),
form[action="teams.php"] table.list th:nth-child(5),
form[action="teams.php"] table.list th:nth-child(6),
form[action="teams.php"] table.list th:nth-child(7) {
    width: 12%;
}

form[action="teams.php"] table.list td:nth-child(2) {
    font-size: 14px;
}

.teams-page #team input[type="text"] {
    width: 292px;
}

.teams-page #add_member .select2-container {
    width: 300px !important;
}

.teams-page #add_member button.action-button {
    padding: 4px 16px;
}

.teams-page i.icon-trash {
    top: -3px;
}

/* ==========================================================================
 TEMPLATES
========================================================================== */
form[action="templates.php"] table.list,
#ticketTable {
    margin: 8px 0 0 0;
}

form[action="templates.php"] table.list th:first-child {
    width: 4%;
}

form[action="templates.php"] table.list th:nth-child(2) {
    width: calc(100% - 60% - 4%);
}

form[action="templates.php"] table.list th:nth-child(3),
form[action="templates.php"] table.list th:nth-child(4),
form[action="templates.php"] table.list th:nth-child(5),
form[action="templates.php"] table.list th:nth-child(6) {
    width: 15%;
}

form[action="templates.php"] table.list td:nth-child(2) {
    font-size: 14px;
}

.templates i.icon-tags {
    position: relative;
    top: -2px;
}

/* ==========================================================================
 FLAGS
========================================================================== */
.rtl #languages {
    float: left;
}

#languages svg {
    /* remove */
    width: 24px;
    height: 24px;
    display: none;
}

#languages:hover {
    cursor: pointer;
}

.pages-page ul#translations .flag,
.forms-page ul#translations .flag {
    /* Manage > Forms */
    margin: 0px auto;
    position: relative;
    top: 6px;
}

.pages-page ul#translations li,
.forms-page ul#translations li {
    /* Manage > Forms */
    border: 1px solid #00000038 !important;
    border-radius: 2px;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    text-align: center;
    position: initial !important;
    margin: 0 0 4px 0 !important;
    background: #00000012;
}

.pages-page ul#translations li.active,
.forms-page ul#translations li.active {
    background: #b6c5ce;
    border: 1px solid #747476 !important;
}

.pages-page ul#translations li.empty,
.forms-page ul#translations li.empty {
    /* Manage > Forms */
    position: initial !important;
    margin: 0 !important;
}

.forms-page input.translatable+.flag {
    margin: 0 0 -3px 0;
}

.forms-page li[style="display: list-item;"] .flag {
    margin: 0 0 -4px 0;
}

.forms-page .translations .close {
    right: 11px;
    top: 0;
}

/*.flag.flag-ar {
    background: url(../../osta/svg/flags/argentina.svg) no-repeat;
}*/



.system .ar_EG,
.flag.flag-eg,
html[lang="ar_EG"] #languages {
    background: url(../../osta/svg/flags/egypt.svg) no-repeat;
}

.system .ar,
.system .ar_SA,
.flag.flag-ar,
.flag.flag-sa,
html[lang="ar_SA"] #languages {
    background: url(../../osta/svg/flags/saudi-arabia.svg) no-repeat;
}

.system .az,
.flag.flag-az,
html[lang="az"] #languages {
    background: url(../../osta/svg/flags/azerbaijan.svg) no-repeat;
}

.system .bg,
.flag.flag-bg,
html[lang="bg"] #languages {
    background: url(../../osta/svg/flags/bulgaria.svg) no-repeat;
}

.system .bn,
.flag.flag-bn,
html[lang="bn"] #languages {
    background: url(../../osta/svg/flags/bangladesh.svg) no-repeat;
}

.system .bs,
.flag.flag-bs,
html[lang="bs"] #languages {
    background: url(../../osta/svg/flags/bosnia.svg) no-repeat;
}

.system .ca,
.flag.flag-catalonia,
html[lang="ca"] #languages {
    background: url(../../osta/svg/flags/catalan.svg) no-repeat;
}

.system .cs,
.flag.flag-cz,
html[lang="cs"] #languages {
    background: url(../../osta/svg/flags/czech-republic.svg) no-repeat;
}

.system .da,
.flag.flag-dk,
html[lang="da"] #languages {
    background: url(../../osta/svg/flags/denmark.svg) no-repeat;
}

.system .de,
.flag.flag-de,
html[lang="de"] #languages {
    background: url(../../osta/svg/flags/germany.svg) no-repeat;
}

.system .el,
.flag.flag-gr,
html[lang="el"] #languages {
    background: url(../../osta/svg/flags/greece.svg) no-repeat;
}

.system .en_CAD,
.flag.flag-cad,
html[lang="en_CAD"] #languages {
    background: url(../../osta/svg/flags/canada.svg) no-repeat;
}

.system .en_GB,
.flag.flag-gb,
html[lang="en_GB"] #languages {
    background: url(../../osta/svg/flags/united-kingdom.svg) no-repeat;
}

.system .en_US,
.flag.flag-us,
html[lang="en_US"] #languages,
html[lang="en"] #languages {
    background: url(../../osta/svg/flags/united-states.svg) no-repeat;
}

.system .es_AR,
.flag.flag-ar,
.flag.flag-arg,
/*hmmm*/
html[lang="es_AR"] #languages {
    background: url(../../osta/svg/flags/argentina.svg) no-repeat;
}

.system .es_ES,
.flag.flag-es,
html[lang="es_ES"] #languages {
    background: url(../../osta/svg/flags/spain.svg) no-repeat;
}

.system .es_MX,
.flag.flag-mx,
html[lang="mx"] #languages {
    background: url(../../osta/svg/flags/mexico.svg) no-repeat;
}

.system .et,
.flag.flag-et,
html[lang="et"] #languages {
    background: url(../../osta/svg/flags/estonia.svg) no-repeat;
}

.system .eu,
.flag.flag-eu,
html[lang="eu"] #languages {
    background: url(../../osta/svg/flags/basque.svg) no-repeat;
}

.system .fa,
.flag.flag-ir,
html[lang="fa_IR"] #languages {
    background: url(../../osta/svg/flags/iran.svg) no-repeat;
}

.system .fi,
.flag.flag-fi,
html[lang="fi"] #languages {
    background: url(../../osta/svg/flags/finland.svg) no-repeat;
}

.system .fr,
.flag.flag-fr,
html[lang="fr"] #languages {
    background: url(../../osta/svg/flags/france.svg) no-repeat;
}

.system .gl,
.flag.flag-gl,
html[lang="gl"] #languages {
    background: url(../../osta/svg/flags/galician.svg) no-repeat;
}

.system .he,
.flag.flag-il,
html[lang="he"] #languages {
    background: url(../../osta/svg/flags/israel.svg) no-repeat;
}

.system .hi,
.flag.flag-hi,
html[lang="hi"] #languages {
    background: url(../../osta/svg/flags/india.svg) no-repeat;
}

.system .hr,
.flag.flag-hr,
html[lang="hr"] #languages {
    background: url(../../osta/svg/flags/croatia.svg) no-repeat;
}

.system .hu,
.flag.flag-hu,
html[lang="hu"] #languages {
    background: url(../../osta/svg/flags/hungary.svg) no-repeat;
}

.system .id,
.flag.flag-id,
html[lang="id"] #languages {
    background: url(../../osta/svg/flags/indonesia.svg) no-repeat;
}

.system .is,
.flag.flag-is,
html[lang="is"] #languages {
    background: url(../../osta/svg/flags/iceland.svg) no-repeat;
}

.system .it,
.flag.flag-it,
html[lang="it"] #languages {
    background: url(../../osta/svg/flags/italy.svg) no-repeat;
}

.system .ja,
.flag.flag-jp,
html[lang="ja"] #languages {
    background: url(../../osta/svg/flags/japan.svg) no-repeat;
}

.system .ka,
.flag.flag-ge,
html[lang="ka"] #languages {
    background: url(../../osta/svg/flags/georgia.svg) no-repeat;
}

.system .ke,
.flag.flag-ke,
html[lang="ke"] #languages {
    background: url(../../osta/svg/flags/kenya.svg) no-repeat;
}

.system .km,
.flag.flag-km,
html[lang="km"] #languages {
    background: url(../../osta/svg/flags/cambodia.svg) no-repeat;
}

.system .ko,
.flag.flag-ko,
html[lang="ko"] #languages {
    background: url(../../osta/svg/flags/south-korea.svg) no-repeat;
}

.system .lt,
.flag.flag-lt,
html[lang="lt"] #languages {
    background: url(../../osta/svg/flags/lithuania.svg) no-repeat;
}

.system .lv,
.flag.flag-lv,
html[lang="lv"] #languages {
    background: url(../../osta/svg/flags/latvia.svg) no-repeat;
}

.system .mk,
.flag.flag-mk,
html[lang="mk"] #languages {
    background: url(../../osta/svg/flags/macedonia.svg) no-repeat;
}

.system .mn,
.flag.flag-mn,
html[lang="mn"] #languages {
    background: url(../../osta/svg/flags/mongolia.svg) no-repeat;
}

.system .ms,
.flag.flag-ms,
html[lang="ms"] #languages {
    background: url(../../osta/svg/flags/malasya.svg) no-repeat;
}

.system .nl,
.flag.flag-nl,
html[lang="nl"] #languages {
    background: url(../../osta/svg/flags/netherlands.svg) no-repeat;
}

.system .no,
.flag.flag-no,
html[lang="no"] #languages {
    background: url(../../osta/svg/flags/norway.svg) no-repeat;
}

.system .pl,
.flag.flag-pl,
html[lang="pl"] #languages {
    background: url(../../osta/svg/flags/poland.svg) no-repeat;
}

.system .pt_BR,
.flag.flag-br,
html[lang="pt_BR"] #languages {
    background: url(../../osta/svg/flags/brazil.svg) no-repeat;
}

.system .pt_PT,
.flag.flag-pt,
html[lang="pt_PT"] #languages {
    background: url(../../osta/svg/flags/portugal.svg) no-repeat;
}

.system .ro,
.flag.flag-ro,
html[lang="ro"] #languages {
    background: url(../../osta/svg/flags/romania.svg) no-repeat;
}

.system .ru,
.flag.flag-ru,
html[lang="ru"] #languages {
    background: url(../../osta/svg/flags/russia.svg) no-repeat;
}

.system .sk,
.flag.flag-sk,
html[lang="sk"] #languages {
    background: url(../../osta/svg/flags/slovakia.svg) no-repeat;
}

.system .sl,
.flag.flag-si,
html[lang="sl"] #languages {
    background: url(../../osta/svg/flags/slovenia.svg) no-repeat;
}

.system .sq,
.flag.flag-sq,
html[lang="sq"] #languages {
    background: url(../../osta/svg/flags/albania.svg) no-repeat;
}

/* Serbian (Cyrillic) */
.system .sr,
.flag.flag-rs,
html[lang="sr"] #languages {
    background: url(../../osta/svg/flags/serbia.svg) no-repeat;
}

/* Serbian (Српски (Србија)) */
.system .sr_CS,
.flag.flag-rs,
.flag.flag-cs,
html[lang="sr-CS"] #languages {
    background: url(../../osta/svg/flags/serbia.svg) no-repeat;
}

.system .sv_SE,
.flag.flag-se,
html[lang="sv_SE"] #languages {
    background: url(../../osta/svg/flags/sweden.svg) no-repeat;
}

.system .sw,
.flag.flag-sw,
html[lang="sw"] #languages {
    background: url(../../osta/svg/flags/kenya.svg) no-repeat;
}

.system .th,
.flag.flag-th,
html[lang="th"] #languages {
    background: url(../../osta/svg/flags/thailand.svg) no-repeat;
}

.system .tr,
.flag.flag-tr,
html[lang="tr"] #languages {
    background: url(../../osta/svg/flags/turkey.svg) no-repeat;
}

.system .uk,
.flag.flag-ua,
html[lang="uk"] #languages {
    background: url(../../osta/svg/flags/ukraine.svg) no-repeat;
}

.system .ur_IN,
.flag.flag-in,
html[lang="ur_IN"] #languages {
    background: url(../../osta/svg/flags/india.svg) no-repeat;
}

.system .ur_PK,
.flag.flag-pk,
html[lang="ur_PK"] #languages {
    background: url(../../osta/svg/flags/pakistan.svg) no-repeat;
}

.system .vi,
.flag.flag-vi,
html[lang="vi"] #languages {
    background: url(../../osta/svg/flags/vietnam.svg) no-repeat;
}

.system .zh_CN,
.flag.flag-cn,
html[lang="zh_CN"] #languages {
    background: url(../../osta/svg/flags/china.svg) no-repeat;
}

.system .zh_TW,
.flag.flag-tw,
html[lang="zh_TW"] #languages {
    background: url(../../osta/svg/flags/taiwan.svg) no-repeat;
}





@media screen and (min-width: 600px) and (max-width: 622px) {
    .flag.flag-mn {
        /* Oops ran out of room sorry Mongolia you have to go */
        display: none;
    }
}

#trans .flag,
#translations .flag {
    background-size: 20px;
    width: 22px;
    height: 16px;
    background-position: center -2px;
    background-color: #b0b0b0;
    border-radius: 3px;
}

#translations i.icon-globe {
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    top: 1px !important;
}

#translations li:not(.active) {
    border-bottom: 7px solid #fff;
}

#translations .icon-globe:before {
    content: "\f0ac";
    font-size: 22px;
}

.pages-page ul#translations li.empty i.icon-globe:before,
.forms-page ul#translations li.empty i.icon-globe:before {
    font-size: 19px !important;
}

ul.tabs.alt li:hover {
    border-bottom: 2px solid var(--nav-bar-bg);
}

.accordion-hide {
    display: none !important
}

.accordion-show-block,
.accordion-show {
    display: block !important
}

.accordion-show-inline-block {
    display: inline-block !important
}

button.accord {
    margin: 0 0 0 6px;
    padding: initial;
    background: initial;
    border: initial;
}

button.accord .icon-question-sign:before {
    width: 25px;
    top: 7px;
}

button.accord:hover>.icon-question-sign:before {
    width: 25px;
    top: 7px;
}

div#lang-choices {
    background: #0000000d;
    margin: 0 0 20px 0;
    padding: 20px;
    width: fit-content;
}

div#header-constrain {
    max-width: 1264px;
    margin: 0 auto;
}

div#sub_nav-wrap {
    background: var(--nav-bar-bg);
    border: 0;
    margin: 60px 0 0 0;
    padding: 0;
    height: 24px;
    line-height: 23px;
}

/* .tickets-page #sub_nav {
    margin: 0 auto;
} */
.jb-overflowmenu {
    position: initial;
    width: initial;
    /*reset*/
    max-width: 960px;
}

.jb-overflowmenu .jb-overflowmenu-menu-primary {
    padding: 0;
    margin: 2px 0 0 0;
    height: 27px !important;
}

.jb-overflowmenu-menu-primary div.customQ-dropdown {
    top: 28px;
}

.jb-overflowmenu-menu-primary div.customQ-dropdown {
    border: solid .5px rgba(0, 0, 0, 0.2);
    border-top: initial;
    background: var(--nav-bar-bg);
    left: -11px;
    top: 26px;
}

ul.subMenuQ {
    background: var(--nav-bar-bg) !important;
}

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

#customQ_nav .jb-overflowmenu-menu-primary li.item {
    padding: 0;
    margin: 0;
}

#customQ_nav .jb-overflowmenu-menu-primary li.item:hover {
    padding: 0;
    background-color: inherit;
    border-left: initial;
    border-top: initial;
    border-right: initial;
}

ul#sub_nav .icon-sort-down:before {
    color: var(--nav-bar-link);
    font-size: 12px;
}

#sub_nav>li>a,
#sub_nav>li+li>a,
#customQ_nav .jb-overflowmenu-menu-primary li.item>a {
    color: var(--nav-bar-link) !important;
}

#sub_nav>li>a:hover,
#sub_nav>li+li>a:hover,
#customQ_nav .jb-overflowmenu-menu-primary li.item:hover>a,
#customQ_nav .jb-overflowmenu-menu-primary li.item>a:hover {
    color: var(--nav-bar-link-hover) !important;
}

.customQ-dropdown ul li>span.newItemQ {
    padding: 0;
    margin: 0 8px 0 0;
}

.customQ-dropdown li.personalQ {
    border-bottom: 1px dashed var(--header-title);
    background-color: initial;
    margin: 4px 0;
}

.customQ-dropdown li:not(.personalQ)>span {
    color: var(--header-title);
    font-weight: initial;
}

.customQ-dropdown ul li:not(.personalQ):hover {
    color: var(--header-title);
    background-color: var(--header-bg);
}

.customQ-dropdown ul li:not(.personalQ):hover>a.truncate {
    color: var(--header-title) !important;
}

.customQ-dropdown ul.scroll-height {
    border-bottom: solid .5px rgba(0, 0, 0, 0.2);
}

.customQ-dropdown .add-queue a span {
    color: var(--nav-bar-link);
    opacity: .8;
}

.customQ-dropdown .add-queue a:hover span {
    color: var(--header-title) !important;
    opacity: 1;
}

.customQ-dropdown .add-queue a:hover {
    background-color: var(--header-bg);
}

.customQ-dropdown li h4,
.customQ-dropdown li.top-level {
    margin: 8px 0 0 3px;
    background-color: initial;
    color: var(--nav-bar-link);
    text-align: left;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
}

#nav.pull-right svg {
    content: "";
    position: relative;
    top: 4px;
    width: 18px !important;
    height: 18px !important;
    fill: var(--header-title);
    display: inline-block;
}

a#dark-mode-link svg {
    fill: #ffdf5d !important;
    top: 6px !important;
}

a#dark-mode-link:hover svg {
    color: #6C7B85 !important;
    fill: #6C7B85 !important;
}

a#profile-link {
    margin-left: 4px !important;
}

/* Dark Mode switch nav icon between day and night? */
svg#night-mode-svg {
    display: none !important;
}

svg#day-mode-svg {
    display: inline-block !important;
}

.dark-mode svg#day-mode-svg {
    display: none !important;
}

.dark-mode svg#night-mode-svg {
    display: inline-block !important;
}

.dark-mode svg#night-mode-svg {
    width: 17px !important;
    height: 17px !important;
    top: 2px;
}

@media screen and (max-width: 900px) {
    #header #nav a[href*="/profile.php"] {
        font-size: 0;
        /* background-color: #000; */
        width: 14px;
        display: inline-block;
    }

    #header #nav a[href*="/profile.php"] svg {
        display: inline-block;
        fill: var(--header-title);
        width: 18px !important;
        height: 18px !important;
        content: "";
        position: relative;
        top: 4px;
        margin: 0 2px 0 -4px;
    }

    #header a {
        font-size: 12px;
    }
}

@media screen and (max-width: 1100px) {
    html[lang="el"] #header a {
        font-size: 12px;
    }
}

li.annotations {
    display: none !important;
}

.subject-bold {
    display: inline-block;
    margin: 0 0 0 -8px;
    padding-right: 4px;
    font-size: 14px;
    color: #848484;
}

.osta_subject .pull-left {
    width: 0;
}

.osta.show.overdueTicket-container {
    margin: 0 0 0 -25px;
}

.rtl .osta.show.overdueTicket-container {
    margin: 0 -25px 0 0;
}

.osta_subject small.faded-more {
    font-size: 12px;
    color: #8a8a8a;
    position: relative;
    top: 1px;
}

.faded-more i.icon-comments-alt {
    float: right;
    right: 0;
    margin: 0 0 0 3px;
}

.subject-bold {
    display: inline-block;
    margin: 0 0 0 -8px;
    padding-right: 4px;
    font-size: 14px;
    color: #8e8e8e;
    /* font-family: 'Open Sans', sans-serif; */
    font-family: "Lato", "Helvetica Neue", arial, helvetica, sans-serif;
}

.list .paperclip {
    float: right;
}

i.small.icon-paperclip.icon-flip-horizontal {
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    top: 0;
    float: right;
    margin: 0 8px 0 0;
}

.selected-signature .inner {
    opacity: 1 !important;
}

/* */
/* add to Theme Options */
/* */
/* ON/OFF Switch */
input.switch:empty {
    visibility: hidden;
}

input.switch:empty~label {
    position: relative;
    float: left;
    line-height: 3em;
    text-indent: 4em;
    margin: 0.2em 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 2em;
}

input.switch:empty~label:before,
input.switch:empty~label:after {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    content: '\2718';
    text-indent: 2.4em;
    color: #aaa;
    background-color: #aaa;
    width: 4em;
    height: 2em;
    border-radius: 4em;
}

input.switch:empty~label:before {
    box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.2), inset -1px 1px 5px rgba(0, 0, 0, 0.2);
}

input.switch:empty~label:after {
    content: ' ';
    background: #f2f2f2;
    width: 1.8em;
    height: 1.8em;
    border-radius: 1.8em;
    top: 0.1em;
    left: 0.2em;
    box-shadow: inset 0 -0.1em 0 rgba(0, 0, 0, 0.1);
    -webkit-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
}

/* toggle on */
input.switch:checked~label:before {
    content: '';
    background-color: #69bd48;
}

input.switch:checked~label:after {
    margin-left: 1.91em;
}

/* focus styles */
input.switch:focus~label {
    color: #000;
}

input.switch:focus~label:before {
    box-shadow: 0 0 0 1px #999;
}

.disabled {
    opacity: .5;
}

.form_table.settings_table {
    display: inline;
}

.settings-page .form_table.settings_table {
    display: block;
}

.form_table.settings_table td[colspan="2"] {
    padding: 0;
}

select[name="acl_backend"] {
    min-width: 140px !important;
}

input[name="autolock_minutes"] {
    min-width: 44px !important;
}

.settings-page .form_table.settings_table .action-button.pull-right {
    padding: 4px 10px !important;
}

/*

BACKDROPS

*/
#system-backdrops-options {
    width: calc(100% - 40px) !important;
    margin: 0 auto;
}

#system-backdrops-options td.toggles {
    width: 60px;
    padding-right: 18px !important;
}

td#spacer {
    width: auto;
}

td.options-backdrop,
td.option-solid {
    font-size: 18px;
    height: 52px;
    width: 296px !important;
}

#system-backdrops {
    width: calc(100% - 34px) !important;
    margin: 16px auto;
}

td.backdrop {
    padding: 0 !important;
}

.backdrop .outer {
    display: inline-block;
    position: relative;
    background: #eee;
    border: .5px solid #ddd;
    margin: 0 18px 22px 0;
}

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

    #system-backdrops label:nth-child(3n+3)>div,
    #custom-backdrops .backdrop-delete-icon-container:nth-child(3n+3) {
        margin-right: 0;
    }
}

.backdrop .select {
    padding-left: 20px;
}

.backdrop .inner {
    display: inline-block;
    position: relative;
    width: 337px;
    height: 190px;
    margin: 10px;
    background-size: contain !important;
}

#one .inner {
    background-color: var(--header-bg);
    background-image: url(../../osta/img/backdrops/01.png);
}

#two .inner {
    background-color: var(--header-bg);
    background-image: url(../../osta/img/backdrops/02.png);
}

#three .inner {
    background-color: var(--header-bg);
    background-image: url(../../osta/img/backdrops/03.png);
}

#four .inner {
    background-color: var(--header-bg);
    background-image: url(../../osta/img/backdrops/04.png);
}

#five .inner {
    background-color: var(--header-bg);
    background-image: url(../../osta/img/backdrops/05.jpg);
}

#six .inner {
    background-color: var(--header-bg);
    background-image: url(../../osta/img/backdrops/06.jpg);
}

#seven .inner {
    background-color: var(--header-bg);
    background-image: url(../../osta/img/backdrops/07.jpg);
}

#eight .inner {
    background-color: var(--header-bg);
    background-image: url(../../osta/img/backdrops/08.jpg);
}

#nine .inner {
    background-color: var(--header-bg);
    background-image: url(../../osta/img/backdrops/09.jpg);
}

#ten .inner {
    background-color: var(--header-bg);
    background-image: url(../../osta/img/backdrops/10.jpg);
}

#eleven .inner {
    background-color: var(--header-bg);
    background-image: url(../../osta/img/backdrops/11.jpg);
}

#twelve .inner {
    background-color: var(--header-bg);
    background-image: url(../../osta/img/backdrops/12.jpg);
}

#custom-backdrops td {
    padding: 0;
}

.backdrop .top {
    width: 80px;
    height: 77px;
    background-color: var(--nav-bar-bg);
    background-image: url(../../osta/img/backdrops/login-box.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 80px 77px;
    margin: 0 auto;
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.backdrop [type=radio] {
    position: absolute;
    visibility: hidden;
}

.backdrop [type=radio]+div {
    cursor: pointer;
}

.backdrop [type=radio]:checked+div {
    outline: 1px solid #5a5a5a;
}

.checkbox-container {
    background: #000;
    z-index: 99;
    width: 50px;
}

.custom-backdrop-outer {
    display: inline-block;
    position: relative;
    background: #eee;
    border: .5px solid #ddd;
}

.custom-backdrop-inner {
    display: inline-block;
    position: relative;
    width: 337px;
    height: 190px;
    margin: 10px;
    background-size: cover;
}

.custom-backdrop-inner .top {
    width: 80px;
    height: 77px;
    background: url(../../osta/img/backdrops/login-box.png) no-repeat center center, var(--nav-bar-bg);
    background-size: 80px 77px;
    margin: 0 auto;
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

#custom-backdrops [type=radio] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

#custom-backdrops [type=radio]+div {
    cursor: pointer;
}

#custom-backdrops input[type="radio"]:checked+div {
    outline: 1px solid #5a5a5a;
}

#custom-backdrops .checkbox-container {
    width: 36px;
    background: initial;
    position: relative;
    top: -67px;
    left: 310px;
    height: 49px;
}

#custom-backdrops .checkbox-container input[type="checkbox"] {
    position: absolute;
    visibility: hidden;
}

.backdrop-delete-icon-container {
    width: 358px;
    height: 215px;
    display: inline-block;
    margin: 0 23px 20px 0;
    float: left;
}

#custom-backdrops th,
#custom-backdrop-upload {
    text-align: left;
}

#custom-backdrop-container,
#upload-backdrop-container {
    padding: 20px 19px !important;
}

.custom-logo-group i.icon-trash,
#custom-backdrops i.icon-trash {
    font-size: 42px;
    width: 0;
    height: 0;
}

.custom-logo-group i.icon-trash {
    font-size: 25px;
}

.custom-logo-group i.icon-trash:before,
#custom-backdrops i.icon-trash:before {
    fill: #fff !important;
    color: #fff !important;
    width: 35px;
    height: 40px;
}

.custom-logo-group i.icon-trash:hover::before,
#custom-backdrops i.icon-trash:hover::before {
    fill: red !important;
    color: red !important;
    text-shadow: initial;
}

.custom-logo-group i.icon-trash:hover::before,
#custom-backdrops i.icon-trash:hover::before {}

.custom-logo-group input[type="checkbox"]:checked+i.icon-trash:before,
#custom-backdrops input[type="checkbox"]:checked+i.icon-trash:before {
    fill: red !important;
    color: red !important;
}

table[style="display: none;"] {
    display: initial !important;
    opacity: .5 !important;
    pointer-events: none;
}

table[style="display: table;"] {
    opacity: 1 !important;
}

.print-logo-upload .error {
    background: #000 !important;
}

/* Custom Text */
.indent {
    padding-left: 20px !important;
}

#row-one,
#row-two {
    width: 100%;
    overflow: hidden;
}

#row-two {
    margin: 0 0 20px 0;
}

.custom-text-container {
    float: left;
    margin: 0 80px 0 0;
}

.custom-text-input input {
    width: 210px !important;
}

.custom-color-container {
    overflow: hidden;
    width: 291px;
    float: left;
    margin: 0;
}

.custom-color-container:first-of-type {
    /* padding-left: 20px !important; */
}

.custom-color-container:last-of-type {
    padding-right: 0 !important;
    width: 240px;
}

#choose-theme-options,
#custom-theme-options {
    float: right;
}

#choose-theme-options {
    margin-top: -18px;
}

#custom {
    margin-top: 10px;
}

#custom-theme-options {
    width: calc(100% - 17px) !important;
    margin: -18px auto 0 auto;
    overflow: hidden;
}

.disabled {
    opacity: .5;
    pointer-events: none;
}

#plugin-instances .disabled {
    pointer-events: unset;
    opacity: 1;
}

#list-tabs_container .disabled {
    pointer-events: initial;
}

#osta-settings-title {
    float: left;
}

#osta-toggle {
    float: right;
}

#choose-theme-options,
#custom-theme-options {
    width: 100%;
    display: block;
}

.theme .tab_content,
.theme2 .tab_content {
    overflow: hidden;
    padding: 16px;
}

#thank-you {
    font-size: 20px;
    margin: 30px 0 4px 0;
}

.custom-text-and-links-col1 {
    vertical-align: top;
}

.custom-text-and-links-col2 {
    vertical-align: top;
    padding-top: 34px;
}

#ie,
#scroll,
#consent {
    float: right;
    position: relative;
    top: 4px;
}

#scroll-icon {
    width: 28px;
    height: 28px;
    float: left;
    margin: 0 9px 0 1px;
    opacity: .9;
    border-radius: 14%;
}

#scroll-top-img {
    margin-top: 10px;
}

.option-ie-redirect-url input[type="text"] {
    width: 245px;
}

div[rel="radio89"] {
    margin-top: 13px;
}

img#ie-icon {
    width: 32px;
    height: 32px;
    float: left;
    margin: 0 7px 0 0;
}

img#cookies {
    width: 30px;
    height: 30px;
    float: left;
    margin: 0 7px 0 0;
    opacity: .9;
}

.scroll-img {
    padding: 0 0 18px 0;
}

.scroll-title,
.custom-text-title,
.ie-redirect-title,
.consent-message-title {
    font-size: 16px;
    font-weight: 600;
    margin: 20px 0 6px 0;
}

label[for="radio89"],
label[for="radio77"] {
    position: relative;
    top: -3px;
}



.ie-redirect-table,
.consent-message-table {
    margin: 20px 0 50px 0;
}

.scroll-table {
    margin-top: 20px;
    margin-bottom: 50px;
}

.option-desktop-scroll,
.option-mobile-scroll {
    font-size: 18px;
}

#scroll-img-background {
    max-width: 400px !important;
    background-image: url(../img/custom-text/scroll-to-top.png) !important;
    height: 185px;
    background-repeat: no-repeat !important;
    background-position-y: 20px !important;
}

#scroll-spacer {
    height: 4px !important;
    font-size: 1px;
}

.option-desktop-scroll,
.option-mobile-scroll {
    font-size: 15px;
}

label[for="radio98"],
label[for="radio99"] {
    transform: scale(.7);
}

.option-ie-redirect-url input[type="text"] {
    width: 97% !important;
    padding: 0 0 0 8px !important;
    border: .5px solid #bfbfbf;
}

#consent-message-label-container,
#consent-message-text-container {
    margin-top: 10px;
}

textarea[name="consent-message"],
textarea[name="consent-message-link"] {
    width: 97%;
    height: 47px;
    border: .5px solid #bfbfbf;
}

.consent-message-button-text-input input {
    width: 33%;
    border: .5px solid #bfbfbf;
}

#custom-text-and-links input {
    margin: 10px 0 10px 0 !important;
}

#copy-clipboard {
    padding: 10px;
    background: #f3f3f5;
    border: .5px solid #ddd;
    width: fit-content;
}

#copy-clipboard .code-green {
    color: #828282;
}

#get-support-container {
    padding-top: 14px;
}

#copy-clipboard-btn,
a#osta-settings-support {
    margin: 10px 0;
    box-shadow: none;
    padding-top: 14px;
    padding-bottom: 14px;
    color: #6d7989;
    border: initial !important;
    background: #dcdfe2;
    letter-spacing: 1.6px;
    font-weight: 700;
    font-size: 13px;
    width: 100%;
    text-align: center;
    border-radius: 3px;
}

#copy-clipboard-btn:hover,
a#osta-settings-support:hover {
    background: #c9cdd0;
    color: #343a42;
}

.form_table.settings_table img {
    box-shadow: initial !important;
    border: .5px solid #ddd;
}

#theme-header-options .container,
#logo-options .container {
    float: left;
    margin: 10px 10px 16px 0;
    padding: 10px;
    border: 1px solid #ddd;
    width: 372px;
}

#theme-header-options .container {
    margin: 10px 10px 10px 0;
}

#theme-header-options .container {
    margin-right: 31px;
}

#theme-header-options .left,
#logo-options .left {
    width: 290px;
}

#theme-header-options .right,
#logo-options .right {
    width: 68px;
    vertical-align: middle;
}

#theme-header-options .title,
#logo-options .title {
    font-size: 18px;
    margin: -2px -2px 5px 2px;
    width: 278px;
}

#logo-options .title {
    margin: -3px -2px 7px 2px;
}

#theme-header-options .image img,
#logo-options .image img {
    max-width: 300px;
    height: 34px;
    margin: 12px 11px;
}

#choose-theme-options,
#custom-theme {
    opacity: .5;
    pointer-events: none;
}

#choose-theme-options {
    margin: 2px 0 10px;
}

#custom-theme {
    margin: 50px 0 24px;
}


#theme-header-options .image,
#theme-header-options .image,
#logo-options .image {
    background: var(--header-bg);
    border: .5px solid #ddd;
    width: 280px;
    height: 60px;
    opacity: .5;
}

#print-logo .print-logo {
    opacity: .5;
}

.highlight #choose-theme-options,
.highlight #custom-theme,
.highlight #logo-options,
#print-logo.highlight .print-logo {
    opacity: 1;
    pointer-events: auto;
}

.print-logo-upload input[type="file"] {
    margin-top: 10px;
    width: 273px !important;
}

#show-image #logo-upload .title {
    margin-top: 0;
}

.print-logo {
    max-width: 279px;
    height: 368px;
    background-image: url(../../osta/img/custom-text/print-logo-preview.png);
    background-repeat: no-repeat;
    border: .5px solid #e2e2e2 !important
}

.print-logo img {
    height: 18px !important;
    width: auto !important;
    margin: 10px 0 0 10px;
}

.print-logo {
    margin: 0 0 6px 0;
}

#print-logo-placeholder #print-logo {
    margin-top: 50px;
}

.print-logo-upload {
    display: none;
    padding: 0 !important;
}

.highlight .print-logo-upload {
    display: inline-block;
}

#background-solid-image.highlight,
#background-solid-color.highlight,
#default-logo.highlight,
#custom-text.highlight,
#custom-logo.highlight {
    border: 1px solid #aaa !important;
}

#background-solid-image.highlight .image,
#background-solid-color.highlight.highlight .image,
#default-logo.highlight .image,
#custom-text.highlight .image,
#custom-logo.highlight .image,
#logo-options.highlight .print-logo img {
    opacity: 1 !important;
}

#background-solid-image .image {
    background-size: 569%;
    background-position: -182px 0;
}

input.switch:empty {
    opacity: 0;
    position: absolute;
    top: 22px;
}

input.switch:empty~label {
    position: relative;
    float: left;
    line-height: 3em;
    text-indent: 4em;
    margin: 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input.switch:empty~label:before,
input.switch:empty~label:after {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    content: '\2718';
    text-indent: 2.4em;
    color: #aaa;
    background-color: #aaa;
    width: 4em;
    height: 2em;
    border-radius: 4em;
}

input.switch:empty~label:before {
    box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.2), inset -1px 1px 5px rgba(0, 0, 0, 0.2);
}

input.switch:empty~label:after {
    content: '';
    background: #f2f2f2;
    width: 1.8em;
    height: 1.8em;
    border-radius: 1.8em;
    top: 0.1em;
    left: 0.2em;
    box-shadow: inset 0 -0.1em 0 rgba(0, 0, 0, 0.1);
    -webkit-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
}

/* toggle on */
input.switch:checked~label:before {
    content: '';
    text-indent: 0.5em;
    color: #7cbd7e;
    background-color: #7cbd7e;
}

input.switch:checked~label:after {
    margin-left: 1.91em;
}

/* focus styles */
input.switch:focus~label {
    color: #000;
}

input.switch:focus~label:before {
    box-shadow: 0 0 0 1px #999;
}

#theme-header-options .image svg,
#default-logo .image svg {
    height: 34px;
    fill: var(--header-title);
    padding: 13px;
}

#logo-type {
    width: 445px;
}

#logo-type table {
    margin-left: 20px !important;
}

#logo-type #custom-logo img {
    border: initial;
}

.custom-logo-group {
    vertical-align: top;
}

.custom-logo-link a {
    font-size: 14px !important;
    white-space: nowrap;
    text-decoration: underline;
    line-height: 26px;
}

#custom-logo-container {
    margin-bottom: 17px;
}

#custom-logo-container td {
    vertical-align: top;
    /* padding-top: 8px !important; */
}

.custom-logo-group img {
    box-shadow: initial !important;
    border: 1px solid #ddd;
}

#show-image img {
    border: 1px solid #aaa !important;
    background: var(--header-bg);
    margin: 6px;
    height: 72px;
}

#logo-upload h2 {
    margin-top: 15px;
}

#custom-text #header-text {
    width: 264px;
    margin: 11px 0 11px 11px;
}

#custom-text #header-text {
    display: inline-block;
}

#theme-info {
    background: url(../img/osticket-awesome-mobile.jpg) no-repeat #ffffff;
    background-size: 359px;
    background-position: bottom right;
}

td.info-column {
    max-width: 466px;
}

#brace {
    line-height: 0;
    position: relative;
    width: 15px;
    top: 5px;
    padding: 0 25px 0 15px;
}

#brace img {
    width: 18px !important;
}

#theme-header-options {
    margin: 5px 0 10px 12px;
    display: inline-block;
}

td[style="display: none;"] {
    display: initial !important;
    opacity: .5 !important;
    pointer-events: none;
}

td[style="display: table;"] {
    opacity: 1 !important;
}

/* LOGO OPTIONS > HEADER BACKGROUND OPTIONS */
.options-header-image .container,
.options-header-color .container {
    float: left;
    margin: 10px 10px 10px 0;
    padding: 10px;
    border: 1px solid #ddd;
    width: 372px;
}

#background-solid-image .image #background-solid-color .image {
    background: var(--header-bg);
    border: .5px solid #ddd;
    width: 280px;
    height: 60px;
}

.options-header-image .title,
.options-header-color .title {
    font-size: 18px;
    margin: 0 0 20px 0;
    width: 290px;
}

input[name="selected-logo"] {
    display: none;
}

input[name="selected-logo-scp"] {
    position: absolute;
    visibility: hidden;
}

.logo-image-container {
    width: fit-content;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    display: inline-block;
    position: relative;
    background: #eee;
    border: .5px solid #ddd;
    outline: 2px solid #fff;
}

input[type="radio"]:checked+div {
    outline: 1px solid #5a5a5a;
}

.checkbox-container input[type="checkbox"] {
    position: absolute;
    visibility: hidden;
}

.logo-delete-icon-container .checkbox-container {
    width: 1px;
    height: 1px;
    position: relative;
    top: 21px;
    background: initial;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.85);
}

table#custom-logo-column-inner {
    max-width: 374px;
}

td#custom-logo-column {
    float: none;
    margin: 0 0 0 20px;
    padding: 13px 0 12px 0 !important;
    border: 1px solid #ddd;
    width: 372px;
}

.logo-delete-icon-container label.inline.checkbox {
    display: inline-block;
    width: 1px;
    position: relative;
    left: -32px;
}

#custom-logo-column .indent {
    padding-left: 12px !important;
}

#thank-you img {
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
    top: 1px;
    margin: 0 0 0 6px;
}

/* ==========================================================================
 TABLE CHECKBOX 2019
========================================================================== */
table.list .checkbox * {
    cursor: pointer;
}

table.list p.checkbox {
    /*     width: 14px;
    height: 14px; */
    margin: 0;
}

table.list.queue.tickets td:first-child {
    /* padding-left: 14px; */
}

.index-page table.list p.checkbox {
    margin: 2px 0 0 0;
}

table.list .checkbox label {
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

table.list .checkbox label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 14px;
    height: 14px;
    top: -9px;
    left: -16px;
    margin-left: 0;
    border: .5px solid #aaa;
    border-radius: 3px;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}

.locked .checkbox label::before {
    background: url(../../osta/icons/lock.png) 2px 1px no-repeat !important;
}

table.list .checkbox label::after {
    display: inline-block;
    position: absolute;
    width: 16px;
    height: 16px;
    left: -17px;
    top: -10px;
    margin-left: 0;
    padding-left: 0;
    padding-top: 0;
    font-size: 11px;
    color: #555555;
}

table.list .checkbox input[type="checkbox"] {
    opacity: 0;
    z-index: 1;
    margin-left: 0 !important;
}

table.list .checkbox input[type="checkbox"]:checked+label::after {
    font-family: "FontAwesome";
    content: "";
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgZmlsbD0iIzRjNTE1NiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIxLDdMOSwxOUwzLjUsMTMuNUw0LjkxLDEyLjA5TDksMTYuMTdMMTkuNTksNS41OUwyMSw3WiIgLz48L3N2Zz4=) center center no-repeat;
    background-size: 16px;
    background-color: #fff;
    border: 1px solid #737373;
    border-radius: 3px;
}

table.list .checkbox {
    /* margin-top: 0; */
}

.helptopics table.list tbody tr td:nth-child(2),
.filters table.list tbody tr td:nth-child(2),
.apikeys table.list tbody tr td:nth-child(2),
.pages table.list tbody tr td:nth-child(2) {
    font-size: 13px !important;
    padding: 10px 0 !important;
}

.forms table.list tbody tr td:nth-child(2),
.lists table.list tbody tr td:nth-child(2),
.slas table.list tbody tr td:nth-child(2),
.schedules table.list tbody tr td:nth-child(2),
.pages table.list tbody tr td:nth-child(2) a {
    font-size: 14px !important;
    padding: 10px 0 !important;
}

.apikeys th:first-child,
.banlist th:first-child,
.canned th:first-child,
.categories-page th:first-child,
.departments th:first-child,
.directory th:first-child,
.forms-page th:first-child,
.lists-page th:first-child,
.emails th:first-child,
.filters th:first-child,
.helptopics th:first-child,
.orgs th:first-child,
.pages th:first-child,
.plugin-add th:first-child,
.plugins-page th:first-child,
.queues-ticket th:first-child,
.roles th:first-child,
.schedules th:first-child,
.settings-page th:first-child,
.slas-page th:first-child,
.staff-page table.list th:first-child,
.logs-page th:first-child,
.system th:first-child,
.tasks th:first-child,
.teams th:first-child,
.templates th:first-child,
.tickets-page th:first-child,
.users-page th:first-child {
    background-position: center left 12px !important;
}

.apikeys td:first-child,
.banlist td:first-child,
.canned td:first-child,
.categories-page td:first-child,
.departments td:first-child,
.directory td:first-child,
.forms-page td:first-child,
.lists-page td:first-child,
.emails td:first-child,
.filters td:first-child,
.helptopics td:first-child,
.orgs td:first-child,
.pages td:first-child,
.plugin-add td:first-child,
.plugins-page table.list tbody td[align="center"],
.queues-ticket td:first-child,
.roles td:first-child,
.schedules td:first-child,
.settings-page table.list td:first-child,
.settings-page table.list td:nth-child(2),
.slas-page td:first-child,
.staff-page td:first-child,
.logs-page td:first-child,
/* .tasks td:first-child, */
.teams td:first-child,
.templates td:first-child,
.tickets-page table.list td:first-child,
.users-page td:first-child {
    /* wth is this for */
    padding: 18px 0 18px 14px;
    text-align: left;
}

.rtl .apikeys td:first-child,
.rtl .banlist td:first-child,
.rtl .canned td:first-child,
.rtl .categories-page td:first-child,
.rtl .departments td:first-child,
.rtl .directory td:first-child,
.rtl .forms-page td:first-child,
.rtl .lists-page td:first-child,
.rtl .emails td:first-child,
.rtl .filters td:first-child,
.rtl .helptopics td:first-child,
.rtl .orgs td:first-child,
.rtl .pages td:first-child,
.rtl .plugin-add td:first-child,
.rtl .plugins-page table.list tbody td[align="center"],
.rtl .queues-ticket td:first-child,
.rtl .roles td:first-child,
.rtl .schedules td:first-child,
.rtl .settings-page table.list td:first-child,
.rtl .settings-page table.list td:nth-child(2),
.rtl .slas-page td:first-child,
.rtl .staff-page td:first-child,
.rtl .logs-page td:first-child,
/* .rtl .tasks td:first-child, */
.rtl .teams td:first-child,
.rtl .templates td:first-child,
.rtl .tickets-page table.list td:first-child,
.rtl .users-page td:first-child {
    /* wth is this for */
    text-align: right;
}

.orgs table.ticket_info td {
    padding-top: 0;
}

.system td:first-child {
    padding: 7px 0;
}

.settings-page table.list td:nth-child(3) {
    padding: 0 20px 0 0;
}

.settings-page table.list th:nth-child(2) {
    padding-left: 10px !important;
    padding-right: 20px;
}

.settings-page table.list td:nth-child(2) {
    font-size: 14px;
    padding-right: 20px;
}

.settings-page table.list td:nth-child(3) a {
    font-size: 14px;
    margin-left: -10px;
}

.osta_ticket .icon-code-fork,
.osta_ticket .icon-code-link {
    display: none;
}

.osta-ticket-merged .icon-code-fork,
.osta-ticket-linked .icon-code-link {
    display: inline-block;
}

/* new reply icon */
#new-reply-icon {
    float: left;
    width: 14px;
    height: 14px;
    margin: 0 9px 0 0;
}

.dot {
    display: none;
    width: 20px;
    height: 20px;
    background-position: -3px 0;
    background-size: 20px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%2388c80b' d='M10%2C9V5L3%2C12L10%2C19V14.9C15%2C14.9 18.5%2C16.5 21%2C20C20%2C15 17%2C10 10%2C9Z' /%3E %3C/svg%3E");
}

.new-reply-waiting .dot,
.ticket-status .dot {
    display: inline-block;
    animation: slowbounceIn 3s ease-in-out 3s infinite;
}

/* merged tickets icon */
.osta_ticket .icon-code-fork:before {
    content: "\f126";
    font-size: 16px;
    top: 1px !important;
    color: #8a8a8a;
}

.osta_ticket .icon-code-fork {
    font-size: 16px;
    position: relative;
    top: 4px;
    margin: 0 0 0 9px;
}

/* linked tickets icon */
.icon-link:before {
    content: "\f0c1";
    font-size: 18px;
}

a#tickets-merge .icon-code-fork:before {
    font-size: 20px;
    top: 0;
}

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

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

.icon-code-link {
    content: "\f0c1";
}

/* action button */
a#tickets-link .icon-link:before {
    font-size: 18px;
    top: 1px;
}

/* ticket queue icon */
.osta_ticket .icon-code-link {
    margin: 0 0 0 5px;
}

.osta_ticket .icon-code-link:before {
    content: "\f0c1";
    font-size: 14px;
    position: relative;
    top: 3px;
    color: #969696;
}

@keyframes slowbounceIn {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    60% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

td.osta_ticket {
    vertical-align: middle;
    padding: 16px 10px 16px 6px;
    white-space: nowrap;
    ;
}

table.list tbody td:first-child {
    /* padding-right: 0; */
}

div[style="font-weight:bold"] #new-reply-icon .dot {
    display: inherit;
}

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

/* ==========================================================================
 WARNING BAR
========================================================================== */
#warning_bar {
    margin: 0;
    width: 100%;
    padding: 0;
    height: 36px;
    border: initial;
    background-image: initial;
    background-color: #000;
    position: fixed !important;
    top: 0;
    z-index: 99;
    color: #fff;
    display: none;
    -webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 1);
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 1);
}

#warning-inner {
    display: table;
    margin: 6px auto;
    background: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23ffffff' d='M19%2C19H5V5H19M19%2C3H5A2%2C2 0 0%2C0 3%2C5V19A2%2C2 0 0%2C0 5%2C21H19A2%2C2 0 0%2C0 21%2C19V5C21%2C3.89 20.1%2C3 19%2C3M11%2C15H13V17H11V15M11%2C7H13V13H11V7' /%3E %3C/svg%3E");
    background-repeat: no-repeat;
    height: 20px;
    padding: 4px 0 0 28px;
}

@media only screen and (min-width:761px) {
    #warning_bar {
        display: inline-block;
    }

    #warning_bar+#header {
        margin-top: 37px !important;
    }

    #warning_bar+#header+#right-menu+#sidr-right+#pjax-container #sub_nav-wrap {
        margin: 98px 0 0 0;
    }
}

/* ==========================================================================
 RTL TRANSLATIONS
========================================================================== */
.rtl,
.rtl div[dir="ltr"],
.rtl::placeholder,
.rtl::-moz-placeholder,
.rtl::-ms-input-placeholder,
.rtl::-webkit-input-placeholder,
.rtl .redactor-placeholder:after,
.rtl .redactor-linebreaks.redactor-placeholder,
.rtl .redactor-linebreaks.redactor-placeholder:after {
    direction: rtl;
    text-align: right;
}

.rtl .redactor-placeholder:after {
    width: 100%;
    text-align: right;
    left: initial;
    right: 10px;
}

.rtl .pull-left.avatar {
    float: left;
}

.rtl .pull-right.avatar {
    float: right;
}

/* ==========================================================================
 SCROLL TO TOP
========================================================================== */
#scroll-to-top {
    visibility: hidden;
    position: fixed;
    bottom: 11px;
    right: 20px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: var(--header-bg);
    color: var(--header-title);
    cursor: pointer;
    padding: 13px;
    border-radius: 4px;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s ease-in-out;
    -moz-transition: visibility 0s, opacity 0.5s ease-in-out;
    -webkit-transition: visibility 0s, opacity 0.5s ease-in-out;
}

#scroll-to-top:hover {
    opacity: 1 !important;
}

#scroll-to-top svg {
    fill: var(--header-title);
}

.demo button#scroll-to-top {
    right: 90px;
}

/* ==========================================================================
 COOKIE CONSENT BAR
========================================================================== */
#complianceouter {
    display: flex;
    background: transparent;
    color: var(--header-title);
    font-size: 16px;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    position: fixed;
    bottom: 1em;
    z-index: 3;
}

#compliance {
    background: var(--header-bg);
    margin: 0 auto;
    max-width: 75%;
    color: var(--header-title);
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-direction: row;
    flex-direction: row;
    overflow: hidden;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    flex: 1;
    padding: 1rem;
    border: 1px solid #fefefe;
    border-top: 1px solid #ffffff;
    border-radius: 4px;
    box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.07), 0px 4px 4px hsla(0, 0%, 0%, 0.15);
    gap: 1rem;
}

#icon-compliance-outer {
    display: flex;
    color: var(--header-title);
}

#icon-compliance {
    width: 32px;
    height: 32px;
}

#compliance-message {
    display: block;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    max-width: 100%;
    line-height: 1.6;
    font-size: 14px;
}

#compliance-button-link {
    color: #ffffff;
}

#compliance-button-link:hover,
#compliance-button-link:focus {
    color: #205a8d;
}

#compliance-button-link:hover #compliance-button,
#compliance-button-link:focus #compliance-button {
    background: #ffffff;
}

@media only screen and (max-width:1000px) {
    #compliance-message {
        font-size: 14px;
    }
}

@media only screen and (max-width:800px) {
    #compliance-message {
        font-size: 14px;
    }

    #icon-compliance-outer {
        width: 100%;
        justify-content: center;
    }

    #complianceouter {
        bottom: 0;
    }

    #compliance {
        flex-direction: column;
        max-width: 100%;
        align-items: flex-end;
        background: hsl(0, 0%, 95%);
    }
}

@media only screen and (max-width:600px) {
    #compliance-message {
        font-size: 14px;
    }
}

@media only screen and (max-width:400px) {
    #compliance-message {
        font-size: 14px;
    }
}

@media screen and (min-width: 2560px) {
    #compliance-message {
        font-size: 18px;
    }

    #icon-compliance {
        width: 38px;
        height: 38px;
    }

    #compliance-button-label {
        font-size: 20px;
    }
}

a#compliance-link {
    color: #205a8d;
}

a#compliance-link:hover {
    text-decoration: underline !important;
}

#compliance-button {
    float: right;
    background: #205a8d;
    border: 2px solid #205a8d;
    border-radius: 6px;
    font-weight: 700;
    width: fit-content;
    margin: 0;
    padding: 0.5em 1.2em;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: justify;
    align-content: space-between;
    -webkit-transition: 0.2s;
    transition: background color 0.2s;
}


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

@keyframes compliance-pop {
    50% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
}

#warning_bar,
#compliance {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    position: relative;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    overflow: hidden;
}

#warning_bar,
.compliance-animate {
    -webkit-animation-name: compliance-pop;
    animation-name: compliance-pop;
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

/* ==========================================================================
 SELECT2
========================================================================== */
.select2-container--default .select2-selection--single {
    height: 32px;
    position: relative;
    color: #424242;
    padding: 0 0 0 10px;
    background-color: #fff;
    background-image: url(../../osta/svg/chevron-down-thin.svg);
    background-position: right 6px center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    outline: 0;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
    padding-right: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.select2-container {
    margin-right: 10px;
}

.rtl .select2-container {
    margin-left: 10px;
    margin-right: 0;
}

.select2.select2-container.select2-container--default {
    margin-right: 0;
}

.tickets .select2.select2-container.select2-container--default,
.tickets .form_table .select2.select2-container.select2-container--default,
.tickets .form_table .select2-container--default .select2-selection--multiple {
    width: 320px !important;
}

.profile-page .select2.select2-container.select2-container--default {
    width: 305px !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    padding-right: 30px;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0 8px;
}

.tickets-page .tickets .form_table .select2-container--default .select2-selection--multiple {
    height: 32px !important;
}

.select2-selection__arrow b {
    margin-top: 0 !important;
}

.select2-search--dropdown .select2-search__field {
    width: calc(100% - 9px) !important;
    /* eg. Open Ticket > select User */
}

.form_table.fixed .select2-container {
    margin-right: 0;
}

.form_table.fixed .rtl .select2-container {
    margin-right: 0;
    margin-left: 0;
}

.form_table.fixed .select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 0;
    margin-right: 0;
    width: calc(100% - 8px) !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #dcdfe2;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #08C;
}

.select2-selection.select2-selection--single {
    border: 1px solid #a1a6ad;
}

.client-required .select2-selection.select2-selection--single {
    border-right: 4px solid red;
}

#timezone-dropdown~.select2.select2-container.select2-container--default {
    width: 305px !important;
}

#select2-timezone-dropdown-container {
    padding: 2px 0;
}

#select2-datetime_format-sp-container {
    padding: 0;
}

#user-account #timezone-dropdown+.select2+button {
    margin: 8px 0 0 0;
}

select#timezone-dropdown~button.action-button {
    margin: 0 0 0 20px;
}

.select2-container--default .select2-dropdown {
    max-height: 240px;
    overflow: auto;
}

/* Make the actual results list scrollable */
.select2-container--default .select2-results>.select2-results__options {
    max-height: 200px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Firefox equivalents */
.select2-results__options {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.05);
}

.select2-results__options::-webkit-scrollbar {
    width: 8px;
    /* width: 16px; */
    background-clip: padding-box;
}

.select2-results__options::-webkit-scrollbar-track {
    background-color: #F4F4F4;
    height: 8px;
    background-clip: padding-box;
    border-right: 10px solid rgba(0, 0, 0, 0);
    border-top: 10px solid rgba(0, 0, 0, 0);
    border-bottom: 10px solid rgba(0, 0, 0, 0);
}

.select2-results__options::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    /* background-color: #C1C1C1; */
    background-color: rgba(44, 124, 195, 0.4);
    border-radius: 4px;
    border-right: 10px solid rgba(0, 0, 0, 0);
    border-top: 20px solid rgba(0, 0, 0, 0);
    border-bottom: 20px solid rgba(0, 0, 0, 0);
}

.select2-results__options::-webkit-scrollbar-thumb:hover {
    background-color: rgba(44, 124, 195, 1);
    opacity: 1;
}

.select2-results__options::-webkit-scrollbar-button {
    display: none;
}

#content.staff .select2-selection.select2-selection--single {
    min-width: 245px;
}

.settings-page #site-pages .select2-container {
    width: 220px !important;
}

select[name="default_dept_id"]~.select2 {
    width: 308px !important;
}

.select2.select2-container.select2-container--default~.select2.select2-container.select2-container--default {
    margin-top: 8px;
}

.select2-container--default .select2-selection--single {
    outline: none !important;
}

.emailsettings .form_table.settings_table .select2.select2-container {
    width: 400px !important;
}

.emailsettings .form_table.settings_table input[type=text] {
    width: 389px !important;
}

form[action="emailtest.php"] .select2.select2-container {
    width: 450px !important;
}

h2 .select2 {
    font-size: 14px !important;
}

/* ==========================================================================
 TABLE PADDING SLIDER
========================================================================== */
.padding-slider-container {
    width: 200px;
    float: right;
    margin-right: 12px;
}

.padding-slider {
    -webkit-appearance: none;
    width: 200px;
    height: 5px;
    padding: 0;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.padding-slider:hover {
    opacity: 1;
}

.padding-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #128dbe;
    cursor: pointer;
    border-radius: 100%;
}

.padding-slider.left::-webkit-slider-thumb {
    background-size: 14px !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23ffffff' d='M8.59%2C16.58L13.17%2C12L8.59%2C7.41L10%2C6L16%2C12L10%2C18L8.59%2C16.58Z' /%3E %3C/svg%3E");
}

.padding-slider.right::-webkit-slider-thumb {
    background-size: 14px !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23ffffff' d='M15.41%2C16.58L10.83%2C12L15.41%2C7.41L14%2C6L8%2C12L14%2C18L15.41%2C16.58Z' /%3E %3C/svg%3E");
}

.padding-slider::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #128dbe;
    cursor: pointer;
    border-radius: 100%;
}

.padding-slider.left::-moz-range-thumb {
    background-size: 14px !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23ffffff' d='M8.59%2C16.58L13.17%2C12L8.59%2C7.41L10%2C6L16%2C12L10%2C18L8.59%2C16.58Z' /%3E %3C/svg%3E");
}

.padding-slider.right::-moz-range-thumb {
    background-size: 14px !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23ffffff' d='M15.41%2C16.58L10.83%2C12L15.41%2C7.41L14%2C6L8%2C12L14%2C18L15.41%2C16.58Z' /%3E %3C/svg%3E");
}

#padding-slider {
    color: #ccc;
    display: none;
}

.checkbox-cell {
    padding-left: 14px !important;
}

.empty .padding-slider-container {
    display: none;
}

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

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

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

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


/* ==========================================================================
 JFONTSIZE
========================================================================== */
.resizable-text {
    background: #FFE9D2;
    font-family: 'Open Sans', sans-serif;
    padding: 20px 20px 0 20px;
    height: 30px;
    font-size: 16px;
}

.resizable-text.two {
    font-size: 14px;
    padding: 0 20px 20px 20px;
}

#resize-buttons-container {
    float: right;
    font-family: 'Open Sans', sans-serif;
    font-size: 22px;
    font-weight: 500;
    margin: 0 21px 0 0;
    padding: 0;
    height: 21px;
    line-height: 21px;
}

#resize-buttons-container a {
    display: inline-block;
    text-align: center;
    /* border-bottom: 1px solid; */
    /*useful to toggle on and off when positioning*/
}

.resize-buttons {
    background: #fff;
    width: 19px;
    color: #128dbe;
    padding: 0;
    vertical-align: bottom;
    position: relative;
    bottom: 0;
}

.resize-buttons a {
    color: #128dbe;
}

#resize-buttons-container a:hover {
    color: #0c4f69;
}

#text-down {
    font-size: 13px;
    line-height: 20px;
}

#text-reset {
    font-size: 15px;
    padding-right: 4px;
    line-height: 21px;
}

#text-up {
    font-size: 16px;
    line-height: 22px;
}




/* ==========================================================================
 MODAL: KEYBOARD SHORTCUTS HELP
========================================================================== */
.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}

.fade.in {
    opacity: 1;
}

.hide {
    display: none !important
}

.show {
    display: block !important
}

.invisible {
    visibility: hidden
}

.modal .close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}

button.close {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background-color: #000;
    opacity: .5 !important;
}

.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5;
}

.modal-backdrop.fade {
    filter: alpha(opacity=0);
    opacity: 0;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}

@media screen and (min-width: 768px) {
    .modal-dialog {
        width: 600px;
        margin: 30px auto;
    }
}

.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.modal-content {
    width: 700px;
    margin: 100px auto 0;
    position: relative;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    outline: 0;
    background: #FFF;
    border: 1px solid #AAA;
    border-radius: 5px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 10px 26px;
    box-shadow: rgba(0, 0, 0, 0.4) 0 10px 26px;
}

@media screen and (min-width: 768px) {
    .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
        box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    }
}

.modal-header {
    padding: 15px 0 0 15px;
}

.modal-header h3 {
    font-weight: 400;
    font-size: 25px;
    text-align: left;
    padding: 2px 0 13px 0;
}

.modal-header .close {
    margin-top: -2px;
}

.modal-body {
    position: relative;
    padding: 15px;
    padding-top: 0 !important;
    border-top: .5px solid #d4d4d4;
}

.modal-body .label-default {
    background-color: #777;
}

td.keyb:first-child {
    width: 40px;
}

td.keyb2 {
    width: 40px;
}

.shift,
.key2 {
    display: inline;
    padding: .2em .7em .3em;
    font-size: 100%;
    line-height: 1;
    color: #4c5156;
    background: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border: 1px solid #4c5156;
    border-radius: .25em;
}

.key2 {
    width: 11px;
    display: inline-block;
    margin-top: 1px;
    padding: 7px 10px 5px 10px;
}

.plus-td {
    width: 20px !important;
    text-align: center !important;
}

.plus-sign {
    color: #4c5156;
    font-size: 20px;
    position: relative;
    top: 0;
    left: 0;
    font-weight: 100;
}

.modal-body td {
    height: 40px;
    color: #4c5156;
    font-size: 13px;
    text-align: left;
}







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

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

.dark-mode.theme-page #dark-mode-message {
    display: inline-block;
    border: 1px solid #393d44;
    background: #000000;
    color: #8b949e;
}

.theme-page #dark-mode-message {
    display: none;
    width: calc(100% - 43px);
    border: 2px solid #a5b6d0;
    border-radius: 3px;
    background: #dcdfe2;
    color: #414957;
    margin: 0 0 30px 0;
    padding: 20px;
}

.dark-mode.theme-page #dark-mode-message a {
    color: #f0f6fc;
}

.theme-page #dark-mode .header {
    margin-top: 14px;
}

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

.theme-page #dark-mode-option h2 {
    display: inline-block;
}

.theme-page #dark-mode-option .text {
    border: 2px solid #a5b6d0;
    border-radius: 3px;
    background: #dcdfe2;
    color: #414957;
    margin: 20px 17px 0;
    padding: 20px;
}

.dark-mode.theme-page #dark-mode-option {
    display: none;
}

.dark-mode.theme-page li.error {
    border-top: 1px solid #30363d !important;
}

.dark-mode input.switch:checked~label:before {
    background-color: #398532;
}

/* Color Theme Options*/

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

/* Custom Text and Links Options */

/* Background Image Options */
.dark-mode .backdrop .outer {
    display: inline-block;
    position: relative;
    background: #000000;
    border: .5px solid #273344;
    margin: 0 18px 22px 0;
}

.dark-mode .backdrop [type=radio]:checked+div {
    outline: 1px solid #727272;
}

.dark-mode input[type="file"] {
    color: #c9d1d9;
    background-color: #21262d;
    border-color: #f0f6fc1a;
}

.dark-mode #theme-header-options .container,
.dark-mode #logo-options .container,
.dark-mode td#custom-logo-column {
    border: 1px solid #393d44 !important;
}

/* Custom CSS */

/* Theme Information */


/* My Account Profile > Dark Mode */

#dark-mode-notes {
    border: 2px solid #a5b6d0;
    border-radius: 3px;
    background: #dcdfe2;
    color: #414957;
    margin: 0 10px;
    padding: 20px;
}

.dark-mode #dark-mode-notes {
    border: 2px solid #303846;
    background: #171b22;
    color: #606b7e;
}

#dark-mode-notes ul {
    line-height: 34px;
    padding: 0 0 0 20px;
}

#dark-mode-notes ul li {
    list-style-type: none;
    margin: 0 0 0 0 !important;
}

#dark-mode-notes ul li:before {
    content: '•';
    margin: 0 4px 0 0;
}

#osta-toggle.dark-mode-toggle {
    float: left;
    margin: 20px;
}

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

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


/* ==========================================================================
 Custom CSS
========================================================================== */

html {
    background: var(--header-bg);
}

/* Home Page */
#content #open-or-check {
    display: flex;
    align-items: stretch;
}

#content #open-or-check #open-new,
#content #open-or-check #check-status {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media only screen and (max-width: 1060px) {
    #content #open-or-check {
        flex-direction: column;
    }
}

.search:placeholder-shown {
    text-overflow: ellipsis
}

/*******/

#loginBody fieldset {
    display: none !important;
}

osticket-link svg {
    filter: brightness(0) invert(1) !important;
}

#footer {
    /*background: rgba(175,209,82, .2) !important;*/
    background: var(--header-bg) !important;
    padding-top: 16px;
}

div#footer+div {
    background: var(--header-bg) !important;
}

#footer #osticket {
    display: flex ;
    width: 100%;
    height: inherit;
    align-items: center;
    justify-content: center;
    gap: 5rem;
}

a#osticket-link,
a#ostawesome-link {
    padding: 20px !important;
}

#footer #osticket svg,
#footer #ostawesome svg {
    width: 200px;
}

#header-constrain #header-image img {
    height: 44px;
}

#header-image img {
    height: 44px;
}

#nav-wrapper {
    padding: 4px;
}

#header a[href*="login.php"]:hover {
    color: var(--header-bg) !important;
}

#login-sign-in {
    display: none !important;
}

#loginBody {
    background: #eee !important;
}

#loginBody #loginBox {
    background-color: #fff !important;
    box-shadow: 2px 3px 3px 2px rgba(21, 62, 80, 0.3) !important;
}

#loginBody #blur {
    background: transparent !important;
}

#loginBody #loginBox:after {
    background-color: var(--header-bg) !important;
}

#loginBody #loginBox #login-title #header-image img {
    height: auto !important;
    width: 80% !important;
}

/* STAFF Login Box Button */
#loginBody #loginBox .external-auth-icon {
    display: none !important;
}

#loginBody #loginBox .external-auth .external-auth-box {
    border: 1px solid transparent;
    background: var(--nav-bar-bg);
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

#loginBody #loginBox .external-auth .external-auth-name {
    color: var(--nav-bar-link);
    font-size: 1rem;
}

#loginBody #loginBox .external-auth a:hover .external-auth-box {
    border: 1px solid var(--nav-bar-bg);
    background: var(--nav-bar-link);
    box-shadow: 1px 2px 5px 2px var(--nav-bar-bg);
}

#loginBody #loginBox .external-auth a:hover .external-auth-name {
    color: var(--nav-bar-bg);
}

/********/

#nav.pull-right li.inactive>ul {
    background: var(--nav-bar-link-hover);
}

.list thead tr th a {
    padding-right: 25px !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media only screen and (max-width: 1020px) {
    .staff-side #header-logo #left-logo {
        width: fit-content;
    }
}

@media only screen and (max-width: 972px) {
    #footer #osticket {
        flex-direction: column;
        gap: initial;
        justify-content: normal;
    }
}

@media only screen and (max-width: 960px) {
    #content {
        width: unset;
    }

    #nav-wrapper {
        width: unset;
    }
}

@media only screen and (max-width: 860px) {
    .staff-side #header-logo {
        display: none;
    }
}

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

    #right-buttons,
    #right_menu,
    button.c-hamburger.c-hamburger--htx {
        display: none !important;
    }
}