@charset "utf-8";

/* CSS Document */


/*
/*      STAFF - desktop
*/

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;
}


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

html {
    background: white;
}

body {
    background: #ffffff;
    font-size: 14px !important;
    color: #4c5156;
}

#dashboardTickets {
    display: none !important;
}

a {
    color: #000000;
}

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:focus {
    outline: none;
}


/* ==========================================================================
 PAGE LAYOUT 
========================================================================== */

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

#content {
    margin: 24px;
    border: none;
    min-height: 670px;
}

th {}


/* ==========================================================================
 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: 58px;
    z-index: 4;
}

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

#header p {
    border: none;
    color: var(--header-title-color);
    /*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: 0px !important;
    padding: 0px !important;
}


/* ==========================================================================
 FALLBACK COLORS
========================================================================== */

.pull-right#nav a:hover,
.pull-right#nav a svg:hover {
    color: var(--mobile-menu-bg);
    fill: var(--mobile-menu-bg);
    font-weight: 600;
}

.pull-right#nav li.active {
    color: red;
}

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

.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-color: #444444;
    --nav-bar-bg: #717171;
    --nav-bar-link: #000000;
    --stickybar: #444444;
    --mobile-menu-bg: #cecece;
    --mobile-link-color: #000000;
}


/* ==========================================================================
 Info & Map
========================================================================== */

.ticketInfo {
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.1);
    min-height: 305px;
    width: 48.5%;
    vertical-align: top;
    padding: 8px
}

.organizationInfo {
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 8px;
    min-height: 305px;
    width: 48.5%
}


/* ==========================================================================
 NAVIGATION
========================================================================== */

#nav {
    background: var(--header-title-color);
    border: none;
    padding-top: 0px;
    z-index: initial;
}

#sub_nav {
    background-color: #f0faff;
    height: 12px;
    border: 0;
}

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

nav#customQ_nav #sub_nav {
    line-height: 50px;
    border: none;
}

#MobileService {
    display: none
}

#sub_nav a {
    padding: initial;
    text-decoration: none;
}

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: 0px !important;
}

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

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

#nav li.active,
#nav li.inactive:hover {
    background-color: var(--header-title-color);
    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-color);
}

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

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

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


/* ==========================================================================
 LOGO
========================================================================== */

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

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


/* TEXT LOGO */

#header-text {
    padding: 2px;
}

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

#header-subtitle {
    color: var(--header-title-color);
    margin: 0;
    position: relative;
    font-size: 10px;
    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 {
    max-width: 100%;
}

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

#header-text {
    display: none;
}

#header-image img {
    display: none;
}

@media screen and (max-width: 1440px) {
    #q {
        display: none;
    }
    #searchImg {
        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;
    display: inline-block;
    text-align: right;
    margin-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-color);
    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: rgba(0, 0, 0, 0.9);
    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: 0px !important;
}

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

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


/* ==========================================================================
 TOP MARGIN
========================================================================== */

.pull-left {
    float: left;
    margin: 0;
}

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 {}

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

h2 a {
    line-height: 33px;
}

h2 a[title="Refresh"] {
    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;
}

h2 a[title="Refresh"] svg {
    display: inline-block;
    position: relative;
    top: 4px;
    left: 0px;
    -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;
}

h2 a[title="Refresh"]:hover>svg,
h2 a[title="Refresh"]:focus>svg,
h2 a[title="Refresh"]:active>svg {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

.sticky.bar.opaque.fixed .pull-left h2 a[title="Refresh"] svg {
    fill: #fff;
}

label {
    color: #4c5156 !important;
}

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

.faded strong {
    font-weight: 500;
}

.form_table th em strong {
    font-weight: 500;
}


/* ==========================================================================
 ICONS
========================================================================== */

a [class^="icon-"],
a [class*=" icon-"] {
    color: #000000;
}

.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: 0px;
    /* 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;
}

i.help-tip {
    color: #000000;
    position: relative;
    top: -2px;
}

.body .icon-remove-circle:before,
a.tip_close .icon-remove-circle:before,
.dialog .icon-remove-circle:before {
    content: url(../icons/close.svg);
    height: 30px;
    width: 30px;
    top: 0px !important;
}

i.icon-remove-circle {
    top: 12px;
    right: 8px;
}

a.tip_close i.icon-remove-circle,
.dialog a.close i.icon-remove-circle {
    top: 0;
    right: 0;
}

.icon-remove-circle:before {
    content: " ";
}

.dialog a {
    color: #000000;
}

a.tip_close,
.dialog 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: 0px;
    margin: 16px;
    padding: 0px;
    border-radius: 10%;
    z-index: 9;
}

.tip_content {
    top: 5px;
    left: -40px;
}

.tip_content.tickets a.tip_close {
    margin: 5px;
}

.dialog a.close {
    font-size: 20px !important;
}

.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: 0px 0 15px 0;
}

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

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

.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: 0.5px solid rgba(0, 0, 0, 0.21);
    color: #666;
    color: rgba(0, 0, 0, 0.5);
    background: rgba(255, 255, 255, 0.21);
}

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


/* ==========================================================================
 TICKET PAGES
========================================================================== */

form[action="tickets.php"] {
    display: inline;
}

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

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

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

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

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

.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 {
    text-align: left;
    width: 100%;
    border: 2px solid #cfd4d6;
    border-radius: 6px;
    margin: 5px 0 0 0;
    background: initial;
    background-color: #fff;
    border-spacing: 0;
    border-collapse: separate;
}

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.queue.tickets th:first-child {
    background-position: center right;
}

.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: 0px !important;
    margin: 0px !important;
    padding: 0px !important;
    vertical-align: middle !important;
    height: 30px;
}

table.list thead th a {
    display: block;
    /* helps with asc-desc bg images */
    color: #000000;
    font-weight: normal;
    font-size: 14px;
    background: url(../../osta/icons/asc-desc.svg) 100% 50% no-repeat;
    background-size: 16px;
    will-change: background;
    transition: all 0.3s ease-in-out;
    margin: 0;
    height: 30px;
    padding: 8px 8px 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: 0px;
}

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-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;
    vertical-align: middle;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-right: none;
    border-left: none;
    font-size: 14px;
    color: #686868;
}

table.list tbody tr td:nth-child(4) {
    text-align: left;
}

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

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


/* FOOT */

table.list tfoot td {
    font-size: 14px !important;
    background: #fff;
    border-radius: 0 0 6px 6px;
    padding: 12px;
    border-top: 0.5px solid #e0e0e0;
}

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


/* ==========================================================================
 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 0px !important;
    }
    .tickets-page table.list tbody td {
        /*padding-left: 0px !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 0px -1px 0px 0px #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: 0.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: 0.1px solid #aaa !important;
    border-bottom: 0.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, 0.3);
        box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(117, 178, 226, 0.3);
    }
    50% {
        -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(117, 178, 226, 0.3);
        box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(117, 178, 226, 0.3);
    }
    to {
        -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(117, 178, 226, 0.3);
        box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(117, 178, 226, 0.3);
    }
}

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

.nowrap {
    white-space: nowrap;
}

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

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


/*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.reopen {
    background-image: url(../icons/reopen.png);
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 25px;
    display: inline-block;
    content: "";
    padding-left: 20px;
}

.Icon.todaySLA {
    background-image: url(../icons/alert-outline.svg);
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 25px;
    display: inline-block;
    content: "";
    padding-left: 20px;
}

.Icon.overdueTicket {
    background-image: url(../icons/alert-outline-error.svg);
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 20px;
    display: inline-block;
    content: "";
    padding-left: 20px;
}

.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: 0px;
}

#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.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.emailTicket.preview b,
a.Icon.phoneTicket.preview b,
a.Icon.webTicket.preview b,
a.Icon.otherTicket.preview b {
    font-weight: normal;
    font-size: 10px;
}

a[data-preview^="#tasks"],
table.list.queue.tickets a.preview {
    font-weight: 400;
    border: 0.5px solid #000000;
    border-radius: 2px;
    padding: 2px 3px 2px 3px;
    background: #ffffff7a;
    margin: 0;
    font-size: 14px;
}

.preview {
    /* float: left; */
}

.rtl .preview {
    float: right;
}

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


/* ==========================================================================
 TICKET LIST - FOOT
========================================================================== */

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

#table-foot-options {
    font-size: 16px;
    padding: 12px 12px 0 12px;
}

#table-foot-options a {
    margin: 0 0 0 10px;
}


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

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

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

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

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

.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;
    margin-top: 8px;
}

.flush-left h2 {
    margin: 0px;
}

.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: 0px;
}

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

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

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

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

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

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

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

.thread-entry.note .header {
    background: #fdf8ac;
}

.thread-entry.response .header {
    background: #c2e5f7;
}

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

.thread-entry .label-bare {
    display: none;
}

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

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

.thread-event .description {
    margin: 11px 0 0 5px !important;
    padding-top: 0px;
    padding-left: 0px;
    display: block;
    width: calc(100% - 114px);
    line-height: initial !important;
    color: #3b4450;
    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: 0px 2px 9px;
    overflow: hidden;
    margin-left: 4px;
    width: 100%;
}

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

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

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

#response_options ul.tabs {
    text-align: right;
}

#response_options>form {
    border: 0.5px solid #cfd4d6;
    border-top: none;
    border-radius: 0px 0px 6px 6px;
}

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

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

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: 0px;
    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: #000000;
}

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

.redactor-editor {}

.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: 7px;
    border-radius: 5px 5px 0 0;
    border-bottom: 1px solid #ccc;
}

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

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

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

#tasks_content .list td a {
    font-size: 14px;
}

#tasks_content .list td a[title="Preview Task"] {
    font-size: 10px;
    padding: 3px 3px 1px 3px;
}

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


/* ==========================================================================
 PRIORITY POPUP (osTicket Awesome mod)
========================================================================== */

table.list th.head-priority a {
    width: 3px !important;
    padding: 0px !important;
    margin: 0px !important;
    border-radius: 6px !important;
}

td.cursor.priority {
    padding: 0px;
}

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: 0.1px solid #aaa !important;
    border-bottom: 0.1px solid #aaa !important;
    background-color: #ddd;
}

td.priority {
    margin: 0px !important;
    padding: 0px !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: 0px !important;
    height: 34px;
    width: 15px;
}

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

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

.tip_content.tickets h2 {
    margin: 0px;
}

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

.color {
    float: left;
    margin-right: 5px;
    padding: 0 0 0px 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;
}

td.cursor.priority.Emergency,
td.cursor.priority.High,
td.cursor.priority.Normal,
td.cursor.priority.Low,
a.cursor {
    cursor: url(../../osta/icons/edit.png) 10 15, url(../../osta/icons/edit.svg), pointer !important;
    padding: 0px !important;
}

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


/* ==========================================================================
 TICKET VIEW - 2019
========================================================================== */

td.osta_username {
    font-size: 14px !important;
}

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

th.osta_priority a {
    text-shadow: initial !important;
    font-size: 0px !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: 0px;
    border: 2px solid #fff !important;
    border-top: 1px solid #fff !important;
    border-bottom: 1px solid #fff !important;
}

div[style*="background-color:#008233"] {
    color: black;
    text-align: center;
    padding: 2px 3px 2px 3px;
    width: 35px;
    border-radius: 2px;
    font-size: 14px;
}

div[style*="background-color:#f00"] {
    color: black;
    text-align: center;
    padding: 2px 3px 2px 3px;
    width: 40px;
    border-radius: 2px;
    font-size: 14px;
    font-size: 14px;
    font-weight: 400;
}

div[style*="background-color:#ff9900"] {
    color: black;
    text-align: center;
    padding: 2px 3px 2px 3px;
    width: 40px;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 400;
}

div[style*="background-color:#0bff26"] {
    color: black;
    text-align: center;
    padding: 2px 3px 2px 3px;
    width: 40px;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 400;
}


/* ==========================================================================
 BELOW TABLE LIST page numbers etc.
========================================================================== */

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


/* ==========================================================================
 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.svg) no-repeat;
    background-position: right 0 center !important;
    background-color: #fff;
    color: #424242;
    border: 0.5px solid #bfbfbf !important;
    height: 32px;
    position: relative;
    top: -1px;
    padding: 0 17px 0 8px !important;
}

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

input[type="text"],
input[type="password"],
textarea,
input {
    min-width: 100px;
    margin: 3px 0 3px 0;
    /*target (Staff login page)*/
    font-size: 14px;
    border: 0.5px solid #bfbfbf;
}

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

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

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

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;
}

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

.action-button {
    margin: 0px;
}

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

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

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

.input.attached {
    height: 32px;
}

.input.attached input {
    min-width: 169px;
    height: 32px;
    font-size: 14px;
    padding: 0 0 0 8px;
    border: 0.5px solid #bfbfbf;
    border-right: 0px;
    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: 0.5px solid #bfbfbf !important;
    border-left: 0px !important;
    border-radius: 0px 3px 3px 0;
    float: left;
}

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

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

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

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

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: 0px !important;
}

#definition td.required+td input {
    border-right: 0px !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;
}

.select2-container {
    width: 305px;
    margin-right: 10px;
}

.rtl .select2-container {
    margin-left: 10px;
    margin-right: 0;
}

.select2.select2-container.select2-container--default {
    /* width: 260px !important; */
    /* what is this for? */
}

.tickets .select2.select2-container.select2-container--default {
    width: 420px !important;
}

.tickets .form_table .select2.select2-container.select2-container--default {
    width: 320px !important;
}

.tickets .form_table .select2-container--default .select2-selection--multiple {
    width: 320px;
}

.profile-page .select2.select2-container.select2-container--default {
    width: 305px !important;
}

#select2-timezone-dropdown-container {
    padding: 2px 20px 0px 8px;
}

.select2-selection__arrow b {
    margin-top: 0px !important;
}

.select2-search--dropdown .select2-search__field {
    width: calc(100% - 9px) !important;
    /* eg. Open Ticket > select User */
}

#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: 0px;
    padding: 5px;
}

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

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

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

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

#the-lookup-form {
    margin-bottom: 16px;
}

input[type="submit"],
input[type="reset"],
input[type="button"] {
    padding: 6px 16px;
    box-shadow: none;
    color: rgba(0, 0, 0, 0.6);
    background: rgba(0, 0, 0, 0.3);
    letter-spacing: 1.6px;
    font-weight: 600;
}

.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: 0.5px solid rgba(166, 182, 166, 0.7294117647058823) !important;
}

.save.pending,
input[type="submit"],
input[value="Create"],
input[style="color: rgb(255, 0, 0);"] {
    color: #444a44 !important;
    background-color: #8cc477;
    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 0px #75a4b1, 0 0 0 0px rgba(77, 130, 85, 0.44);
    }
    50% {
        box-shadow: 0 0 0 0px #75a4b1, 0 0 0 4px rgba(77, 130, 85, 0.44);
    }
    100% {
        box-shadow: 0 0 0 0px #75a4b1, 0 0 0 0px rgba(77, 130, 85, 0.44);
    }
}

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

input[type="submit"]:hover,
input[value="Create"]:hover,
.save.pending:hover {
    color: #6b7c6b !important;
    background: #a8ec90;
    border: none;
}

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

a.green.button {
    padding: 6px 16px;
    background: #fff;
    border: 0.5px solid #b9b9b9;
}

.green.button:hover {
    background: #d5fcd6 !important;
    border: 0.5px solid #25ad30 !important;
    color: #24862c !important;
    box-shadow: unset;
}

.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;
    background-size: 15px;
    top: 8px;
    font-size: 16px;
    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 {
    cursor: pointer;
    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: 0.5px solid #ccc;
    float: right !important;
    padding: 0px 0px 0 4px;
    height: 21px;
}

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

span.action-button {
    padding: 6px 16px;
}


/*span.action-button[data-original-title="Change Status"] {
    margin-left: 0px;
}*/

a#post-note,
.icon-mail-reply:before,
.icon-reply:before {
    color: #000000;
}

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: 0.5px solid #b1b1b1;
    padding: 6px 16px;
    color: #b1b1b1;
}

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

.red.button.action-button {
    /*margin-right: 0px;*/
    /*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: 0.5px solid #d01919 !important;
    background-color: #fff;
    height: 22px;
}

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

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

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

.action-button.advanced-search.gray-light2 {
    margin-right: 0px;
    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: 0.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: 4px 0 0px 6px;
    /* sort button on ticket pages */
}

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

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

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

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

.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: 0.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: 0px 10px 0 0 !important;
}

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


/* ==========================================================================
 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: 0.5px solid #ddd;
}

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

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 {}

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

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

.tooltip.top {
    margin-top: 0px !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: 0.5px solid #aaa;
    border-radius: 6px;
}

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

.tip_menu li a:hover {
    color: #000000;
}

.tip_menu li a {
    color: #000000;
    display: block;
    width: auto;
    float: left;
    padding: 0 16px;
    border-right: 0.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-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;
}

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

.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;
}

.form_table th em {
    display: block;
    color: #777;
    font-style: initial;
    font-size: 18px;
    margin-top: 10px;
}

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

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

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

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

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

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

#dynamic-form select {
    width: 330px;
    border: 0.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: 0.5px solid #bfbfbf;
}

table.form_table.fixed tbody:nth-child(3) th[colspan="2"]:nth-child(1) {
    padding-top: 25px !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 .select2-container {
    margin-right: 0px;
}

.form_table.fixed .rtl .select2-container {
    margin-right: 0px;
    margin-left: 0px;
}

.form_table.fixed .select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 0;
    margin-right: 0;
    width: calc(100% - 8px) !important;
}

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

.form_table.fixed .button,
.form_table.fixed .button:hover,
.form_table.fixed .button:active {
    border: 0.5px solid #bfbfbf !important;
    background-color: #e4e4e4 !important;
}

#time-zone td {
    padding-top: 0px;
    padding-bottom: 0px;
    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: 0.5px solid rgba(0, 0, 0, 0.1);
}


/* ==========================================================================
 LOADING ANIMATION
========================================================================== */

#loading {
    display: none;
    vertical-align: middle;
    border: initial;
    padding: 0px;
    width: 100px;
    height: 100px;
    background: initial;
    position: fixed;
    z-index: 3000;
    box-shadow: initial;
}

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

.loading-icon {
    padding: 0px;
    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: 0px auto !important;
    padding: 0px !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);
    }
}


/* ==========================================================================
 DASHBOARD
========================================================================== */

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

.directory div[style="min-height:25px;"] input[type="submit"] {
    position: relative;
    top: -5px;
    height: 20px;
    padding: 4px 0 6px 0 !important;
    margin: 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: 0.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: 0px;
}

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

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

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


/* ==========================================================================
 DATEPICKER
========================================================================== */

.ui-widget-content {
    border: 0.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: 0.5px solid #ccc;
    background: #fff;
    font-weight: 500;
    color: #000000;
    height: 25px;
}

a.ui-state-default.ui-state-hover {
    color: #000000;
    font-weight: 500;
    border: 0.5px solid #97bdcb;
    background: #bdedff;
}

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

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


/* ==========================================================================
 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 {
    text-align: left;
    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: 0.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 #000000;
    }
    50% {
        box-shadow: 0 0 0 2px #75a4b1, 0 0 0 10px #000000;
    }
    100% {
        box-shadow: 0 0 0 2px #75a4b1, 0 0 0 2px #000000;
    }
}

@keyframes async-progress-bar-pulse {
    0% {
        box-shadow: 0 0 0 2px #75a4b1, 0 0 0 2px #000000;
    }
    50% {
        box-shadow: 0 0 0 2px #75a4b1, 0 0 0 10px #000000;
    }
    100% {
        box-shadow: 0 0 0 2px #75a4b1, 0 0 0 2px #000000;
    }
}

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, 0.1);
}

.sticky.bar.fixed {
    margin-top: 0px;
    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: 0px 0 0px 6px;
}

.scroll-up {
    display: none;
}

.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: 0.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: 0px;
    margin-left: 0;
}

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

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

.sticky.bar .content {}

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

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

.sticky.bar.fixed {
    padding: 0px 0px;
    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: 0px;
}

.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: 0px 0px;
    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: 0px;
}

#kb {
    padding: 5px 0;
}

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

.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: 0px;
}

#breadcrumbs {
    background-color: unset;
}

.sidebar {
    /*     width: 220px;
    float: right;
    padding: 10px; */
    border: 0.5px solid #a8a6a6;
    background: #ebebeb;
    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-size: 18px;
}

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

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: #000000 !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 {
    width: unset;
    padding: 0px 10px !important;
    border-radius: 5px 5px 0 0;
    background-image: none;
}

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

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

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

.system th:last-child a:hover,
.system th:last-child:hover,
.system tbody tr:nth-child(4n + 1) td {
    background-image: none;
    background-color: #fff !important;
}

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

.system table.list i {
    top: 0px;
    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: 0.5px solid #aaa;
    border-radius: 6px;
    background: #fff;
    margin: 20px 0 0 0 !important;
}

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

#content div[style="margin: 0 20px"]>div {
    padding: 0 0 20px 23px;
    border-bottom: 0.5px solid #e4e4e4 !important;
    margin: 0px;
}

.system-page i.icon.icon-warning-sign {
    margin: 0px 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: 0px;
    padding-left: 22px;
    color: #7e7e7e;
}

.system h3 strong {
    font-size: 18px;
    color: #707070;
    font-weight: 400;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    /*     margin: 0;
    width: 100%;
    height: 30px; */
    /*target*/
    /*breaks "Check all help topics related to this FAQ article" */
}

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

.select2-container--default .select2-selection--multiple {
    background-color: white;
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    cursor: text;
}

textarea#_3cd1c655ae15857b {
    height: 41px;
}

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

.row-item {
    border: 0.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: #000000;
}

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: -2px;
    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: 0.8;
}

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

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

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

#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: 0px !important;
}

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

.helptopics table.list tbody tr td:nth-child(2),
.filters table.list tbody tr td:nth-child(2),
.slas 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),
.forms table.list tbody tr td:nth-child(2),
.lists table.list tbody tr td:nth-child(2),
.plugins table.list tbody tr td:nth-child(2) {
    font-size: 13px !important;
    padding: 10px 0 !important;
}

div[style="padding:8px 3px; margin-top: 1.6em"] {
    margin-top: 0.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: 0px !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;
}

div#secondary_langs {
    width: 100% !important;
    max-width: 440px;
}

.pages .tab_content {
    margin-bottom: 10px;
}

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

.forms table.form_table select {
    width: initial;
}

.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;
}

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

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

.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;
}


/* ==========================================================================
 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: 0.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 {
    text-align: left;
    font-size: 17px !important;
    font-weight: 400;
    height: 36px;
    padding-left: 9px !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;
}

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

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

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

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

#user-account #timezone-dropdown+.select2+button {
    margin: 8px 0 0 0;
}

button.inline.green.button {
    padding: 6px 16px;
    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: 0.5px solid #a9a9a9;
    height: 39px;
    top: 1px;
}


/* ==========================================================================
 HIDE UGLY ICONS
========================================================================== */

.Icon {
    width: auto;
}

.Icon.Ticket,
.Icon.emailTicket,
.Icon.phoneTicket,
.Icon.webTicket,
.Icon.otherTicket,
.Icon.staffAssigned,
.Icon.assignedTicket,
a.test,
a.Ticket,
a.assignedTickets,
a.overdueTickets,
a.answeredTickets,
a.answered,
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.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,
.Icon.lockedTicket {
    background: none;
    margin-left: 0px;
}


/* ==========================================================================
 DASHBOARD
========================================================================== */

.dashboard input.hasDatepicker,
.dashboard select[name="period"] {
    min-width: 100px !important;
    /* max-width: 100px !important; */
}

.dashboard button.green.button.action-button.muted {
    position: relative;
    top: -4px;
    height: 20px;
}

.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;
}

.select2-container--default .select2-selection--single {
    height: 32px;
    /*width: 305px;*/
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    position: relative;
    top: -1px;
    color: #424242;
}

#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;
}


/* ==========================================================================
 CLEAN TABS
========================================================================== */

ul.clean.tabs {
    z-index: 1;
}

ul.tabs,
ul.tabs.alt {
    background: initial;
    border-bottom: 0;
    bottom: 0;
    margin: 0 auto;
}

ul#referral {
    bottom: -6px;
}

ul.tabs li.active {
    z-index: 1;
    top: -1px;
}

ul.tabs li.active a {
    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-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;
}

#postreply {
    display: none;
}

#post-note {
    display: none;
}


/* ==========================================================================
 USERS
========================================================================== */


/* ==========================================================================
 TASKS
========================================================================== */

form[action="tasks.php"] td:nth-child(2) {
    padding: 0 0 0 10px !important;
}

form[action="tasks.php"] td:nth-child(3) {
    padding: 0 0 0 10px !important;
}

#add-task-mobile {
    display: none;
}

#task_response_options {
    margin-top: 20px;
}


/* ==========================================================================
 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-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);
    }
}


/* ==========================================================================
 TIPS
========================================================================== */

.tip_content .links a {
    color: #000000;
}

.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: 5px;
    left: -40px;
    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);
}

.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: 0px !important;
}

.tip_content hr {
    color: #ddd0;
    background-color: #ddd0;
    height: 6px;
}

.tip_content h1 {
    border-bottom: 0.5px solid #e4dbc2;
    font-weight: 500;
    background: rgba(254, 243, 216, 0.7);
    padding-top: 9px;
    padding: 9px 0 9px 4px;
}

.doc-desc-title {
    font-weight: 500;
}

.tip_arrow {
    top: 11px;
    border: 1px solid #fff;
    border-top: 0px;
    border-bottom: 0px;
    border-left: 0px;
}

.tip_content strong {
    font-weight: 600;
}

.form_table tr i.help-tip {
    margin-left: 5px;
    opacity: 0.7;
}

div[style="width:650px; padding: 2px 2px 0 5px;"] {
    width: 100% !important;
    padding: 0px !important;
}

.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: 0px;
}

.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: 0.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_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 0px;
}

.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(../../osta/icons/alert-outline-error.svg);
    background-repeat: no-repeat;
    background-size: 50px 36px;
    position: relative;
    top: 3px;
}

.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: 0.5px solid #ac4947;
}


/* ==========================================================================
 WARNING BAR
========================================================================== */

#warning_bar {
    margin: 0;
    width: 100%;
    padding: 5px 10px 5px 42px;
    height: 16px;
    line-height: 16px;
    border: 1px solid #f26522;
    background: url(../icons/alert-outline-warning.svg) 10px 50% no-repeat #fbd830;
    position: fixed;
    top: 0;
    z-index: 99;
}


/* ==========================================================================
 FOOTER
========================================================================== */

#footer {
    color: black;
    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;
    padding-top: 30px;
    position: static;
}

#footer #poweredBy {
    background: none;
}

#osticket {
    width: 50% !important;
    height: 100%;
    display: inline-block;
    float: left;
}

#ostawesome {
    width: 50% !important;
    height: 100%;
    display: inline-block;
    float: right;
}

#footer a {
    position: relative;
    top: 68%;
    transform: perspective(1px) translateY(-50%);
    float: right;
    padding: 0 20px;
}

a#osticket-link {
    float: right;
}

a#ostawesome-link {
    float: left;
}

#footer svg {
    fill: var(--header-title-color);
    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: 0px;
    padding: 0px;
    color: var(--header-title-color);
    text-decoration: none;
    line-height: 120%;
    font-style: normal;
    font-weight: 600;
    font-size: 30px;
    display: inline-block;
    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: 0px;
    /*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: 0px;
    width: 270px;
    margin: 0 auto !important;
}

input[type="password"] {
    border-radius: 0 0 3px 0 !important;
}

#loginBody fieldset input:first-child {
    border: 0px;
}

#loginBody fieldset input:nth-child(2) {
    border-radius: 0 3px 0 0 !important;
    border: 0px;
    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: 0.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-color);
    letter-spacing: initial;
    margin: 28px 0;
    font-weight: 100;
    opacity: 0.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: #000000;
    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-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 0px 1000px rgba(255, 255, 255, 0.08627450980392157) inset;
    box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.08627450980392157) inset;
    border: 0.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: 0px 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: 0px !important;
    font-size: 15px;
    text-shadow: none;
    color: var(--header-title-color);
    letter-spacing: initial;
    margin: 0px 0;
    font-weight: 100;
    text-decoration: none;
}

#loginBody #poweredBy .osticket-logo {
    border: none;
    -webkit-filter: none;
    filter: none;
    ms-filter: none;
}

#loginBody #poweredBy {
    /*    box-shadow: none;
    text-shadow: none;
    background-color: initial;
    position: fixed;
    right: 0px;
    left: 0px;
    bottom: 0px;
    opacity: .6;	*/
    display: none;
}


/* ==========================================================================
  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: 0.5px solid #cdd2d4;
    border-radius: 3px;
}

.quicknote a.action:hover,
.floating-options a.action:hover {
    border: 0.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;
}

div#user-email a {
    color: #000000;
}

.code-green {
    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-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='%23000000' d='M21%2C7L9%2C19L3.5%2C13.5L4.91%2C12.09L9%2C16.17L19.59%2C5.59L21%2C7Z' /%3E %3C/svg%3E");
    background-position: center;
    fill: #000000 !important;
    color: #000000 !important;
    display: inline-block;
    background-repeat: no-repeat !important;
    position: relative;
    top: 8px;
    margin-left: 8px;
}

#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='%23000000' 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: 0px;
    margin-left: 9px;
}

#version-msg a {
    transition: color 0.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: 0px !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: 0.1 !important;
}

#loadingbar {
    background: var(--header-title-color) !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: 0.4;
    pointer-events: none;
}

@media (max-width: 1000px) {
    table#color-themes {
        width: 100%;
    }
}

#color-themes h2 {
    margin: 0 0 -10px 0;
}

.theme-card {
    width: 240px;
    height: 126px;
    background: #ddd;
    border: 0.5px solid #ddd;
    z-index: 1;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.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: 0px;
    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-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 0px 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,
#theme4 {
    margin: 0 0 10px 0px;
}

#theme4,
#theme5 {
    margin: 20px 0 0 0;
}

table#theme5 a {
    transition: all 0.3s ease;
    font-size: 90%;
    border: 0.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);
    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);
    position: relative;
    top: -1px;
    border: 0.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: 0px;
}

#logo-options td,
#additional-options td,
#theme2a tr:nth-child(2) td,
#theme3 td,
#theme4 td,
#theme5 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 0px 0 2px;
    position: relative;
    top: -3px;
}

#custom-text-and-links button {
    margin: 0 0 0 7px;
}

form#header-bg {
    margin: 3px 30px 15px 30px;
}

#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.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -8px, 0);
        transform: translate3d(0, -8px, 0);
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -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.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -8px, 0);
        transform: translate3d(0, -8px, 0);
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -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 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: 0px;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #eee;
    border-radius: 50%;
    border: 0.5px solid #b8bdbf;
    will-change: background-color !important;
    -webkit-transition: all 0.3s ease-out !important;
    -moz-transition: all 0.3s ease-out !important;
    -o-transition: all 0.3s ease-out !important;
    -ms-transition: all 0.3s ease-out !important;
    transition: all 0.3s ease-out !important;
}

.rtl .radiobtn {
    left: initial;
    right: 0;
}

.switch .radiobtn {
    top: 0px;
}


/* 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: #000000;
}

.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='%23000000' 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;
    -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: 0.3s, 1.5s;
    animation-duration: 0.3s, 1.5s;
    -webkit-animation-delay: 0s, 0.3s;
    animation-delay: 0s, 0.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: 0.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: #000000;
    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: 0.5px solid #b9b9b9;
}

a.green.button.action-button:before {
    background: #16ab39;
}

a.green.button.action-button:hover {
    color: #147d2d;
}


/* 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: 7px;
    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='%23000000' 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: "\2295";
    display: inline;
    font-size: 14px;
    font-weight: 500;
    margin-left: 5px;
}

.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: 0px 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: -60px;
    border: none !important;
    height: 24px;
    margin: 0px 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: -38px;
    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;
    }
}

@media screen and (min-width: 921px) and (max-width: 1120px) {
    form[action="tickets.php"] .attached.input {
        top: -30px;
    }
}

@media screen and (min-width: 821px) and (max-width: 920px) {
    form[action="tickets.php"] .attached.input {
        top: -31px;
    }
}

@media screen and (min-width: 794px) and (max-width: 820px) {
    form[action="tickets.php"] .attached.input {
        top: -32px;
    }
}

@media screen and (min-width: 761px) and (max-width: 793px) {
    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 {
        border: 0.5px solid #8a8a8a !important;
    }
}

.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 {
    left: 20px;
    right: initial;
}

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: 0px !important;
    border: 0;
    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 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.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: 0 0 5px rgba(109, 207, 246, 0.5);
    -moz-box-shadow: 0 0 5px rgba(109, 207, 246, 0.5);
    box-shadow: 0 0 5px rgba(109, 207, 246, 0.5);
}

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;
    border: initial !important;
    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: 1 !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='%23000000' 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 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

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: 1 !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: 1 !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: 1 !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: 1 !important;
    font-size: 13px !important;
    font-style: italic !important;
}

form[action="kb.php"] input#query::placeholder,
form[action="orgs.php"] input.basic-search::placeholder,
form[action="users.php"] input.basic-search::placeholder,
form[action="tasks.php"] input.basic-search::placeholder,
form[action="tickets.php"] input.basic-search::placeholder {
    color: var(--nav-bar-link) !important;
    opacity: 1 !important;
    font-size: 13px !important;
    font-style: italic !important;
}

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: 0px;
    opacity: 1;
}

#basic_search {
    background-color: #ffffff;
    box-shadow: none;
    border-bottom: none;
    border-radius: 0 0 5px 5px;
    height: 0px;
    margin-bottom: 0;
}


/* #basic_search .attached.button {
    background-color: var(--header-title-color);
    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 0px #cfd4d6 inset;
    margin: 0px;
}

#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: 0.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: 0.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: 0.5px solid #e6e6e6 !important;
    border-right: 0.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: 0.5px solid #c7c6c0 !important;
}

div.mce-menu .mce-menu-item-sep,
.mce-menu-item-sep:hover {
    border-bottom: 0.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 0px 0px;"] {
    /*    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: 0.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;
}

.mce-menu-item-normal.mce-active .mce-text {
    color: white !important;
}


/* Help Menu */

.mce-window-head {
    border-bottom: unset !important;
}

.mce-tabs {
    border-bottom: 0.5px solid #c5c5c5 !important;
}

.mce-tab {
    background: #e7e7e9 !important;
    border: 0.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: 0.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: 0.5px solid #c5c5c5 !important;
}

div[style="padding: 10px; background: #e3e7f4; height: 100%;"] {
    background-color: #d6d6d6 !important;
}

.mce-edit-area {
    border: 0.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: 0.5px solid #c5c5c5 !important;
}

.mce-floatpanel.mce-popover.mce-bottom>.mce-arrow {
    -webkit-box-shadow: 0px 2px 0px 0px #e7e7e9;
    -moz-box-shadow: 0px 2px 0px 0px #e7e7e9;
    box-shadow: 0px 2px 0px 0px #e7e7e9;
}


/* ==========================================================================
 ADVANCED SEARCH
========================================================================== */

#advanced-search i.icon-save {
    position: relative;
    /*top: 0px; */
    /*target*/
}

button#do_search i.icon-search {
    top: 3px;
    margin-right: 3px;
}

.dialog fieldset input:not([type="checkbox"]) {
    border: 0.5px solid #bfbfbf;
}

.adv-search-field {
    margin-top: 0px !important;
}

#advanced-search .accordian dt {
    border-radius: 4px;
    border: 0.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: 0.5px solid #888 !important;
}

.select2-container.select2-container--default.select2-container--open {
    z-index: 999999 !important;
}

@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;
    }
}


/* ==========================================================================
 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-color);
    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: 0px;
}

_::-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: 4%;
}

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;
}


/* ==========================================================================
 BAN LIST
========================================================================== */

form[action="banlist.php"] table.list,
#ticketTable {
    margin: 3px 0 0 0;
}

form[action="banlist.php"] table.list th:first-child {
    width: 4%;
}

form[action="banlist.php"] table.list th:nth-child(2) {
    width: calc(100% - 4% - 45%);
}

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: 15%;
}

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;
}


/* ==========================================================================
 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;
}


/* ==========================================================================
 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: 4% !important;
}

form[action="departments.php"] table.list th:nth-child(2) {
    width: calc(100% - 4% - (12% * 2) - (18% - 2));
}

form[action="departments.php"] table.list th:nth-child(5),
form[action="departments.php"] table.list th:nth-child(6) {
    width: 12%;
}

form[action="departments.php"] table.list th:nth-child(5),
form[action="departments.php"] table.list th:nth-child(6) {
    width: 18%;
}

form[action="departments.php"] table.list td:nth-child(2) a {
    font-size: 14px;
}


/* ==========================================================================
 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: 13px;
}

form[action="emails.php"] table.list td:nth-child(2) small {
    font-weight: 600;
    padding-left: 6px;
    padding: 2px;
    background-color: rgb(165, 54, 54);
}


/* ==========================================================================
 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;
}


/* ==========================================================================
 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 th:first-child {
    width: 4%;
}

form[action="helptopics.php"] table.list th:nth-child(2) {
    width: calc(100% - (12% * 5) - 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) {
    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) {
    font-size: 11px;
}

form[action="helptopics.php"] table.list thead tr:first-child {
    display: none;
}

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

div.add-translation button {
    color: #25ad30;
}


/* ==========================================================================
 HELP TOPICS
========================================================================== */

form[action="lists.php"] table.list tbody td {
    padding-left: 0px;
}


/* ==========================================================================
 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;
}

#content.users form#users-list td i.icon-fixed-width.icon-file-text-alt {
    font-size: 17px;
    float: right;
    padding-right: 30px;
}

.users a[href="#users/112/edit"] {
    color: #000000;
    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: 15px;
    padding: 10px 0px;
}


/* ==========================================================================
 PAGES
========================================================================== */

form[action="pages.php"] table.list th:first-child {
    width: 4%;
}

form[action="pages.php"] table.list th:nth-child(2) {
    width: calc(100% - 60% - 4%);
}

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: 15%;
}

form[action="pages.php"] table.list td:nth-child(6) {
    font-size: 12px;
}


/* ==========================================================================
 PLUGINS
========================================================================== */

form[action="plugins.php"] table.list tbody td {
    padding-left: 0px;
}


/* ==========================================================================
 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: 0px;
}

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;
}


/* ==========================================================================
 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%;
}


/* ==========================================================================
 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: 4%;
}

form[action="staff.php"] table.list th:nth-child(2) {
    width: calc(100% - (12% * 5) - 4%);
}

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: 12%;
}

.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;
}


/* ==========================================================================
 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: calc(100% - 4% - 45%);
}

form[action="logs.php"] table.list th:nth-child(3),
form[action="logs.php"] table.list th:nth-child(4),
form[action="logs.php"] table.list th:nth-child(5) {
    width: 15%;
}

form[action="banlist.php"],
form[action="logs.php"] {
    display: inline-block;
    width: 100%;
}

.banlist .sticky.bar .content,
#system-logs .sticky.bar .content {
    margin: 18px 0 0px 0px;
    width: 100% !important;
}

form[action="logs.php"] select[name="type"] {
    width: 70px;
}

form[action="logs.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 {
    background: rgba(0, 0, 0, 0.10196078431372549);
    height: 35px;
}

form[action="logs.php"] .flush-left h2 {
    position: relative;
    top: -7px;
}


/* ==========================================================================
 TASKS
========================================================================== */

@media screen and (min-width: 761px) {
    .tasks-page #content div[style="margin-bottom:20px; padding-top:5px;"] {
        margin: -21px 0 0 0 !important;
    }
}

form[action="tasks.php"] table.list,
#ticketTable {
    text-align: left;
    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: 10%;
}

form[action="tasks.php"] table.list th:nth-child(4) {
    width: calc(100% - 55% - 4%);
}

form[action="tasks.php"] table.list th:nth-child(3),
form[action="tasks.php"] table.list th:nth-child(5),
form[action="tasks.php"] table.list th:nth-child(6) {
    width: 15%;
}

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;
}

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 i.icon-fixed-width.icon-comments-alt {
    width: 15px;
}


/* ==========================================================================
 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;
}


/* ==========================================================================
 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;
}


/* ==========================================================================
 USERS
========================================================================== */

form[action="users.php"] table.list,
#ticketTable {
    text-align: left;
    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;
}


/* ==========================================================================
 FLAGS
========================================================================== */

.rtl #languages {
    float: left;
}

#languages svg {
    /* remove */
    width: 24px;
    height: 24px;
    display: none;
}

#languages:hover {
    cursor: pointer;
}

.forms-page ul#translations .flag {
    /* Manage > Forms */
    margin: 0 3px 0px 0;
}

.forms-page ul#translations li {
    /* Manage > Forms */
    background: #f3f3f5;
}

.forms-page ul#translations li.empty {
    /* Manage > Forms */
    bottom: 14px !important;
}

.forms-page input.translatable+.flag {
    margin: 0 0 -3px 0;
}

.forms-page li[style="display: list-item;"] .flag {
    margin: 0 0px -4px 0;
}

.forms-page .translations .close {
    right: 11px;
    top: 0px;
}

.flag.flag-us {
    background: url(../../osta/svg/flags/united-states.svg) no-repeat;
}

.flag.flag-gb {
    background: url(../../osta/svg/flags/united-kingdom.svg) no-repeat;
}

.flag.flag-cad {
    background: url(../../osta/svg/flags/canada.svg) no-repeat;
}


/*.flag.flag-ar {
    background: url(../../osta/svg/flags/argentina.svg) no-repeat;
}*/

.flag.flag-ar,
html[lang="ar"] #languages {
    background: url(../../osta/svg/flags/palestine.svg) no-repeat;
}

.flag.flag-catalonia,
html[lang="ca"] #languages {
    background: url(../../osta/svg/flags/catalan.svg) no-repeat;
}

.flag.flag-dk,
html[lang="da"] #languages {
    background: url(../../osta/svg/flags/denmark.svg) no-repeat;
}

.flag.flag-de,
html[lang="de"] #languages {
    background: url(../../osta/svg/flags/germany.svg) no-repeat;
}

.flag.flag-gr,
html[lang="el"] #languages {
    background: url(../../osta/svg/flags/greece.svg) no-repeat;
}

.flag.flag-es,
html[lang="es_ES"] #languages {
    background: url(../../osta/svg/flags/spain.svg) no-repeat;
}

.flag.flag-mx,
html[lang="mx"] #languages {
    background: url(../../osta/svg/flags/mexico.svg) no-repeat;
}

.flag.flag-fr,
html[lang="fr"] #languages {
    background: url(../../osta/svg/flags/france.svg) no-repeat;
}

.flag.flag-il,
html[lang="he"] #languages {
    background: url(../../osta/svg/flags/israel.svg) no-repeat;
}

.flag.flag-it,
html[lang="it"] #languages {
    background: url(../../osta/svg/flags/italy.svg) no-repeat;
}

.flag.flag-jp,
html[lang="ja"] #languages {
    background: url(../../osta/svg/flags/japan.svg) no-repeat;
}

.flag.flag-mn,
html[lang="mn"] #languages {
    background: url(../../osta/svg/flags/mongolia.svg) no-repeat;
}

html[lang="nl"] #languages,
.flag.flag-nl {
    background: url(../../osta/svg/flags/netherlands.svg) no-repeat;
}

html[lang="**"] #languages,
.flag.flag-no {
    background: url(../../osta/svg/flags/norway.svg) no-repeat;
}

html[lang="**"] #languages,
.flag.flag-pl {
    background: url(../../osta/svg/flags/poland.svg) no-repeat;
}

html[lang="pt_PT"] #languages,
.flag.flag-pt {
    background: url(../../osta/svg/flags/portugal.svg) no-repeat;
}

html[lang="pt_BR"] #languages,
.flag.flag-br {
    background: url(../../osta/svg/flags/brazil.svg) no-repeat;
}

html[lang="ru"] #languages,
.flag.flag-ru {
    background: url(../../osta/svg/flags/russia.svg) no-repeat;
}

html[lang="th"] #languages,
.flag.flag-th {
    background: url(../../osta/svg/flags/thailand.svg) no-repeat;
}

html[lang="zh_CN"] #languages,
.flag.flag-cn {
    background: url(../../osta/svg/flags/china.svg) no-repeat;
}

html[lang="ar_EG"] #languages,
.flag.flag-eg {
    background: url(../../osta/svg/flags/egypt.svg) no-repeat;
}

html[lang="ar_SA"] #languages,
.flag.flag-sa {
    background: url(../../osta/svg/flags/saudi-arabia.svg) no-repeat;
}

html[lang="zh_TW"] #languages,
.flag.flag-tw {
    background: url(../../osta/svg/flags/taiwan.svg) no-repeat;
}

html[lang="ro"] #languages,
.flag.flag-ro {
    background: url(../../osta/svg/flags/romania.svg) no-repeat;
}

html[lang="sr_CS"] #languages,
.flag.flag-rs,
.flag.flag-cs
/*two codes, don't blame me*/

{
    background: url(../../osta/svg/flags/serbia.svg) no-repeat;
}

html[lang="sl"] #languages,
.flag.flag-si {
    background: url(../../osta/svg/flags/slovenia.svg) no-repeat;
}

html[lang="sk"] #languages,
.flag.flag-sk {
    background: url(../../osta/svg/flags/slovakia.svg) no-repeat;
}

html[lang="tr"] #languages,
.flag.flag-tr {
    background: url(../../osta/svg/flags/turkey.svg) no-repeat;
}

html[lang="uk"] #languages,
.flag.flag-ua {
    background: url(../../osta/svg/flags/ukraine.svg) no-repeat;
}

html[lang="vi"] #languages,
.flag.flag-vi {
    background: url(../../osta/svg/flags/vietnam.svg) no-repeat;
}

html[lang="az"] #languages,
.flag.flag-az {
    background: url(../../osta/svg/flags/azerbaijan.svg) no-repeat;
}

html[lang="bg"] #languages,
.flag.flag-bg {
    background: url(../../osta/svg/flags/bulgaria.svg) no-repeat;
}

html[lang="cs"] #languages,
.flag.flag-cz {
    background: url(../../osta/svg/flags/czech-republic.svg) no-repeat;
}

html[lang="et"] #languages,
.flag.flag-et {
    background: url(../../osta/svg/flags/estonia.svg) no-repeat;
}

html[lang="fa"] #languages,
.flag.flag-ir {
    background: url(../../osta/svg/flags/iran.svg) no-repeat;
}

html[lang="fi"] #languages,
.flag.flag-fi {
    background: url(../../osta/svg/flags/finland.svg) no-repeat;
}

html[lang="hr"] #languages,
.flag.flag-hr {
    background: url(../../osta/svg/flags/croatia.svg) no-repeat;
}

html[lang="hu"] #languages,
.flag.flag-hu {
    background: url(../../osta/svg/flags/hungary.svg) no-repeat;
}

html[lang="ko"] #languages,
.flag.flag-ko {
    background: url(../../osta/svg/flags/south-korea.svg) no-repeat;
}

html[lang="lt"] #languages,
.flag.flag-lt {
    background: url(../../osta/svg/flags/lithuania.svg) no-repeat;
}

html[lang="mk"] #languages,
.flag.flag-mk {
    background: url(../../osta/svg/flags/macedonia.svg) no-repeat;
}

html[lang="ms"] #languages,
.flag.flag-ms {
    background: url(../../osta/svg/flags/malasya.svg) no-repeat;
}

html[lang="id"] #languages,
.flag.flag-id {
    background: url(../../osta/svg/flags/indonesia.svg) no-repeat;
}

html[lang="sv_SE"] #languages,
.flag.flag-se {
    background: url(../../osta/svg/flags/sweden.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: -3px !important;
}

#translations li:not(.active) {
    border-bottom: 7px solid #fff;
}

#translations .icon-globe:before {
    content: "\f0ac";
    font-size: 22px;
}

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;
}

.settings-page .flag {
    background-size: 24px;
    background-position: 0px -4px;
    width: 24px;
    height: 16px;
}

div#lang-choices {
    background: #0000000d;
    margin: 0 0 20px 0;
    padding: 20px;
    width: fit-content;
}

div#header-constrain {
    margin: 0 auto;
    margin-left: 24px;
}

div#sub_nav-wrap {
    background-color: #f0faff;
    border: 0;
    margin: 0 0 0 0;
    padding: 8px 0px 8px 0px;
    height: 50px;
    line-height: 29px;
    vertical-align: bottom;
}

#nav,
#sub_nav {
    line-height: 50px;
}

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

table.list thead th a {
    display: block;
    color: #000000;
    font-weight: normal;
    font-size: 14px;
    background: url(../../osta/icons/asc-desc.svg) 100% 50% no-repeat;
    background-size: auto;
    background-size: 16px;
    transition: all 0.3s ease-in-out;
    margin: 0;
    height: 30px;
    padding: 8px;
    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;
}

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

table.list {
    clear: both;
    background: #ccc;
    margin: 2px 0;
    border-bottom: 1px solid #ccc;
}

table.list tbody td {
    margin: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-right: none;
    border-left: none;
    font-size: 14px;
    color: #686868;
    background: #fff;
    padding: 8px 6px;
    vertical-align: middle;
}

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

table.list tbody td a {
    text-decoration: none;
    font-weight: 400;
    border: 0.5px solid #000000;
    border-radius: 2px;
    background: #ffffff7a;
    margin: 0;
    font-size: 14px;
    padding: 8px;
}


/* .tickets-page #sub_nav {
    margin: 0 auto;
} */

.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 0.5px rgba(0, 0, 0, 0.2);
    border-top: initial;
    background: var(--nav-bar-bg);
    left: -11px;
    top: 43px;
}

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;
}

#sub_nav>li>a:hover,
#customQ_nav .jb-overflowmenu-menu-primary li.item:hover>a {
    color: var(--nav-bar-link);
}

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;
}

.customQ-dropdown ul li>span.newItemQ {
    padding: 0;
    margin: 0 8px 0 0;
    color: black;
}

.customQ-dropdown li.personalQ {
    border-bottom: 1px dashed var(--header-title-color);
    background-color: initial;
    margin: 4px 0;
}

.customQ-dropdown li:not(.personalQ)>span {
    color: var(--header-title-color);
    font-weight: initial;
}

.customQ-dropdown ul li:not(.personalQ):hover {
    color: var(--header-title-color);
    background-color: var(--header-bg);
}

.customQ-dropdown ul li:not(.personalQ):hover>a.truncate {
    color: var(--header-title-color) !important;
}

.customQ-dropdown ul.scroll-height {
    border-bottom: solid 0.5px rgba(0, 0, 0, 0.2);
}

.customQ-dropdown .add-queue a span {
    color: var(--nav-bar-link);
    opacity: 0.8;
}

.customQ-dropdown .add-queue a:hover span {
    color: var(--header-title-color) !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;
}

div#header a[href*="/profile.php"] svg {
    display: none;
}

@media screen and (max-width: 900px) {
    #header #nav a[href*="/profile.php"] {
        font-size: 0px;
        /* background-color: #000; */
        width: 14px;
        display: inline-block;
    }
    #header #nav a[href*="/profile.php"] svg {
        display: inline-block;
        fill: var(--header-title-color);
        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;
    }
}


/* #pjax-container {
    position: relative;
    top: -28px;
} */

.subject-bold {
    display: inline-block;
    margin: 0px 0 0px -8px;
    padding-right: 4px;
    font-size: 14px;
    color: #848484;
}

.osta_subject .pull-left {
    width: 0;
}

.overdueTicket-container {
    float: left;
    position: relative;
    left: -27px;
}

.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: 0px 0 0px -8px;
    padding-right: 4px;
    font-size: 14px;
    color: #8e8e8e;
    /*  */
}

.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: 0.5;
}

.form_table.settings_table {
    display: inline;
}

.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;
}


/*

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: 0.5px solid #ddd;
    margin: 0 20px 20px 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: url(../../osta/img/backdrops/01.png), var(--header-bg);
}

#two .inner {
    background: url(../../osta/img/backdrops/02.png), var(--header-bg);
}

#three .inner {
    background: url(../../osta/img/backdrops/03.png), var(--header-bg);
}

#four .inner {
    background: url(../../osta/img/backdrops/04.png), var(--header-bg);
}

#five .inner {
    background: url(../../osta/img/backdrops/05.jpg), var(--header-bg);
}

#six .inner {
    background: url(../../osta/img/backdrops/06.jpg), var(--header-bg);
}

#seven .inner {
    background: url(../../osta/img/backdrops/07.jpg), var(--header-bg);
}

#eight .inner {
    background: url(../../osta/img/backdrops/08.jpg), var(--header-bg);
}

#nine .inner {
    background: url(../../osta/img/backdrops/09.jpg), var(--header-bg);
}

#ten .inner {
    background: url(../../osta/img/backdrops/10.jpg), var(--header-bg);
}

#eleven .inner {
    background: url(../../osta/img/backdrops/11.jpg), var(--header-bg);
}

#twelve .inner {
    background: url(../../osta/img/backdrops/12.jpg), var(--header-bg);
}

@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;
    }
}

#custom-backdrops td {
    padding: 0;
}

.backdrop .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%);
}

.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: 0.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: 0.5 !important;
    pointer-events: none;
}

table[style="display: table;"] {
    opacity: 1 !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;
}

.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: 0px !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: 0.5;
    pointer-events: none;
}

#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: 17px;
    margin: 12px 0 4px 0;
}

.custom-text-title {
    font-size: 16px;
    font-weight: 600;
    margin: 20px 0 6px 0;
}

#custom-text-and-links input {
    margin: 10px 0 10px 0 !important;
}

#copy-clipboard {
    padding: 10px;
    background: #f3f3f5;
    border: 0.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: 14px 0 !important;
    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: 0.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,
#theme-header-options .image,
#logo-options .image {
    background: var(--header-bg);
    border: 0.5px solid #ddd;
    width: 280px;
    height: 60px;
    opacity: 0.5;
}

#theme-header-options .image img,
#logo-options .image img {
    max-width: 300px;
    height: 34px;
    margin: 12px 11px;
}

#choose-theme-options,
#custom-theme {
    opacity: 0.5;
    pointer-events: none;
}

#choose-theme-options {
    margin: 2px 0 10px;
}

#custom-theme {
    margin: 50px 0 24px;
}

.highlight #choose-theme-options,
.highlight #custom-theme {
    opacity: 1;
    pointer-events: auto;
}

#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 {
    opacity: 1 !important;
}

#background-solid-image .image {
    background-size: 569%;
    background-position: -182px 0px;
}

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-color);
    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 {
    font-size: 74%;
}

.custom-logo-link a {
    text-decoration: underline;
}

#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-logo-group input[type="file"] {
    margin-top: 20px;
}

#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;
}

#brace {
    line-height: 0;
    position: relative;
    width: 15px;
    top: 5px;
    padding-right: 50px;
}

#brace img {
    width: 18px !important;
}

#theme-header-options {
    margin: 5px 0 10px 12px;
    display: inline-block;
}

td[style="display: none;"] {
    display: initial !important;
    opacity: 0.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: 0.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 20px 20px 0 !important;
    display: inline-block;
    position: relative;
    background: #eee;
    border: 0.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: 35px;
    position: relative;
    top: 21px;
    left: -52px;
    height: 49px;
    background: initial;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.85);
}


/* ==========================================================================
 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;
    text-align: left;
    z-index: 0;
}

.index-page table.list p.checkbox {
    margin: 0 0 0 8px;
}

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: 0.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;
}

table.list .checkbox label::after {
    display: inline-block;
    position: absolute;
    width: 16px;
    height: 16px;
    left: -17px;
    top: -10px;
    margin-left: 0px;
    padding-left: 0;
    padding-top: 0;
    font-size: 11px;
    color: #555555;
}

table.list .checkbox input[type="checkbox"] {
    opacity: 0;
    z-index: 1;
    margin-left: 0px !important;
}

table.list .checkbox input[type="checkbox"]:checked+label::after {
    content: "";
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgZmlsbD0iIzRjNTE1NiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIxLDdMOSwxOUwzLjUsMTMuNUw0LjkxLDEyLjA5TDksMTYuMTdMMTkuNTksNS41OUwyMSw3WiIgLz48L3N2Zz4=) center center no-repeat;
    background-size: 16px;
}

table.list .checkbox {
    /* margin-top: 0; */
}


/* new reply icon */

#new-reply-icon {
    float: left;
    width: 14px;
    height: 14px;
    margin: 3px 6px 0 0;
}

.dot {
    height: 10px;
    width: 10px;
    background-color: #88c80b;
    border-radius: 50%;
    display: none;
}

.new-reply-waiting .dot,
.ticket-status .dot {
    display: inline-block;
    animation: slowbounceIn 2s ease-in-out 3s infinite;
}

@keyframes slowbounceIn {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    60% {
        transform: scale(1.3);
        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;
}

td.osta_ticket span {
    display: none;
}

div[style="font-weight:bold"] #new-reply-icon .dot {
    display: inherit;
}

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


/* ==========================================================================
 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: 20px;
    right: 20px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: var(--header-bg);
    color: var(--header-title-color);
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
    opacity: 0;
    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-color);
}