ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / centosnipponia / public_html / ticketing.nipponia.com / osta / css

@charset "utf-8";
/* CSS Document */
/*
/*      STAFF - desktop
*/
table.list tbody td a {
    font-weight: 500;
}
table.list tbody tr:nth-child(2n+1) td {
    background-color: #ffffff;
}
table.list tbody tr:nth-child(2n+1) td {
    background-color: #f0faff;
}
table.list tbody tr.highlight:nth-child(2n+1) td {
    background-color: #dddddd;
}
form table.list + div b {
    margin-right: 5px;
}

/* ==========================================================================
 GLOBAL STYLES
========================================================================== */
html {
    background: var(--nav-bar-bg);
}
body {
    background: #f3f3f5;
}
body,
.thread-body {
	font-family: 'Open Sans', sans-serif;
    font-size: 14px!important;
    color: #4c5156;
}
a {
    color: #128dbe;
}
a:hover, .link:hover {
    text-decoration: none !important;
}
b {
    font-weight: 600;
}
.input.attached.focus {
	outline-offset: initial;
	outline-style: initial;
	outline-width: initial;
	outline-color: initial;
}
button {
    border-width: 1px;
}
button:focus { 
	outline: none; 
}
select:focus,
input:focus {
    outline: .5px solid #606d7f;
}
input[type='radio']:checked,
input[type='checkbox']:checked {
	filter: hue-rotate(335deg) opacity(.9);
	-webkit-filter: hue-rotate(335deg) opacity(.9);
}
code {
    color: #029200;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*description*/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ==========================================================================
 STICKYBAR
========================================================================== */
.sticky.bar.opaque,
.sticky.bar.fixed,
.sticky.bar.fixed .flush-right {
    background-color: var(--stickybar);
}
.sticky.bar.fixed {
    box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.1);
}
.sticky.bar.fixed {
    margin-top: 0;
    padding: 1% !important;
    z-index: 999999;
}
.sticky.bar.fixed .valign-helper{
    margin: 0 !important;
}
.sticky.bar.fixed .action-button.muted[data-dropdown="#sort-dropdown"] {
    margin: 0 0 0 6px;
}
.scroll-up {
    display: none;
}
.sticky.bar.fixed .pull-left h2, 
.sticky.bar.fixed .pull-left h2 a,
.sticky.bar.opaque.fixed .pull-left h2,
.sticky.bar.opaque.fixed .pull-left h2 a {
    color: #fff;
}
.sticky.bar.opaque.fixed .pull-left {
	float: left;
    margin: 0
}
.sticky.bar.fixed .action-button,
.sticky.bar.fixed .green.button {
    border: .5px solid #ffffff;
    color: #ffffff;
    text-shadow: none;	
    background-color: var(--stickybar) !important;
}
.sticky.bar.opaque.fixed .action-button i.icon-caret-down, .action-button.muted i.icon-caret-down {
    border-left: 0;
    margin-left: 0;	
}
.sticky.bar.fixed .sort-button-text {
    color: #fff;
    font-weight: 100;
}
.sort-button-text {
	text-shadow: none;
}
.sticky.bar .content {
    margin: auto;
    width: 100% !important;
    max-width: 1200px !important;
}
.sticky.bar.fixed .flush-left, .sticky.bar.fixed .pull-left.flush-left {
    display: inline-block !important;
}
.sticky.bar.fixed .merged-parent,
.sticky.bar.fixed .merged-child,
.sticky.bar.fixed .flush-left h2 a {
    color: var(--header-title);
    border-color: var(--header-title);
}
.sticky.bar.fixed {
    padding: 0 0;
    min-height: unset !important;
}
.sticky.bar.fixed h2:first-child {
    margin: 0 0;
    position: unset !important;
}
.sticky.bar.fixed .configureQ i.icon-cog {
	display: none;
}	
.users .sticky.bar.fixed .pull-right {
    margin-top: 0;
}
.pull-right.flush-right.page-top {
    float: right;
}
.rtl .pull-right.flush-right.page-top {
    float: left;
}

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

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

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

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

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

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

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

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

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

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

ul.tabs li a {
    padding: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

/* ==========================================================================
 THEME PAGE
========================================================================== */
#color-themes,
#custom-theme {
    width: 100%;
}
#color-themes tr:first-child td:first-child,
#custom-theme tr:first-child td:first-child {
    width: 100%;
    /* background: #ccc; */
}
#choose-theme.show,
#custom-theme.show {
    opacity: 1;
    pointer-events: auto;
}
#choose-theme.hide,
#custom-theme.hide {
    opacity: .4;
    pointer-events: none;
}
@media (max-width: 1000px) {
	table#color-themes {
		width: 100%;
	}
}
.tab_content h2 {
    line-height: 28px;
}
#color-themes h2 {
    margin: 0 0 -10px 0;
}
.theme-card {
    width: 240px;
    height: 126px;
    background: #ddd;
    border: .5px solid #ddd;
    z-index: 1;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.12);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    float: left;
    margin: 20px 20px 15px 20px;
}
.rtl .theme-card {
	float: right;
    margin: 20px 30px 15px 15px;	
}
.theme-card-lid {
	opacity: 1;
	width: 240px;
    height: 126px;
	background: #fff;
	overflow: hidden;
	position: relative;
	top: 0; 
	z-index: 2;
	border-radius: 2px;  
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	transition: all 0.3s ease;
	-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);  
    background-size: 160px;
    background-repeat: no-repeat;
    background-position: center;
}
.theme-card:hover > .theme-card-lid { 
    top: -53.33px;
    background-size: 120px;
    background-position: center 67px;
}
.theme-card-bottom {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    position: relative;
    top: -53px;
    height: 53px;
    z-index: 1;
    color: #999;
    font-weight: 500;
    width: 100%;
    background: #eee;
}
.theme-preview {
    float: left;
    padding: 20px 0 20px 20px;
}
.switch {
	float: right;
	padding: 20px 20px 20px 0;
}
.switch:after {
    clear: both;
}
html[lang="ru"] a.pink {
    font-size: 75%;
    display: table-caption;
}
html[lang="ru"] .theme-preview {
    padding: 20px 0 0 10px;
    position: relative;
    bottom: 6px;
}
html[lang="ru"] .theme-preview a {
    font-size: 80%;
    display: table-caption;	
}
html[lang="ru"] .switch {
    padding: 20px 10px 20px 0;
    font-size: 80%;
}
.use-custom-theme {
	display: inline-block;
    margin: 20px 15px 15px 20px;
    padding: 16px;
    color: #4c5156 !important;
    text-transform: uppercase;
    opacity: 1;
    width: fit-content;
    background: #fff;
    overflow: hidden;
    z-index: 2;
    font-weight: 400;
    border-radius: 2px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.12);
}
.rtl .use-custom-theme {
    margin: 20px 30px 15px 15px;
}
.use-custom-theme input[type="radio"] {
    margin: 0 0 0 6px ;
}
.rtl .use-custom-theme input[type="radio"] {
    margin: 0 6px 0 0 ;
}
.use-custom-theme:hover {
    transition: all 0.3s ease;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}
button[value="Save Theme"],
button#save-custom-colors {
    margin: 15px 30px 20px 20px;
    padding: 14px 20px 10px 20px!important;
    font-size: 16px;
    color: #3c763d;
    background-color: #d0e9c6;
    border: initial;
}
button[value="Save Theme"]:hover,
button#save-custom-colors:hover {
    background: #b4e6a0 !important;
    color: #2a3e2a !important;
    border: initial;
	box-shadow: unset;
}
.rtl button[value="Save Theme"],
.rtl button#save-custom-colors {
    margin: 15px 30px 20px 15px;
}
#color-theme input.switch:empty ~ label {
    top: 3px;
}
#theme-black {
    background-image: url("../../osta/css/themes/black/black-theme.svg");
}
#theme-mint {
    background-image: url("../../osta/css/themes/mint/mint-theme.svg");
}
#theme-ice {
    background-image: url("../../osta/css/themes/ice/ice-theme.svg");
}
#theme-soft {
    background-image: url("../../osta/css/themes/soft/soft-theme.svg");
}
#theme-pink {
    background-image: url("../../osta/css/themes/pink/pink-theme.svg");
}
#theme-earth {
    background-image: url("../../osta/css/themes/earth/earth-theme.svg");
}
#theme-brown {
    background-image: url("../../osta/css/themes/brown/brown-theme.svg");
}
#theme-blue {
    background-image: url("../../osta/css/themes/blue/blue-theme.svg");
}
#theme-cool {
    background-image: url("../../osta/css/themes/cool/cool-theme.svg");
}
#theme-bright {
    background-image: url("../../osta/css/themes/bright/bright-theme.svg");
}
#logo-options,
#additional-options,
#theme3 {
    margin: 0 0 10px 0;
}
#theme4 {
    margin: 20px 0 0 0;
}
#theme5 {
    margin-top: 44px;
}
#theme6 {
    margin-top: 40px;
}
#theme7 {
    margin-top: 40px;
}
table#theme5 a {
    transition: all 0.3s ease;	
    font-size: 90%;
    border: .5px solid;
    background: #fff;
    padding: 0 4px 1px 4px;
	margin-bottom: 10px;		
}
table#theme5 a:hover {
    transition: all 0.3s ease;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.0);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.0);
    position: relative;
    top: -1px;
    border: .5px solid #659505;
    color: #659505;	
}
#additional-options input[type=text] {
    margin: 0 5px 0 0 !important;
    height: 33px !important;
	padding: 0 0 0 8px !important;
}
#custom-theme {
    margin-top: 20px;
}
#color-pickers {
    padding: 0 0 0 20px;
}
.rtl #color-pickers {
    padding: 0 20px 0 0;
}
input.form-control.input-lg {
    padding: 0 0 0 8px !important;
    margin: 0 0 10px 0;
}
.rtl input.form-control.input-lg {
    padding: 0 8px 0 0 !important;
}
#logo-options input[type="radio"] {
    margin: 0 10px 0 4px;
}
.rtl #logo-options input[type="radio"] {
    margin: 0 4px 0 10px;
}
#additional-options input[type="radio"] {
    margin: 0 10px 0 4px;
}
.rtl #additional-options input[type="radio"] {
    margin: 0 4px 0 10px;
}
#logo-options tr:first-child td,
#additional-options tr:first-child td,
#theme3 tr:first-child td,
#theme4 tr:first-child td {
    padding: 0;
}
#logo-options td,
#additional-options td,
#theme2a tr:nth-child(2) td,
#theme3 td,
#theme4 td,
#theme5 tr:nth-child(2) td,
#theme6 tr:nth-child(2) td,
#theme7 tr:nth-child(2) td {
    padding: 0 0 20px 20px;
}
.rtl #logo-options td,
.rtl #additional-options td,
.rtl #theme2a tr:nth-child(2) td,
.rtl #theme3 td,
.rtl #theme4 td,
.rtl #theme5 tr:nth-child(2) td {
    padding: 0 20px 20px 0;
}
#custom-header-bg-button, 
#theme-title-button,
#theme-subtitle-button,
#mobile-text-button,
#mobile-link-button,
#language-bar-save-button,
#logo-options-save-button {
    margin: 0;
    height: 32px !important;
    min-width: 204px;
    font-size: 16px;
    color: #515d6d;
    border: initial !important;
    background: #dcdfe2 !important;
}
#custom-header-bg-button:hover, 
#theme-title-button:hover,
#theme-subtitle-button:hover,
#mobile-text-button:hover,
#mobile-link-button:hover,
#language-bar-save-button:hover,
#logo-options-save-button:hover {
	background: #b4e6a0 !important;
    color: #2a3e2a !important;
    border: initial;
    box-shadow: unset;
}
#theme-title-button:before, 
#theme-subtitle-button:before,
#mobile-text-button:before,
#mobile-link-button:before {
    width: 20px;
    height: 20px;
    background-size: 10px !important;
    float: left;
    padding: 0 0 0 2px;
    position: relative;
    top: -3px;
}
#custom-text-and-links button {
    margin: 0 0 0 7px;
}
#theme6 button,
#theme7 button {
	background: #dcdfe2;
    color: #6d7989;
    border: medium none;
    margin: 0px auto;
    left: 0;
    right: 0;
    bottom: 40px;
    width: fit-content;
    text-align: center;
    padding: 14px 30px 14px 30px;
    display: inline-block;
    border-radius: 3px;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 13px;
}
#theme6 button:hover,
#theme7 button:hover {
    background: #c9cdd0;
    color: #343a42;
}	
button#old-client {
    margin-right: 16px;
    margin-bottom: 10px;
    background: #ff7563;
    color: #fff;
}
button#old-staff {
    background: #8391A3;
	color: #fff;	
}
form#header-bg {
    margin: 3px 30px 15px 30px;
}
#show-errors {
	position: absolute;
    top: 29px;
    right: 29px;
    width: 354px;
    border: 1px solid #cdcdcd;
    border-radius: 4px;
    padding: 20px;
}
@media screen and (max-width: 1145px) {
#show-errors {
		width: 25vw;
	}
}
@media screen and (max-width: 1056px) {
#show-errors {
		display: none;
	}
}
.show-php-errors {
    vertical-align: top;
    line-height: 32px;
    font-size: 18px;
    height: 42px;
}
#show-errors-title {
    position: relative;
    top: -7px;
}
#logo-options .checkcontainer,
#additional-options .checkcontainer {
    margin: 0 20px 0 0;
}
#custom-text-and-links .responsive-div-theme {
    margin: 0 0 0 20px;
}
.responsive-div-theme {
     width:100%;
}
 .responsive-div-theme div {
     -moz-box-sizing:border-box;
     box-sizing:border-box;	 
}
 #one-theme, #two-theme {
     width:50%;
     float:left;
     height:100%;
}
 #two-theme {
}
.responsive-div-theme form {
    margin: 0 0 9px 0;
}
 @media screen and (max-width: 850px) {
     #one-theme, #two-theme {
         width:auto;
         float:none;
    }
}
a#subnav7.theme {
   -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; 
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -8px, 0);
    transform: translate3d(0, -8px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
  90% {
    -webkit-transform: translate3d(0,-2px,0);
    transform: translate3d(0,-2px,0);
  }
}
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -8px, 0);
    transform: translate3d(0, -8px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
  90% {
    -webkit-transform: translate3d(0,-2px,0);
    transform: translate3d(0,-2px,0);
  }
}
#theme-picker li {
    height: 26px;
    font-size: 18px;
}
#theme-picker input[type="radio"] {
    margin: 0 3px 0 0;
}
/* Custom CSS Code Mirror */
.cm-s-lucario span.cm-property,
.cm-s-lucario span.cm-variable-2 {
    color: #a1bad2 !important;
}
.cm-s-lucario span.cm-atom, 
.cm-s-lucario span.cm-number {
    color: #9a7bc7 !important;
}
.cm-s-lucario span.cm-string, 
.cm-s-lucario span.cm-string-2 {
    color: #c5c5c5 !important;
}
/* Custom labels: the container */
.checkcontainer {
    position: relative;
    cursor: pointer;
    padding-left: 27px;
    -webkit-user-select: none; /* Chrome, Opera, Safari */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}
/* Hide the browser's default checkbox */
.checkcontainer input {
  	position: absolute;
	opacity: 0;
	cursor: pointer;}
/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}
/* On mouse-over, add a grey background color */
.checkcontainer:hover input ~ .checkmark {
    background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.checkcontainer input:checked ~ .checkmark {
    background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Show the checkmark when checked */
.checkcontainer input:checked ~ .checkmark:after {
    display: block;
}
/* Style the checkmark/indicator */
.checkcontainer .checkmark:after {
    left: 10px;
    top: 6px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/* Create a custom radio button */
.radiobtn{
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #eee;
    border-radius: 50%;
    border: .5px solid #b8bdbf;
    will-change: background-color!important;
    -webkit-transition: all .3s ease-out!important;
    -moz-transition: all .3s ease-out!important;
    -o-transition: all .3s ease-out!important;
    -ms-transition: all .3s ease-out!important;
    transition: all .3s ease-out!important;	
}
.rtl .radiobtn {
    left: initial;
    right: 0;
}
.switch .radiobtn {
    top: 0;
}
/* On mouse-over, add a grey background color */
.checkcontainer:hover input ~ .radiobtn{
  	background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.checkcontainer input:checked ~ .radiobtn{

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

}
input[type=search]:focus {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

BACKDROPS

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

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

.ie-redirect-table,
.consent-message-table {
    margin: 20px 0 50px 0;
}
.scroll-table {
    margin-top: 20px;
	margin-bottom: 50px;
}
.option-desktop-scroll,
.option-mobile-scroll {
    font-size: 18px;
}
#scroll-img-background {
    max-width: 400px !important;
    background-image: url(../img/custom-text/scroll-to-top.png) !important;
    height: 185px;
    background-repeat: no-repeat !important;
    background-position-y: 20px !important;
}
#scroll-spacer {
    height: 4px !important;
    font-size: 1px;
}
.option-desktop-scroll, 
.option-mobile-scroll {
    font-size: 15px;
}
label[for="radio98"],
label[for="radio99"] {
    transform: scale(.7);
}
.option-ie-redirect-url input[type="text"] {
    width: 97% !important;
    padding: 0 0 0 8px !important;
	border: .5px solid #bfbfbf;
}
#consent-message-label-container,
#consent-message-text-container {
    margin-top: 10px;
}
textarea[name="consent-message"] {
    width: 97%;
    height: 47px;
    border: .5px solid #bfbfbf;
}
.consent-message-button-text-input input {
	width: 33%;
    border: .5px solid #bfbfbf;	
}
#custom-text-and-links input {
    margin: 10px 0 10px 0 !important;
}
#copy-clipboard {
    padding: 10px;
    background: #f3f3f5;
    border: .5px solid #ddd;
    width: fit-content;
}
#copy-clipboard .code-green {
    color: #828282;
}
#get-support-container {
    padding-top: 14px;
}
#copy-clipboard-btn, 
a#osta-settings-support {
    margin: 10px 0;
    box-shadow: none;
    padding-top: 14px;
    padding-bottom: 14px;
    color: #6d7989;
    border: initial !important;
    background: #dcdfe2;
    letter-spacing: 1.6px;
    font-weight: 700;
    font-size: 13px;
    width: 100%;
    text-align: center;
    border-radius: 3px;
}
#copy-clipboard-btn:hover,
a#osta-settings-support:hover {
    background: #c9cdd0;
    color: #343a42;
}
.form_table.settings_table img {
    box-shadow: initial !important;
    border: .5px solid #ddd;
}
#theme-header-options .container,
#logo-options .container {
    float: left;
    margin: 10px 10px 16px 0;
    padding: 10px;
    border: 1px solid #ddd;
    width: 372px;
}
#theme-header-options .container {
    margin: 10px 10px 10px 0;
}
#theme-header-options .container {
    margin-right: 31px;
}
#theme-header-options .left,
#logo-options .left {
    width: 290px;
}
#theme-header-options .right,
#logo-options .right {
    width: 68px;
    vertical-align: middle;  
}
#theme-header-options .title,
#logo-options .title {
    font-size: 18px;
    margin: -2px -2px 5px 2px;
    width: 278px;
}
#logo-options .title {
    margin: -3px -2px 7px 2px;
}
#theme-header-options .image img,
#logo-options .image img {
    max-width: 300px;
    height: 34px;
    margin: 12px 11px;
}
#choose-theme-options,
#custom-theme {
    opacity: .5;
    pointer-events: none;
}
#choose-theme-options {
    margin: 2px 0 10px;
}
#custom-theme {
    margin: 50px 0 24px;
}

#theme-header-options .image,
#theme-header-options .image,
#logo-options .image {
    background: var(--header-bg);
    border: .5px solid #ddd;
    width: 280px;
    height: 60px;
	opacity: .5;	
}
#print-logo .print-logo {
	opacity: .5;	
}
.highlight #choose-theme-options,
.highlight #custom-theme,
.highlight #logo-options,
#print-logo.highlight .print-logo  {
    opacity: 1;
    pointer-events: auto;	
}
.print-logo-upload input[type="file"] {
    margin-top: 10px;
    width: 273px !important;
}
#show-image #logo-upload .title {
    margin-top: 0;
}
.print-logo {
    max-width: 279px;
    height: 368px;
    background-image: url(../../osta/img/custom-text/print-logo-preview.png);
    background-repeat: no-repeat;
	border: .5px solid #e2e2e2 !important
}
.print-logo img {
	height: 18px !important;
    width: auto !important;
    margin: 10px 0 0 10px;
}
.print-logo {
    margin: 0 0 6px 0;
}
#print-logo-placeholder #print-logo {
    margin-top: 50px;
}
.print-logo-upload {
    display: none;
	padding: 0 !important;	
}
.highlight .print-logo-upload {
    display: inline-block;
}
#background-solid-image.highlight,
#background-solid-color.highlight,
#default-logo.highlight,
#custom-text.highlight,
#custom-logo.highlight {
    border: 1px solid #aaa !important;
}
#background-solid-image.highlight .image,
#background-solid-color.highlight.highlight .image,
#default-logo.highlight .image,
#custom-text.highlight .image,
#custom-logo.highlight .image,
#logo-options.highlight .print-logo img {
  opacity: 1 !important;
}
#background-solid-image .image {
    background-size: 569%;
    background-position: -182px 0;
}
input.switch:empty {
    opacity: 0;
    position: absolute;
    top: 22px;
}
input.switch:empty ~ label {
    position: relative;
    float: left;
    line-height: 3em;
    text-indent: 4em;
    margin: 0;
    cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
input.switch:empty ~ label:before,
input.switch:empty ~ label:after {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    content: '\2718';
    text-indent: 2.4em;
    color: #aaa;
    background-color: #aaa;
    width: 4em;
    height: 2em;
    border-radius: 4em;
}
input.switch:empty ~ label:before {
    box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.2), inset -1px 1px 5px rgba(0, 0, 0, 0.2);
}
input.switch:empty ~ label:after {
    content: '';
    background: #f2f2f2;
    width: 1.8em;
    height: 1.8em;
    border-radius: 1.8em;
    top: 0.1em;
    left: 0.2em;
	box-shadow: inset 0 -0.1em 0 rgba(0,0,0,0.1);
	-webkit-transition: all 100ms ease-in;
	transition: all 100ms ease-in;
}
/* toggle on */
input.switch:checked ~ label:before {
	content: '';
    text-indent: 0.5em;
    color: #7cbd7e;
    background-color: #7cbd7e;
}
input.switch:checked ~ label:after {
    margin-left: 1.91em;
}
/* focus styles */
input.switch:focus ~ label {
	color: #000;
}
input.switch:focus ~ label:before {
	box-shadow: 0 0 0 1px #999;
}
#theme-header-options .image svg,
#default-logo .image svg {
	height: 34px;
    fill: var(--header-title);
    padding: 13px;
}
#logo-type {
    width: 445px;
}
#logo-type table {
    margin-left: 20px !important;
}
#logo-type #custom-logo img {
    border: initial;
}
.custom-logo-group {
    vertical-align: top;
}
.custom-logo-link a {
    font-size: 14px !important;
    white-space: nowrap;
    /* text-decoration: underline; */
    line-height: 26px;
}
#custom-logo-container {
    margin-bottom: 17px;
}
#custom-logo-container td {
    vertical-align: top;
    /* padding-top: 8px !important; */
}
.custom-logo-group img {
    box-shadow: initial !important;
    border: 1px solid #ddd;
}
#show-image img {
	border: 1px solid #aaa !important;
    background: var(--header-bg);
    margin: 6px;
    height: 72px;
}
#logo-upload h2 {
    margin-top: 15px;
}
#custom-text #header-text {
    width: 264px;
    margin: 11px 0 11px 11px;
}
#custom-text #header-text {
    display: inline-block;
}
#theme-info {
    background: url(../img/osticket-awesome-mobile.png) no-repeat #FFFFFF;
    background-size: 359px;
    background-position: bottom right;
}
td.info-column {
    max-width: 466px;
}
#brace {
    line-height: 0;
    position: relative;
    width: 15px;
    top: 5px;
    padding: 0 25px 0 15px;
}
#brace img {
    width: 18px !important;
}
#theme-header-options {
	margin: 5px 0 10px 12px;
    display: inline-block;
}
td[style="display: none;"] {
    display: initial !important;
    opacity: .5 !important;
    pointer-events: none;
}
td[style="display: table;"] {
  opacity: 1 !important;
}

/* LOGO OPTIONS > HEADER BACKGROUND OPTIONS */
.options-header-image .container,
.options-header-color .container {
    float: left;
    margin: 10px 10px 10px 0;
    padding: 10px;
    border: 1px solid #ddd;
    width: 372px;
}
#background-solid-image .image
#background-solid-color .image {
    background: var(--header-bg);
    border: .5px solid #ddd;
    width: 280px;
    height: 60px;
}
.options-header-image .title,
.options-header-color .title {
    font-size: 18px;
    margin: 0 0 20px 0;
    width: 290px;
}
input[name="selected-logo"] {
    display: none;
}
input[name="selected-logo-scp"] {
	position: absolute;
    visibility: hidden;
}
.logo-image-container {
    width: fit-content;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    display: inline-block;
    position: relative;
    background: #eee;
    border: .5px solid #ddd;
    outline: 2px solid #fff;
}
input[type="radio"]:checked + div {
    outline: 1px solid #5a5a5a;
}
.checkbox-container input[type="checkbox"] {
	position: absolute;
    visibility: hidden;
}
.logo-delete-icon-container .checkbox-container {
	width: 1px;
    height: 1px;
    position: relative;
    top: 21px;
    background: initial;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.85);
}
table#custom-logo-column-inner {
    max-width: 374px;
}
td#custom-logo-column {
    float: none;
    margin: 0 0 0 20px;
    padding: 13px 0 12px 0 !important;
    border: 1px solid #ddd;
    width: 372px;
}
.logo-delete-icon-container label.inline.checkbox {
    display: inline-block;
    width: 1px;
    position: relative;
    left: -32px;
}
#custom-logo-column .indent {
    padding-left: 12px !important;
}
#thank-you img {
	width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
    top: 1px;
    margin: 0 0 0 6px;
}

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

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

/* ==========================================================================
 WARNING BAR
========================================================================== */
#warning_bar {
    margin: 0;
    width: 100%;
    padding: 0;
    height: 36px;
    border: initial;
    background-image: initial;
    background-color: #000;
    position: fixed !important;
    top: 0;
    z-index: 99;
    color: #fff;
    display: none;
	-webkit-box-shadow: 0px 1px 0px 0px rgba(0,0,0,1);
	-moz-box-shadow: 0px 1px 0px 0px rgba(0,0,0,1);
	box-shadow: 0px 1px 0px 0px rgba(0,0,0,1);
}
#warning-inner {
    display: table;
    margin: 6px auto;
    background: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23ffffff' d='M19%2C19H5V5H19M19%2C3H5A2%2C2 0 0%2C0 3%2C5V19A2%2C2 0 0%2C0 5%2C21H19A2%2C2 0 0%2C0 21%2C19V5C21%2C3.89 20.1%2C3 19%2C3M11%2C15H13V17H11V15M11%2C7H13V13H11V7' /%3E %3C/svg%3E");
	background-repeat: no-repeat;
    height: 20px;
    padding: 4px 0 0 28px;
}
@media only screen and (min-width:761px){	
	#warning_bar {
		display: inline-block;
	}
	#warning_bar + #header {
		margin-top: 37px !important;
	}
	#warning_bar + #header + #right-menu + #sidr-right + #pjax-container #sub_nav-wrap {
		margin: 98px 0 0 0;
	}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Color Theme Options*/

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

/* Custom Text and Links Options */

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

/* Custom CSS */

/* Theme Information */

/* My Account Profile > Dark Mode */

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

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

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

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

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

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

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

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

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

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

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

[+] ..
[-] hamburger.css [edit]
[-] staff-mobile.css [edit]
[-] staff-desktop.css [edit]
[-] sidr.css [edit]
[+] themes
[-] client-desktop.css [edit]
[-] avatars.css [edit]
[-] dark-mode.css [edit]
[-] setup.css [edit]
[-] client-mobile.css [edit]
[-] svg.css [edit]
[-] .htaccess.disabled [edit]