body {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  letter-spacing: 0.15px;
  -webkit-font-smoothing: antialiased;
}

body,
html {
  background: #fafafa;
  margin: 0;
  padding: 0;
}

a {
  color: #4b5563;
  text-decoration: none;
  transition: all 0.2s ease;
}

a:hover {
  color: #fdc403;
  text-decoration: underline;
}

textarea {
  border: 1px solid #d0d0d0 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 0.9375rem !important;
  font-family: "Open Sans", sans-serif !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

textarea:focus {
  outline: none !important;
  border-color: #fdc403 !important;
  box-shadow: 0 0 0 3px rgba(253, 196, 3, 0.15) !important;
}

div#header a {
  order: unset;
  color: inherit;
}

.centered {
  text-align: center;
}

.full-width {
  width: 100%;
  box-sizing: border-box;
}

.full-width:after {
  content: "";
  display: table;
  clear: both;
}

.headline {
  margin-bottom: 15px;
}

.clear {
  clear: both;
}

.big {
  font-size: 110%;
}

.faded {
  color: rgba(0, 0, 0, 0.5);
}

.faded b {
  color: rgba(0, 0, 0, 0.75);
}

.faded strong {
  color: rgba(0, 0, 0, 0.6);
}

.faded-more {
  color: rgba(0, 0, 0, 0.35);
}

time[title]:hover {
  text-decoration: underline;
}

a time {
  color: initial;
}

.small[class^="icon-"],
.small[class*=" icon-"] {
  vertical-align: baseline;
  padding-left: 2px;
  font-size: 80%;
}

.strike {
  text-decoration: line-through;
  color: red;
}

.canned_attachments label,
.canned_attachments span .uploads label {
  padding: 3px;
  padding-right: 10px;
}

.canned_attachments label {
  padding-right: 3px;
}

#breadcrumbs {
  color: #333;
  margin-bottom: 15px;
  background-color: #f4faff;
  padding: 8px;
}

#breadcrumbs a {
  color: #555;
}

.banner {
  margin: 0;
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 10px;
  color: #333;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}

#notice_bar {
  margin: 0 0 10px;
  padding: 12px 16px 12px 16px;
  height: auto;
  line-height: 1.4;
  border: 1px solid #fde68a;
  border-left: 4px solid #fdc403;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.875rem;
  font-family: "Open Sans", sans-serif;
  background-image: none;
}

#warning_bar {
  margin: 0 0 10px;
  padding: 12px 16px 12px 16px;
  height: auto;
  line-height: 1.4;
  border: 1px solid #fde68a;
  border-radius: 10px;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.875rem;
  font-family: "Open Sans", sans-serif;
}

#error_bar {
  margin: 0 0 10px;
  padding: 12px 16px 12px 16px;
  height: auto;
  line-height: 1.4;
  border: 1px solid #e8b4b4;
  border-left: 4px solid #c0392b;
  border-radius: 8px;
  background: #fdf2f2;
  color: #7a2020;
  font-size: 0.875rem;
  font-family: "Open Sans", sans-serif;
  background-image: none;
}

#container {
  display: flex;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3.5rem;
  background: #fff;
  border-bottom: none;
  box-shadow: none;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 40;
}

#logo {
  display: block;
  text-decoration: none;
  outline: none;
}

#logo img {
  max-height: 50px;
  max-width: 300px;
  height: auto;
  width: auto;
  vertical-align: middle;
  outline: none;
  border: none;
}

.valign-helper {
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

#header p {
  order: 2;
  display: block;
  width: auto;
  text-align: center;
  float: none;
  margin: 0;
}

#nav,
#sub_nav {
  clear: both;
  margin: 0;
  padding: 0 20px;
  white-space: nowrap;
}

#nav .active,
#sub_nav > li {
  padding: 0;
  list-style: none;
  display: inline;
}

#nav {
  background: #0f4c5c;
  padding-top: 4px;
  z-index: 200;
}

#nav .active,
#nav .inactive {
  display: inline-block;
  text-align: center;
  position: relative;
}

#nav .inactive a {
  display: block;
}

#nav .active a {
  color: #000;
  font-weight: bold;
}

#nav > li + li {
  margin-left: 8px;
}

#nav li:hover a {
  color: #000;
}

#nav li.active {
  background-color: #fff;
  border-radius: 5px 5px 0 0;
}

#nav li.inactive:hover {
  background-color: #fff;
  border-radius: 5px 5px 0 0;
}

#nav li.inactive > ul {
  width: 230px;
  background: #fff;
  margin: 0;
  padding: 10px 0;
  position: absolute;
  left: -1px;
  z-index: 500;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
  display: block;
  visibility: hidden;
  opacity: 0;
  transition:
    visibility 0s linear,
    opacity 0.1s linear;
}

#nav .inactive li {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

#nav li.inactive:hover > ul {
  visibility: visible;
  opacity: 1;
  transition-delay: 0.25s;
}

#nav ul li a {
  padding: 8px 10px 8px 34px !important;
}

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

#nav .inactive li a:hover {
  color: #e36414;
  background-color: #eee;
}

/* Custom queue fields with background color should fill cell */

.offset {
  position: relative;
}

.offset .fill {
  display: block;
  padding: 4px !important;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

/***********************************************************************
                 Start Custom Queues Menu System
/***********************************************************************/

#sub_nav {
  background: #fff;
  border: none;
  border-bottom: 2px solid #eee;
  border-radius: 0;
  box-shadow: none;
  padding: 0 1.5rem;
  margin: 0;
  width: 100%;
  min-height: 3.5rem;
  list-style: none;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  overflow: visible;
}

#customQ_nav {
  display: block;
  width: 100%;
}

#sub_nav > ul {
  margin-top: 0;
}

#sub_nav > li + li > a {
  margin-left: 10px;
}

#customQ_nav .jb-overflowmenu-menu-primary li.item {
  position: relative;
  display: inline-block;
}

#sub_nav > li > a,
#customQ_nav .jb-overflowmenu-menu-primary li.item > a {
  display: inline-block;
  padding: 5px 10px 5px 21px;
  background-position: 0 50%;
  background-repeat: no-repeat;
  color: #000;
  margin: 0 10px;
}

#customQ_nav .jb-overflowmenu-menu-primary li.item:hover {
  color: #e36414;
}

#sub_nav > li > a:hover,
#customQ_nav .jb-overflowmenu-menu-primary li.item:hover > a {
  color: #e36414;
  text-decoration: none;
}

#sub_nav a.active,
#sub_nav li.active > a,
#sub_nav
  li.child.active
  > a
  #customQ_nav
  .jb-overflowmenu-menu-primary
  li.item
  > a.active {
  font-weight: bold;
}

#sub_nav li.child.active > a {
  font-weight: 500;
}

#customQ_nav .jb-overflowmenu-menu-primary li.item a > i {
  vertical-align: baseline;
  font-size: 80%;
  padding-left: 2px;
  margin: 4px 0 0 10px;
}

/**********************initiate Custom Queues Dropdown******************/

#customQ_nav ul li.item div.customQ-dropdown {
  display: none;
}

#customQ_nav ul li.item:hover div.customQ-dropdown {
  display: block;
}

/***************************************
          Custom Q Dropdown
****************************************/

/*** custom Queue global settings ***/

.customQ-dropdown * {
  border-bottom: none;
}

.customQ-dropdown a:only-of-type {
  padding-top: 2px;
  padding-bottom: 2px;
  display: inline-block;
  text-decoration: none;
}

.customQ-dropdown a.truncate {
  min-width: 140px;
}

.customQ-dropdown ul li {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: normal;
  border: none;
  border-bottom: none;
}

.customQ-dropdown li h4,
.customQ-dropdown li.top-level {
  margin: 0;
  background-color: #eee;
  color: #bbb;
  text-align: left;
}

.customQ-dropdown li h4 {
  padding: 2px 8px;
}

.customQ-dropdown li.personalQ {
  font-size: 1px;
  border-bottom: 2px dashed #eee;
  background-color: #fff;
  margin: 4px 0;
}

.customQ-dropdown li:not(.personalQ) > span {
  color: #999;
  font-weight: 600;
  margin-right: 0;
}

.customQ-dropdown li > span {
  color: #999;
  font-weight: 600;
  margin-right: 18px;
}

.customQ-dropdown li > span.disabled {
  color: #ccc;
  font-weight: normal;
}

/*** custom queue dropdown container ***/

.jb-overflowmenu-menu-primary div.customQ-dropdown {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
  background: #fff;
  text-align: left;
  font-size: 0.95em;
  min-width: 100%;
  list-style: none;
  left: -1px;
  top: 31px;
  position: absolute;
  z-index: 8;
}

.customQ-dropdown ul.scroll-height {
  max-height: 350px;
  overflow-y: auto;
}

/*** set max width for truncating long links ***/

.customQ-dropdown ul li > a {
  max-width: 170px;
}

.customQ-dropdown ul li > ul li > a {
  max-width: 180px !important;
}

/************ Custom Queue Button Styles *************/

.customQ-dropdown ul li,
.customQ-dropdown ul li > a {
  color: #666;
  white-space: nowrap;
}

.customQ-dropdown ul li > a {
  margin-right: 60px;
}

.customQ-dropdown ul li:not(.personalQ):hover {
  color: #111;
  background-color: #f8f9fb;
  cursor: pointer;
}

.customQ-dropdown ul li:hover > a {
  color: #111;
  cursor: pointer;
}

.customQ-dropdown ul li > a:hover {
  color: #111 !important;
}

.customQ-dropdown ul li:not(.personalQ) .controlQ {
  position: absolute;
  right: 0;
  z-index: 20;
}

/************ Custom Queue Button with Sub Queues *************/

.subMenuQ:before,
.subMenuQ:after {
  content: "";
  position: absolute;
  display: block;
  height: 10px;
  width: 100%;
  background: transparent;
}

.subMenuQ:before {
  bottom: 100%;
}

.subMenuQ:after {
  top: 100%;
}

.customQ-dropdown ul li.subQ > a i {
  padding: 2px 6px 0;
  display: inline-block;
  color: #000;
  opacity: 0.5;
}

.customQ-dropdown ul li.subQ:hover > a i {
  color: #fff;
  opacity: 0.5;
}

.customQ-dropdown ul li div.editQ {
  padding: 0px 8px 0 0;
}

/************ Custom Queue Button without Sub Queues *************/

.customQ-dropdown ul li.subQ > ul li > a:before {
  content: "";
  padding: 0px 4px;
}

.customQ-dropdown ul li.subQ > a:before {
  content: "";
  padding: 0px 4px;
}

.customQ-dropdown ul li:not(.subQ) > a:before {
  content: "";
  padding: 0px 4px;
}

.customQ-dropdown ul li:not(.subQ) > a {
  max-width: 190px;
  padding: 8px 10px;
}

/************ Custom Queue Nested Queue Container *************/

.customQ-dropdown ul li.subQ > ul {
  display: none;
  position: absolute;
  top: 0;
  left: 0px;
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.customQ-dropdown ul li.subQ:hover > ul {
  display: block;
}

.customQ-dropdown ul li > span.newItemQ {
  padding: 8px 10px;
}

/************ Custom Queue Add/Save a Queue Button *************/

.customQ-dropdown .add-queue a {
  display: block;
  padding: 2px 0;
  color: #666 !important;
  cursor: pointer;
  white-space: nowrap;
}

.customQ-dropdown .add-queue a span {
  padding: 0 10px;
  opacity: 0.4;
  transition: all 0.5s ease;
}

.customQ-dropdown .add-queue a:hover span {
  opacity: 1;
}

.customQ-dropdown .add-queue a:hover {
  color: #666 !important;
  text-decoration: none;
  background-color: #ddd;
}

.customQ-dropdown .add-queue .add {
  color: #16ab39;
}

.no-queue.customQ-dropdown .add-queue a span {
  opacity: 1;
}

/***************** Custom Queue Edit Nav ******************/

/*** icon cog styles ***/

.jb-overflowmenu-menu-primary .customQ-dropdown ul li > .controlQ div.editQ {
  margin-top: 2px;
}

.customQ-dropdown ul li > .controlQ div.editQ i {
  color: rgba(255, 255, 255, 0.6);
}

.customQ-dropdown ul li:hover > .controlQ div.editQ i {
  color: rgba(255, 255, 255, 0.2);
}

.customQ-dropdown ul li > .controlQ div.editQ:hover i {
  color: rgba(255, 255, 255, 1);
}

/*** edit nav popout ***/

.customQ-dropdown ul li > .controlQ div.editQ .manageQ a:before {
  content: none;
  padding: 0;
}

.customQ-dropdown .controlQ div.editQ .manageQ a {
  padding-left: 0px;
  padding-right: 10px;
  white-space: nowrap;
  margin-right: 0px !important;
}

.customQ-dropdown .controlQ div.editQ .manageQ a > i {
  margin-left: 5px;
  margin-right: 5px;
}

.jb-overflowmenu-menu-primary .customQ-dropdown .controlQ div.editQ .manageQ {
  display: none;
  position: absolute;
  top: -1px;
  left: 0px;
  margin-left: 19px;
}

.jb-overflowmenu-menu-primary
  .customQ-dropdown
  .controlQ
  div.editQ
  .manageQ
  ul {
  border: 1px solid #ddd;
  min-width: 75px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  padding: 0px 0;
  background-color: #fff;
}

/*** edit nav link styles ***/

.customQ-dropdown .controlQ div.editQ:hover .manageQ {
  display: block;
}

.customQ-dropdown .controlQ div.editQ:hover .manageQ i {
  color: #555;
}

.customQ-dropdown .controlQ div.editQ:hover .manageQ a {
  min-width: 100px;
}

.customQ-dropdown .controlQ div.editQ:hover .manageQ a:hover i {
  color: #fff;
}

/***************************************
          Overflow Menu
****************************************/

.jb-overflowmenu {
  position: relative;
  height: 41px;
  width: 960px;
}

.jb-overflowmenu .placeholder {
  visibility: hidden;
}

.jb-overflowmenu .jb-overflowmenu-helper-postion {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0px;
  overflow: visible;
  position: absolute;
}

/*holds the overflow menu and label*/

.jb-overflowmenu .jb-overflowmenu-menu-primary {
  padding: 0;
  margin: 2px 0 0 0;
  height: 41px !important;
}

.jb-overflowmenu .jb-overflowmenu-menu-primary li.item {
  display: inline-block;
  padding: 6px 0px;
  margin: 0 0px;
}

.jb-overflowmenu .jb-overflowmenu-menu-primary li.item > a {
  padding: 4px 10px;
}

/******** Overflow menu and Dropdown *********/

.jb-overflowmenu .jb-overflowmenu-container {
  left: auto;
  bottom: 0;
  right: 0;
  top: 0;
  border-bottom: 1px solid #bebebe;
  background-color: #eee;
}

.jb-overflowmenu .jb-overflowmenu-menu-secondary-handle {
  width: 12px;
  text-align: center;
  padding: 5px;
  line-height: 15px;
  color: #666;
}

.jb-overflowmenu
  .jb-overflowmenu-container
  > a.jb-overflowmenu-menu-secondary-handle {
  color: #666;
  padding: 9px;
  background-color: #eee;
  border-right: 1px solid #aaa;
}

.jb-overflowmenu
  .jb-overflowmenu-container
  > a.jb-overflowmenu-menu-secondary-handle:hover {
  color: #000;
  background-color: #ddd;
}

/*** Overflow navigation ***/

.jb-overflowmenu-menu-secondary {
  background-color: #f7f7f7;
  border: 1px solid #bebebe;
  padding: 5px 0;
}

.jb-overflowmenu .jb-overflowmenu-menu-secondary {
  top: auto;
  bottom: auto;
  left: auto;
  display: none;
  position: absolute;
  z-index: 9;
  padding: 0;
  margin: 0;
}

/*** Overflow Dropdown ***/

.jb-overflowmenu-menu-secondary li.item:before {
  font-family: "FontAwesome";
  content: "\F0D9";
  padding: 5px;
}

.jb-overflowmenu-menu-secondary li.item a > i {
  margin-top: 5px;
}

.jb-overflowmenu-menu-secondary li.item {
  position: relative;
  padding: 0px 10px;
  display: inline-block;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom: 1px solid #bebebe;
  white-space: nowrap;
  list-style: none;
}

.jb-overflowmenu-menu-secondary li.item > a {
  display: inline-block;
  padding: 5px 10px 5px 21px;
  background-position: 0 50%;
  background-repeat: no-repeat;
  color: #000;
}

.jb-overflowmenu-menu-secondary li.item:hover {
  padding: 0 10px;
  color: #e36414;
  background-color: #fff;
  border-left: none;
  border-top: none;
  border-right: none;
}

.jb-overflowmenu-menu-secondary li.item:hover > a {
  color: #e36414;
  text-decoration: none;
}

.jb-overflowmenu-menu-secondary div.customQ-dropdown {
  border-top-left-radius: 6px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border: solid 1px #ddd;
  border: solid 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  padding: 12px 0;
  background: #fff;
  font-size: 0.95em;
  min-width: 245px;
  list-style: none;
  left: -247px;
  top: -1px;
  position: absolute;
  z-index: 10;
}

.jb-overflowmenu-menu-secondary .customQ-dropdown ul li > .controlQ div.editQ {
  margin-top: 2px;
  float: left;
}

.jb-overflowmenu-menu-secondary .customQ-dropdown .controlQ div.editQ .manageQ {
  display: none;
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0px;
  padding: 34px 28px;
}

.jb-overflowmenu-menu-secondary
  .customQ-dropdown
  .controlQ
  div.editQ:hover
  .manageQ {
  display: block;
}

.jb-overflowmenu-menu-secondary
  .customQ-dropdown
  .controlQ
  div.editQ
  .manageQ
  ul {
  border: 1px solid #ddd;
  min-width: 75px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  padding: 6px 0;
  background-color: #fff;
}

.jb-overflowmenu-menu-secondary .customQ-dropdown li > span {
  padding: 0 5px;
}

/**********************End Custom Queues Dropdown******************/

/*************Qeueue Title Config dropdown options****************/

.configureQ {
  display: inline-flex;
  align-items: center;
  float: none;
  color: rgba(0, 0, 0, 0.35);
  margin: 0 0 0 6px;
  cursor: pointer;
  position: relative;
}

.configureQ:hover {
  color: rgba(0, 0, 0, 0.6);
}

.configureQ > .noclick-dropdown {
  padding: 0;
  top: 100%;
  left: 0;
  margin-top: 4px;
  margin-left: -11px;
}

.configureQ:hover > .noclick-dropdown {
  display: block;
}

.configureQ > .noclick-dropdown:before {
  top: -6px;
  left: 9px;
}

.configureQ > .noclick-dropdown:after {
  top: -5px;
  left: 10px;
}

/*********************/

a.test {
  background-image: url(../images/icons/open.gif);
}

a.Ticket {
  background: url(../images/icons/open_tickets.gif);
}

a.assignedTickets {
  background: url(../images/icons/assigned_tickets.gif);
}

a.overdueTickets {
  background: url(../images/icons/overdue_tickets.gif);
}

a.answeredTickets {
  background: url(../images/icons/answered_tickets.gif);
}

a.closedTickets {
  background: url(../images/icons/closed_tickets.gif);
}

a.newTicket {
  background: url(../images/icons/new_ticket.gif);
}

a.premade {
  background: url(../images/icons/premade_reply.gif);
}

a.newPremade {
  background: url(../images/icons/new_premade_reply.gif);
}

a.kb {
  background: url(../images/icons/kb.gif);
}

a.faq-categories {
  background: url(../images/icons/faq-categories.gif);
}

a.canned {
  background: url(../images/icons/canned.gif);
}

a.staff {
  background: url(../images/icons/list_groups.gif);
}

a.user {
  background: url(../images/icons/list_users.gif);
}

a.userPref {
  background: url(../images/icons/user_preferences.gif);
}

a.userPasswd {
  background: url(../images/icons/change_password.gif);
}

a.preferences {
  background: url(../images/icons/settings.gif);
}

a.api {
  background: url(../images/icons/api.png);
}

a.newapi {
  background: url(../images/icons/new_api.png);
}

a.ticket-settings {
  background: url(../images/icons/ticket-settings.gif);
}

a.email-settings {
  background: url(../images/icons/email-settings.gif);
}

a.kb-settings {
  background: url(../images/icons/kb-settings.gif);
}

a.alert-settings {
  background: url(../images/icons/alert-settings.gif);
}

a.email-autoresponders {
  background: url(../images/icons/email-autoresponders.gif);
}

a.sla {
  background: url(../images/icons/slas.png);
}

a.newsla {
  background: url(../images/icons/new_sla.png);
}

a.logs {
  background: url(../images/icons/logs.gif);
}

a.emails {
  background: url(../images/icons/emails.png);
}

a.newEmail {
  background: url(../images/icons/new_email.png);
}

a.emailTemplates {
  background: url(../images/icons/email_templates.png);
}

a.newEmailTemplate {
  background: url(../images/icons/new_email_template.png);
}

a.emailFilters {
  background: url(../images/icons/email_filters.png);
}

a.ticketFilters {
  background: url(../images/icons/ticket_filters.png);
}

a.newTicketFilter {
  background: url(../images/icons/new_ticket_filter.png);
}

a.emailSettings {
  background: url(../images/icons/emails.png);
}

a.emailDiagnostic {
  background: url(../images/icons/email_diagnostic.gif);
}

a.banList {
  background: url(../images/icons/ban_list.gif);
}

a.users {
  background: url(../images/icons/user.gif);
}

a.newuser {
  background: url(../images/icons/new_user.gif);
}

a.groups {
  background: url(../images/icons/list_groups.gif);
}

a.teams {
  background: url(../images/icons/teams.gif);
}

a.newgroup {
  background: url(../images/icons/new_group.gif);
}

a.helpTopics {
  background: url(../images/icons/help_topics.png);
}

a.newHelpTopic {
  background: url(../images/icons/new_help_topic.png);
}

a.departments {
  background: url(../images/icons/list_departments.gif);
}

a.newDepartment {
  background: url(../images/icons/new_department.gif);
}

a.pages {
  background: url(../images/icons/pages.gif);
}

a.newPage {
  background: url(../images/icons/new_page.gif);
}

a.forms {
  background: url(../images/icons/icon-form.png);
  background-size: 16px 16px;
}

a.lists {
  background: url(../images/icons/icon-list.png);
  background-size: 16px 16px;
}

/* Generic CSS based Icons. use=> <tag class="Icon iconname">text</tag> */

.Icon {
  width: auto;
  padding-left: 20px;
  background-position: left center;
  background-repeat: no-repeat;
  min-height: 16px;
  display: inline-block;
  vertical-align: middle;
}

a.Icon {
  background-repeat: no-repeat;
}

a.Icon:hover {
  text-decoration: underline;
}

.Icon.webTicket {
  background: url(../images/icons/ticket_source_web.gif) 0 0 no-repeat;
}

.Icon.emailTicket {
  background: url(../images/icons/ticket_source_email.gif) 0 0 no-repeat;
}

.Icon.phoneTicket {
  background: url(../images/icons/ticket_source_phone.gif) 0 0 no-repeat;
}

.Icon.apiTicket {
  background: url(../images/icons/ticket_source_other.gif) 0 0 no-repeat;
}

.Icon.otherTicket {
  background: url(../images/icons/ticket_source_other.gif) 0 0 no-repeat;
}

.Icon.overdueTicket {
  background: url(../images/icons/overdue_ticket.gif) 0 0 no-repeat;
}

.Icon.assignedTicket {
  background: url(../images/icons/assigned_ticket.gif) 0 0 no-repeat;
}

.Icon.file {
  background-image: url(../images/icons/file.gif);
}

#content {
  padding: 1.5rem 2rem;
  background: #fafafa;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
}

/* a color now set globally at top of file */

a.no-pjax[href*="export"] {
  color: #888;
  text-decoration: none;
}

a.no-pjax[href*="export"]:hover {
  color: #fdc403;
  text-decoration: none;
}

.sidebar-footer-link.no-pjax {
  color: #888;
}

.sidebar-footer-link.no-pjax:hover {
  color: #333;
}

#footer {
  padding: 1rem 2rem;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  background: #fafafa;
}

table.dashboard-stats tbody:nth-child(2) td {
  background-color: transparent;
}

table {
  width: 100%;
  vertical-align: top;
  border-collapse: collapse;
}

table.list,
table.dashboard-stats,
table#topic-forms,
#entries table {
  box-shadow: 0 0 0 1px #e5e7eb;
  border-radius: 22px;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #fff;
}

table.list caption,
table.dashboard-stats caption {
  text-align: left;
  padding: 20px 28px;
  background: #fff;
  color: #666;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border-bottom: 1px solid #e8e8e8;
}

table.list thead th,
table.dashboard-stats th,
table#topic-forms th,
#entries table th {
  width: auto;
  background: transparent;
  color: #666;
  text-align: left;
  vertical-align: middle;
  box-shadow: none;
  border-radius: 0;
  padding: 20px 28px;
  font-weight: 700;
  font-size: 0.8rem;
  border-bottom: none;
  border-right: none;
  border-top: none;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  white-space: nowrap;
}

table.list thead th:first-child,
table.dashboard-stats th:first-child,
table#topic-forms th:first-child,
#entries table th:first-child {
  border-top-left-radius: 10px;
}

table.list thead th:last-child,
table.dashboard-stats th:last-child,
table#topic-forms th:last-child,
#entries table th:last-child {
  border-top-right-radius: 10px;
}

table.list tr:last-child td:first-child,
table#topic-forms tr:last-child td:first-child,
#entries table tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}

table.list tr:last-child td:last-child,
table#topic-forms tr:last-child td:last-child,
#entries table tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}

table.dashboard-stats tbody:nth-child(n + 2) th {
  background-color: #eee;
  border-radius: 0;
}

table.dashboard-stats tbody:last-child tr:last-child th {
  border-radius: 0 0 0 10px;
}

table.list th a,
table.dashboard-stats th a {
  text-decoration: none;
  color: #666;
  margin: -4px -5px;
  padding: 4px 5px;
  transition: color 0.2s ease;
  white-space: nowrap;
}

table.list thead th a,
table.dashboard-stats thead th a {
  padding-right: 22px;
  display: block;
  white-space: nowrap;
  color: #666;
  background: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3.9375C12.1522 3.9375 12.2979 3.99917 12.4038 4.10842L15.4038 7.20217C15.6201 7.42519 15.6146 7.78132 15.3916 7.99755C15.1685 8.21385 14.8124 8.20838 14.5962 7.98533L12.5625 5.8881V13.5C12.5625 13.8107 12.3106 14.0625 12 14.0625C11.6893 14.0625 11.4375 13.8107 11.4375 13.5V5.8881L9.4038 7.98533C9.18757 8.20838 8.83147 8.21385 8.60842 7.99755C8.38537 7.78132 8.3799 7.42519 8.5962 7.20217L11.5962 4.10842C11.7021 3.99917 11.8478 3.9375 12 3.9375ZM6 3.9375C6.31066 3.9375 6.5625 4.18934 6.5625 4.5V12.1119L8.5962 10.0147C8.81242 9.79162 9.16852 9.78615 9.39157 10.0025C9.61462 10.2187 9.6201 10.5748 9.4038 10.7978L6.40382 13.8916C6.29788 14.0009 6.15218 14.0625 6 14.0625C5.84782 14.0625 5.70212 14.0009 5.59618 13.8916L2.59618 10.7978C2.37991 10.5748 2.3854 10.2187 2.60842 10.0025C2.83144 9.78615 3.18755 9.79162 3.40382 10.0147L5.4375 12.1119V4.5C5.4375 4.18934 5.68934 3.9375 6 3.9375Z' fill='%23666'/%3E%3C/svg%3E")
    right center no-repeat;
  background-size: 14px 14px;
}

table.list tbody td,
table.dashboard-stats tbody td {
  background: #fff;
  padding: 20px 28px;
  vertical-align: middle;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 400;
  border-bottom: none;
  border-right: none;
  border-top: none;
  transition: background 0.15s ease;
  line-height: 1.4;
}

table.list tbody .ui-sortable-handle:hover td {
  background: #fbfbfb;
}

table tfoot td {
  background: #fff;
  padding: 14px 28px;
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 500;
  border-top: 1px solid #e2e8f0;
}

table tfoot td:first-child {
  border-bottom-left-radius: 10px;
}

table tfoot td:last-child {
  border-bottom-right-radius: 10px;
}

a.refresh {
  display: block;
  float: right;
  width: auto;
  height: 16px;
  line-height: 16px;
  padding: 2px 5px 2px 2px;
  background-position: 2px 50%;
  background-repeat: no-repeat;
  padding-left: 24px;
  margin-left: 10px;
  margin-bottom: 2px;
  border: 1px solid #aaa;
  background-image: url(../images/icons/refresh.gif);
}

a.edit,
a.print {
  display: block;
  float: right;
  width: auto;
  height: 16px;
  line-height: 16px;
  padding: 2px 5px 2px 2px;
  background-position: 2px 50%;
  background-repeat: no-repeat;
  padding-left: 24px;
  margin-left: 10px;
  border: 1px solid #aaa;
  background-image: url(../images/icons/edit_ticket.png);
}

a.print {
  background-image: url(../images/icons/printer.gif);
}

.btn_sm {
  padding: 2px 5px;
  font-size: 0.9em;
  background: url(../images/btn_sm_bg.png) top left repeat-x #f90;
  border: 1px solid #777;
  color: #fff;
  font-weight: bold;
}

.search label {
  display: block;
  line-height: 25px;
  height: 25px;
}

.search input[type="text"] {
  height: 23px;
  line-height: 23px;
  border: 1px solid #aaa;
  background: #fff;
  padding: 2px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 3px;
}

.table tr.header td,
.table tr.header th,
.table > thead th {
  font-weight: 400;
  font-size: 1.3em;
  text-align: left;
  min-height: 24px;
}

.table tbody:not(:first-child) th {
  padding-top: 1.4em;
  padding-bottom: 10px;
}

.table tbody th {
  background: transparent;
  border: none;
  box-shadow: none;
}

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

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

.table td:not(:empty) {
  padding: 15px 10px;
  background-color: transparent;
}

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

.table > tbody > tr.header + tr td {
  padding-top: 15px;
}

.table td .pull-right {
  margin-right: 15px;
}

.form_table {
  margin-top: 3px;
}

.form_table select[name^="visibility"] {
  min-width: 130px;
  width: 130px;
}

.form_table td:not(:empty) {
  height: 20px;
}

table.fixed {
  table-layout: fixed;
  width: 100%;
}

table.fixed > thead > tr > th:not([width]),
table.fixed > thead > tr > td:not([width]),
table.fixed > tbody > tr > td:not([width]),
table.fixed > tr > td:not([width]) {
  width: 180px;
}

table.fixed > thead > tr > th + th:not([width]),
table.fixed > thead > tr > td + td:not([width]),
table.fixed > tbody > tr > td + td:not([width]),
table.fixed > tr > td + td:not([width]) {
  width: auto;
}

tr.no_border > td,
td.no_border {
  border-style: hidden;
}

td.multi-line {
  vertical-align: top;
  padding-top: 0.4em;
  padding-bottom: 0.4em;
}

input[type="radio"] {
  appearance: none;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #d0d0d0;
  margin-bottom: -3px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

input[type="radio"]:checked:before {
  content: "";
  background-color: #fdc403;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 2px;
}

#save-changes button {
  color: #000;
  margin-left: 5px;
}

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

.form_table em {
  font-weight: 400;
  color: #666;
}

.error {
  color: #c0392b;
}

.form_table .error input {
  border: 1px solid #c0392b;
}

.form_table th em:not(:first-child) {
  margin-top: 0.6em;
}

.form_table th em {
  display: block;
  color: #000;
}

#content .settings_table th h4 a {
  display: block;
  color: #fff;
}

.settings_table h4 a span {
  font-size: 1.2em;
  line-height: 1.15em;
  display: inline-block;
  width: 14px;
  height: 14px;
  overflow: hidden;
  text-align: center;
  color: #444;
  background: #ccc;
  position: relative;
  top: 2px;
}

h2 {
  color: #000;
  font-size: 1.75rem;
}

h2 a {
  color: #000;
  text-decoration: none;
  display: inline;
}

h2 a:hover {
  color: #000;
  text-decoration: none;
}

h2 i {
  font-size: 14px;
  vertical-align: middle;
  color: #000;
  position: relative;
  top: 0;
  margin-right: 0.25rem;
}

h2 small {
  color: #999;
}

h3 {
  color: #333;
  font-size: 1.125rem;
}

h3.title {
  color: black;
  line-height: 1.25em;
}

h3.title > .sub-title {
  font-weight: normal;
  font-size: 1.1rem;
}

.tixTitle {
  padding: 0 5px 0px;
  margin-bottom: 20px;
}

.tixTitle h3 {
  color: #444;
  padding: 0;
  margin: 0;
  font-size: 1.4em;
  font-weight: 400;
}

.has_bottom_border {
  padding-bottom: 5px;
}

.ticket_info:first-child {
  margin-top: 20px;
}

.ticket_info.custom-data td,
.ticket_info.custom-data th {
  padding: 10px;
}

.ticket_info.custom-data thead th {
  border-bottom: 1px solid #ccc;
}

.custom-data th,
.custom-data td {
  padding: 3px;
}

table.custom-data {
  margin-bottom: 1em;
}

.right_align {
  text-align: right;
}

h2 .reload {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../images/icons/refresh.gif) top left no-repeat;
  outline: none;
  text-indent: -9999px;
}

#assigned_message {
  margin: 10px 0;
  padding: 5px 5px 5px 30px;
  background: url(../images/icons/assigned_ticket.gif) 5px 50% no-repeat #ffd;
  border: 1px solid #f90;
}

#ticket_actions {
  padding: 5px;
  background: #eee;
  border: 1px solid #aaa;
  border-bottom: none;
  margin: 0;
}

#nticket-form table,
.settings_table,
.form_table {
  border: none;
}

.form_table tbody {
  padding-bottom: 10px;
}

.form_table thead tr:not(:first-child) th {
  border-top: 5px solid transparent;
  border-right: 5px solid transparent;
  box-shadow: none;
  background: #f9f9f9;
  padding: 10px;
}

.settings_table tbody thead th {
  box-shadow: none;
  border-right: 5px solid transparent;
  background: #f9f9f9;
  padding: 10px;
}

.settings_table tbody input[type="file"] {
  margin: 20px 0 0 10px;
}

#nticket-form table a.inline.button,
.settings_table a.inline.button {
  margin-left: 5px;
}

/***** top page ticket response buttons *****/

a#post-note:hover {
  background-color: #fff9e2;
  color: #555 !important;
}

.avatar {
  border-radius: 12%;
}

img.avatar {
  border-radius: inherit;
  vertical-align: middle;
  margin-right: 5px;
}

.avatar > img.avatar {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  border-radius: 50%;
  border: 1px solid #ccc;
}


.thread-body .attachments:empty {
  display: none;
}

.thread-body .attachments .filesize {
  margin-left: 0.5em;
  line-height: 1em;
}


.thread-body .attachment-info .filename {
  max-width: 80%;
  max-width: calc(100% - 70px);
}

#ticket_notes table td {
  padding: 5px;
}

#user-registration table td {
  padding: 10px 5px;
}

#orgprofile_container table td {
  padding: 10px 2px;
}

#ticket_notes td {
  background: #f9f9f9;
}

#ticket_notes .info {
  padding: 5px;
  background: #f9f9f9;
  height: 16px;
  line-height: 16px;
}

ul.tabs {
  padding: 0;
  margin: 24px 0 0;
  position: relative;
  border: none;
  border-bottom: none;
  display: flex;
  gap: 10px;
  background: transparent;
  flex-wrap: wrap;
}

#ticket_thread ul.tabs {
  border-bottom: none;
}

ul.tabs li {
  margin: 0;
  padding: 0;
  display: inline-block;
  list-style: none;
  text-align: center;
  min-width: 0;
  outline: none;
}

ul.tabs li.active {
  bottom: auto;
  position: relative;
}

li.error {
  border-top: 2px solid rgba(255, 0, 0, 0.3) !important;
}

li.error.active {
  border-top-color: rgba(255, 0, 0, 0.7) !important;
}

li.error a:before {
  background-color: rgba(255, 0, 0, 0.06);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: "";
  position: absolute;
}

ul.tabs.clean li.active {
  background-color: white;
}

ul.tabs li a {
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  outline: none;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 8px 20px;
  background: #fff;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

ul.tabs li a:hover {
  text-decoration: none;
  color: #000;
  border-color: #fdc403;
  background: #fff;
}

ul.tabs li.active a {
  font-weight: 600;
  color: #000;
  background: #fff8e1;
  border-color: #fdc403;
}

ul.tabs li.empty {
  padding: 5px;
  border: none;
}

ul.tabs.vertical {
  display: inline-block;
  height: auto;
  border-bottom: initial;
  border-right: 1px solid #aaa;
  padding-left: 0;
  padding-bottom: 40px;
  padding-top: 10px;
  background: transparent;
  box-shadow: inset -5px 0 10px -9px rgba(0, 0, 0, 0.3);
}

ul.tabs.vertical.left {
  float: left;
  margin-right: 9px;
}

ul.tabs.vertical li {
  border: 1px solid #ccc;
  border: 1px solid rgba(204, 204, 204, 0.5);
  border-right: none;
  min-width: 0;
  display: block;
  border-top-right-radius: 0;
  border-bottom-left-radius: 5px;
  right: 0;
  height: auto;
}

ul.tabs.vertical li:not(.active) {
  box-shadow: inset -5px 0 10px -9px rgba(0, 0, 0, 0.3);
}

ul.tabs.vertical li + li {
  margin-top: 5px;
}

ul.tabs.vertical li.active {
  border: 1px solid #aaa;
  border-left: 2px solid #81a9d7;
  border-right: none;
  right: -1px;
  box-shadow: -1px 4px 6px -3px rgba(0, 0, 0, 0.3);
}

ul.tabs.vertical.left li {
  text-align: right;
}

ul.tabs.vertical li a {
  padding: 5px;
}

ul.tabs.alt {
  height: auto;
  background-color: initial;
  border-bottom: none;
  box-shadow: none;
}

ul.tabs.alt li {
  width: auto;
  border: none;
  min-width: 0;
  box-shadow: none;
  bottom: 1px;
  height: auto;
}

ul.tabs.alt li.active {
  border: none;
  box-shadow: none;
  background-color: transparent;
}

#response_options .reply_tab.tell {
  color: #a00 !important;
  background-image: url(../images/reminder.png);
  background-position: 12px 50%;
  background-repeat: no-repeat;
}

#response_options > form {
  background: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
}

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

#response_options > table td {
  vertical-align: top;
}

#response_options input[type="text"],
#response_options textarea:not(.richtext) {
  border: 1px solid #aaa;
  background: #fff;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}

#ticket_thread table td,
#user-form table td {
  vertical-align: middle !important;
  padding: 10px;
}

#org-profile table td,
#selected-org-info table td {
  border-bottom: 1px solid #ccc !important;
  padding: 10px;
}

#org-profile table tr:last-child td,
#selected-org-info table tr:last-child td {
  border-bottom: none !important;
}

[class^="icon-"].pull-left,
[class*=" icon-"].pull-left {
  margin: 0 10px 10px 0;
}

.attachments .uploads div {
  display: inline-block;
  padding-right: 20px;
}

.file {
  display: inline-block;
  padding-left: 20px;
  margin-right: 20px;
  background: url(../images/icons/file.gif) 0 50% no-repeat;
}

.expander {
  line-height: 14px;
  display: inline-block;
  width: 12px;
  height: 12px;
  overflow: hidden;
  text-align: center;
  color: #aaa;
  position: relative;
}

/** Popup Tool Tips and Content **/

.tip_box {
  display: block;
  height: 30px;
  position: absolute;
  z-index: 10;
}

.tip_arrow {
  display: block;
  position: absolute;
  top: 5px;
  left: -12px;
  width: 12px;
  z-index: 1;
}

.tip_box.right .tip_arrow {
  top: 5px;
  right: -12px;
  left: auto;
}

.flip-x {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

.tip_content {
  height: auto !important;
  height: 20px;
  min-height: 20px;
  padding: 20px;
  border: 1px solid #999;
  background: #fff;
  border-radius: 4px 10px 10px 10px;
  z-index: 3;
  position: absolute;
  top: 0;
  left: -1px;
  min-width: 400px;
  line-height: 1.45rem;
}

.tip_content .links {
  margin-top: 0.7em;
  padding-top: 0.4em;
  border-top: 1px solid #ddd;
}

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

.tip_content hr {
  color: #ddd;
  background-color: #ddd;
  height: 1px;
  border: 0;
  padding: 0;
  margin: 0.2em 0;
  width: 100%;
}

.tip_close {
  position: absolute;
  top: 10px;
  right: 10px;
  text-decoration: none;
}

.tip_close i {
  margin-right: 0;
}

.tip_shadow {
  display: none;
  background: #000;
  position: absolute;
  z-index: 200;
  top: 0;
  left: 0;
  width: auto !important;
  width: 310px;
}

.tip_menu {
  margin: 10px 0 0 0;
  padding: 5px 0;
  border-top: 1px solid #aaa;
  height: 16px;
  font-size: 0.9em;
}

.tip_menu li {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tip_menu li a {
  display: block;
  width: auto;
  float: left;
  padding: 0 10px;
  border-right: 1px solid #ddd;
  color: #666;
}

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

.tip_content form {
  display: none;
  line-height: 24px;
}

.tip_content select,
.tip_content textarea {
  width: 295px;
}

.tip_content textarea {
  padding: 0;
  border: 1px solid #aaa;
  background: #fff;
}

.tip_content form p {
  margin: 0;
  width: auto !important;
  width: 295px;
  text-align: right;
  line-height: 1.5em;
}

.tip_content h1 {
  font-size: 1.3em;
  margin-top: 0;
  margin-bottom: 0.4em;
  padding-right: 35px;
}

.tip_content h1 i:before {
  content: none;
}

i.help-tip {
  vertical-align: inherit;
  color: #aaa;
  opacity: 0.8;
  text-indent: initial;
}

i.help-tip:hover {
  color: #7f838b !important;
  cursor: pointer;
  opacity: 1;
}

table i.help-tip {
  font-size: 20px;
  margin-left: 5px;
}

caption > i.help-tip {
  color: white;
  opacity: 0.2;
}

caption:hover > i.help-tip {
  color: #e36414;
  color: #ffc20f;
  opacity: 1;
}

h2 > i.help-tip {
  vertical-align: middle;
  font-size: 0.7em;
}

.form_table th h4 i.help-tip {
  color: #fff;
}

/* Knowledgebase */

#kb {
  margin: 12px 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

#kb li {
  padding: 14px 16px;
  height: auto !important;
  overflow: hidden;
  margin: 0;
  background: #fff;
  background-image: none;
  border-bottom: 1px solid #f0f0f0;
}

#kb li:last-child {
  border-bottom: none;
}

#kb li h4 {
  padding-bottom: 3px;
  margin: 0 0 4px 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

#kb li h4 span {
  color: #9ca3af;
  font-weight: 400;
  font-size: 0.875rem;
}

#kb li h4 a {
  font-size: 0.9375rem;
  color: #333;
}

#kb li h4 a:hover {
  color: #fdc403;
  text-decoration: none;
}

#kb li div a {
  color: #555;
  font-size: 0.875rem;
}

#kb li div a:hover {
  color: #fdc403;
  text-decoration: none;
}

#kb li div span {
  color: #9ca3af;
  font-size: 0.8125rem;
}

#kb li div i.icon-folder-open-alt {
  display: none;
}

#kbSearch {
  margin-bottom: 1em;
}

#kbSearch #query {
  width: 200px;
}

#faq {
  clear: both;
  margin: 0;
  padding: 0px 0 10px 0px;
}

#faq ol {
  font-size: 15px;
  margin-left: 0;
  padding-left: 0;
  margin: 0 !important;
}

#faq ol li {
  list-style: none;
  margin: 0 0;
  padding: 10px 0 10px;
  color: #999;
  border-bottom: 1px solid #ddd;
}

#faq ol li:last-child {
  border-bottom: none;
}

#faq ol li a {
  display: inline;
  height: 16px;
  font-size: 13px;
  line-height: 16px;
  padding-left: 24px;
  background: url("../images/icons/page.png") 0 50% no-repeat;
}

#faq ol li a span {
  font-weight: normal;
  color: #777;
}

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

time.faq {
  display: inline-block;
  color: #777;
}

.cat-desc {
  padding-top: 5px;
  padding-bottom: 15px;
}

.cat-manage-bar {
  background: #e3f5ff;
  padding: 5px;
  border-bottom: 1px solid #777;
}

.cat-manage-bar a {
  display: inline-block;
  margin-right: 20px;
}

/* dialog */

.dialog,
.dialog * {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.dialog {
  top: 50% !important;
  transform: translateY(-50%);
  position: fixed;
  padding: 50px 30px 24px;
  max-width: 500px;
  width: 90vw;
  height: 250px;
  height: auto !important;
  background: #ffffff;
  display: none;
  z-index: 10;
  border-radius: 16px;
  max-height: 90vh;
  min-height: 50px;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.dialog .row .span12 {
  padding: 0;
}

.dialog select {
  margin-top: 10px;
}

.dialog .table td:not(:empty) {
  background-color: #f9f9f9 !important;
  padding: 12px 15px;
}

.dialog .table tbody:first-child tr:first-child td:not(:empty):first-child {
  border-top-left-radius: 10px;
}

.dialog .table tbody:first-child tr:first-child td:not(:empty):last-child {
  border-top-right-radius: 10px;
}

.dialog .table tbody:last-child tr:last-child td:not(:empty):first-child {
  border-bottom-left-radius: 10px;
}

.dialog .table tbody:last-child tr:last-child td:not(:empty):last-child {
  border-bottom-right-radius: 10px;
}

.dialog#popup {
  max-width: 650px;
}

.dialog.size-normal {
  max-width: 650px !important;
}

.dialog.size-large {
  max-width: 750px !important;
}

.dialog.size-xl {
  max-width: 940px !important;
}

.dialog #popup-loading {
  position: absolute;
  text-align: center;
  background: rgba(255, 255, 255, 0.8);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 11;
}

.redactor-editor {
  font-size: 1.1em;
}

.dialog#advanced-search {
  width: 640px !important;
  height: 360px;
}

.dialog hr {
  height: 1px;
  background: #ccc;
  margin: 15px 0;
}

.dialog h3 {
  color: #000;
  font-size: 1.25rem;
  padding: 15px;
  margin: 0;
  position: relative;
  font-weight: 600;
  font-family: "Open Sans", sans-serif;
}

.dialog a {
  color: #e36414;
}

.dialog a.close {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  right: 18px;
  top: 14px;
  font-size: 18px;
  color: #999;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transition: all 0.15s ease;
}

.dialog a.close:hover {
  background: #f3f4f6;
  color: #333;
  text-decoration: none;
}

.dialog form {
  clear: both;
  width: 100%;
}

#ticket-status td {
  padding: 10px 0;
}

#ticket-status select {
  margin-top: 0;
}

.dialog .mass-action td {
  padding: 10px 0;
}

fieldset {
  margin: 0;
  padding: 0 0;
  border: none;
}

.custom-field .field-label {
  margin: 0 3px 10px;
}

.custom-field em {
  margin-bottom: 10px;
}

.custom-field + .custom-field {
  margin-top: 20px;
}

.dialog label.fixed-size {
  width: 110px;
  display: inline-block;
  padding: 10px 10px 10px 0;
}

.dialog fieldset input:not([type="checkbox"]) {
  border: 1px solid #d0d0d0;
  background: #fff;
  padding: 8px 12px;
  height: 40px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-family: "Open Sans", sans-serif;
  box-sizing: border-box;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.dialog fieldset input:not([type="checkbox"]):focus {
  border-color: #fdc403;
  outline: none;
  box-shadow: 0 0 0 3px rgba(253, 196, 3, 0.15);
}

.dialog fieldset span.between {
  width: 50px;
  display: inline-block;
  text-align: center;
  color: #777;
  font-size: 0.75em;
}

.dialog ul.tabs,
.dialog ul.tabs * {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
}

.dialog.draggable h3.drag-handle:hover {
  cursor: move;
}

.row {
  display: table-row;
  width: 100%;
}

.row > [class~=" span"],
.row > [class^="span"] {
  padding: 5px 10px;
  vertical-align: top;
  display: table-cell;
}

.row > [class~=" span"] > select,
.row > [class^="span"] > select,
.row > [class~=" span"] > input,
.row > [class^="span"] > input {
  width: 100%;
  max-width: 100%;
}

.row .span3 {
  width: 23%;
  width: calc(25% - 5px);
}

.row .span6 {
  width: 48%;
  width: calc(50% - 5px);
}

.row .span9 {
  width: 73%;
  width: calc(75% - 5px);
}

.row .span12 {
  width: 100%;
}

.flex.row {
  display: initial;
}

.flex.row > [class~=" span"],
.flex.row > [class^="span"] {
  display: inline-block;
}

.search-dropdown {
  padding-left: 19px;
}

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

.advanced-search fieldset {
  margin-top: 10px;
  position: relative;
}

.advanced-search .adv-search-method:before,
.advanced-search .adv-search-val:before {
  content: "";
  border-left: 2px dotted #ccc;
  border-bottom: 2px dotted #ccc;
  border-color: rgba(0, 0, 0, 0.15);
  width: 10px;
  height: 10px;
  display: inline-block;
  position: absolute;
  left: -16px;
}

.advanced-search .adv-search-method {
  margin-left: 24px;
}

.advanced-search .adv-search-val {
  margin-left: 45px;
}

input[type="submit"],
input[type="reset"],
input[type="button"],
.action-button,
.button {
  cursor: pointer;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: 0 4px;
  height: 36px;
  line-height: 1;
  border: 1px solid #d1d5db;
  padding: 0 16px;
  color: #374151;
  border-radius: 8px;
  background: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  user-select: none;
  transition: all 0.2s ease;
  text-decoration: none;
}

input[type="button"],
button[type="submit"]:not(.red.action-button),
.button:not(.action-button):not(.attached):not(.green) {
  height: 41px;
  line-height: 28px;
  border-radius: 8px;
  padding: 5px 20px;
  margin: 0;
  box-sizing: border-box;
}

div button[type="submit"]:not(.action-button):not(.attached),
div input[type="submit"]:not(.action-button):not(.attached) {
  height: 41px;
  background-color: #0f4c5c;
  color: #fff;
  box-shadow: none;
  border: none;
  font-weight: 700;
  padding: 5px 50px;
  box-sizing: border-box;
}

div button[type="submit"]:not(.action-button):not(.attached):hover,
div input[type="submit"]:not(.action-button):not(.attached):hover {
  background-color: #e36414;
  box-shadow: none;
}

/* Dropdown span buttons: caret controls its own right padding for centering */
span.action-button {
  padding-right: 0;
}

/* Simple icon-only buttons: use inline-flex so font glyph (::before) centers within the icon box */
a.action-button > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  line-height: 1;
}

/* Cancel buttons now styled with reset buttons below (line 6230) */

button.action-button,
.tab_content table button.action-button {
  height: 36px !important;
  background: #fff !important;
  color: #374151 !important;
  box-shadow: none !important;
  border: 1px solid #d1d5db !important;
  font-weight: 500 !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
}

button.action-button:hover,
.tab_content table button.action-button:hover {
  border-color: #fdc403 !important;
  color: #000 !important;
  background: #fff !important;
}

#basic_search button.action-button:hover,
#basic_search .action-button:hover {
  background: #fdc403 !important;
  color: #000 !important;
  border-color: #fdc403 !important;
}

#basic_search button.action-button:hover *,
#basic_search .action-button:hover * {
  color: #000 !important;
}

form:not[name="users"] button.red.action-button {
  height: 41px;
  line-height: 18px;
  background-color: transparent;
  color: #c80100;
  border: 1px solid #c80100;
  padding: 5px 20px;
  box-sizing: border-box;
}


form button.red.action-button i {
  display: none;
}

.dialog input[type="button"].close {
  vertical-align: middle;
}

.dialog input[type="submit"] {
  height: 44px;
  background: #fdc403;
  color: #000;
  border: none;
  padding: 0 24px;
  font-weight: 600;
  font-size: 0.9375rem;
  font-family: "Open Sans", sans-serif;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(253, 196, 3, 0.3);
  transition: all 0.2s ease;
}

.dialog input[type="submit"]:hover {
  background: linear-gradient(180deg, #fdc403 0%, #e5b000 100%);
  transform: translateY(-1px);
}

.dialog input[type="reset"] {
  vertical-align: middle;
  padding: 5px 20px;
}

/* Cancel button hover now styled with reset buttons below (line 6250) */

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

select + .action-button,
select + .button {
  vertical-align: middle;
}

div .action-dropdown ul li > a:hover,
div .action-dropdown ul li.active > a:hover,
div .noclick-dropdown ul li > a:hover,
div .noclick-dropdown ul li.active > a:hover {
  background-color: #eee;
  color: #fdc403 !important;
}

div .action-dropdown ul li.active > a {
  background-color: #eee;
  color: #fdc403 !important;
}

div .action-dropdown ul li > a i,
div .noclick-dropdown ul li > a i {
  display: inline-block !important;
  vertical-align: middle;
  margin-right: 0.5rem;
  line-height: 1;
}

div .action-dropdown ul li > a i[class^="icon-"],
div .action-dropdown ul li > a i[class*=" icon-"],
div .noclick-dropdown ul li > a i[class^="icon-"],
div .noclick-dropdown ul li > a i[class*=" icon-"] {
  display: inline-block !important;
  vertical-align: middle;
  margin-right: 0.5rem;
}

.action-dropdown ul li > a i[class^="icon-"]::before,
.action-dropdown ul li > a i[class*=" icon-"]::before,
.noclick-dropdown ul li > a i[class^="icon-"]::before,
.noclick-dropdown ul li > a i[class*=" icon-"]::before {
  display: inline-block;
  vertical-align: middle;
}

div .action-dropdown ul li > a,
div .noclick-dropdown ul li > a {
  padding: 8px 10px;
}

div .action-dropdown ul li.danger > a:hover,
div .customQ-dropdown ul li.danger > a:hover,
div .noclick-dropdown ul li.danger > a:hover {
  background-color: #fff7f7;
  color: #c80100 !important;
}

.dark.button {
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  color: white;
}

.dark.button:hover {
  background-color: rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7) inset;
  color: white;
}

.link.button,
.link.button:hover,
.link.button:active {
  border: none;
  box-shadow: none;
  background-color: transparent;
  color: #184e81;
  padding: 0;
  font-size: inherit;
}

.light .button:hover,
.white.button {
  background-color: rgba(255, 255, 255, 0.7);
  border-color: #555;
}

.light .button:hover,
.white.button:hover {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: black;
}

.button[type="submit"].attached:not(.red.action-button) {
  margin-left: -4px;
  box-shadow: none !important;
  border-radius: 0 8px 8px 0;
  border: 1px solid #ccc;
  border-left: none;
  background: #fff;
  padding: 2px 10px;
}

.button[type="submit"].attached:not(.red.action-button):hover {
  color: #000;
}

.input.attached {
  box-sizing: border-box;
  display: inline-block;
  margin-right: 5px;
}

.input.attached input:focus {
  outline-style: none;
}

.input.attached input {
  height: 35px;
  box-sizing: border-box;
  padding: 5px 10px;
  margin-right: 0;
  border: 1px solid #ccc;
  border-radius: 5px 0 0 5px;
}

.input.attached .button.attached {
  height: 35px;
  box-sizing: border-box;
}

.button:hover {
  text-decoration: none;
}

button[type="submit"],
input[type="submit"],
.primary.button {
  font-weight: normal;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45) inset;
  background-color: rgba(0, 0, 0, 0.07);
}

.save.pending {
  background-color: rgba(255, 174, 0, 0.63);
  box-shadow: 0 0 0 2px rgba(255, 174, 0, 1) inset;
}

.save.pending:hover {
  box-shadow: 0 0 0 2px rgba(242, 165, 0, 1) inset;
  background-color: rgba(255, 174, 0, 0.79);
  color: black;
}

.save.success {
  background-color: rgba(22, 109, 82, 0.63);
}

.button:hover,
.button:active,
.action-button:hover,
.action-button:active,
input[type="button"]:hover,
input[type="button"]:active,
input[type="reset"]:hover,
input[type="reset"]:active {
  color: black;
  background-color: rgba(0, 0, 0, 0.08);
}

button[type="submit"]:hover,
input[type="submit"]:hover,
input[type="submit"]:active {
  color: #fff;
  background-color: #e36414;
}

.button:disabled,
.action-button:disabled,
button[type="submit"]:disabled,
input[type="submit"]:disabled {
  opacity: 0.6;
}

input[type="button"].small,
.small.button,
input[type="submit"].small {
  font-size: 0.8em;
  height: 18px;
  line-height: 100%;
  font-weight: normal;
}

input[type="submit"].save,
form.save button[type="submit"]:not(.red.action-button) {
  height: 41px;
  font-weight: bold;
  line-height: 18px;
  color: #fff;
  background-color: #0f4c5c;
  border: none;
  box-shadow: none;
  border-radius: 8px;
  padding: 10px 30px;
  box-sizing: border-box;
}

input[type="submit"].save:hover,
form.save button[type="submit"]:not(.red.action-button):hover {
  background-color: #e36414;
  color: #fff;
  box-shadow: none;
}

input[type="reset"],
form.save button[type="reset"] {
  height: 41px;
  line-height: 18px;
  color: #fff;
  background-color: #c80100;
  border: none;
  box-shadow: none;
  border-radius: 8px;
  padding: 10px 30px;
  box-sizing: border-box;
}

input[type="reset"]:hover,
form.save button[type="reset"]:hover {
  background-color: #000;
  color: #fff;
  box-shadow: none;
}

.action-button.muted {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 0;
  height: auto;
  box-shadow: none;
  background: white;
  padding: 5px 20px;
}

.action-button.muted i.icon-caret-down {
  border: none;
}

.action-button.inline,
.button.inline {
  vertical-align: middle;
}

/* Dynamic forms in dialogs */

.dialog th,
.tip_box th {
  text-align: left;
}

.dialog th {
  background-color: #eee;
  padding: 10px;
}

.dialog th:first-child {
  border-top-left-radius: 10px;
}

.dialog th:last-child {
  border-top-right-radius: 10px;
}

.dialog tr td:first-child {
  border-bottom-left-radius: 10px;
}

.dialog tr td:last-child {
  border-bottom-right-radius: 10px;
}

.dialog table {
  border-collapse: collapse;
}

.dialog #new-user-form th {
  background-color: transparent;
  border: none;
  padding: 0 0 10px;
}

.dialog #new-user-form td {
  padding: 10px 10px 10px 0;
}

.dialog #new-user-form .ext_container {
  margin-left: 10px;
}

.dialog .ticketSelection + .select2-container {
  width: 260px !important;
  max-width: 260px;
  margin-right: 8px;
  display: inline-block !important;
  vertical-align: middle;
}

.dialog #participant-options {
  float: none;
}

.dialog #participant-options select,
.dialog #child-status select,
.dialog #parent-status select {
  margin-left: 10px;
}

.dialog #participant-options label.inline.checkbox,
.dialog #child-status label.inline.checkbox,
.dialog #parent-status label.inline.checkbox {
  display: block;
}

#selected-user-info td {
  border-bottom: 1px solid #ccc !important;
  padding: 10px;
}

#selected-user-info tr:last-child td {
  border-bottom: none !important;
}

#result-count div {
  padding: 5px 10px;
  text-align: left;
  font-weight: bold;
  width: 100%;
  margin: 0 auto;
}

#result-count .success {
  background: #e3ffd8;
  border: 1px solid #0a0;
}

#result-count .fail {
  background: #ffd8d8;
  border: 1px solid #a00;
}

/* Custom css for datepicker */

.ui-datepicker-trigger {
  display: inline-block;
  border: 0;
  padding: 0;
  margin-left: 2px;
  position: relative;
  top: 3px;
  width: 16px;
  height: 16px;
  background: inherit;
}

.custom-field .ui-datepicker-trigger {
  margin-left: 10px;
}

/* Upgrader */

#upgrader {
  width: 100%;
  height: auto;
  clear: both;
}

.sidebar {
  width: 220px;
  padding: 10px;
  border: 1px solid #c8ddfa;
  float: right;
  background: #f7fbfe;
}

.sidebar h3 {
  margin: 0 0 5px 0;
  padding: 0;
  text-indent: 32px;
  background: url("../images/cog.png?1312913866") top left no-repeat;
  line-height: 24px;
  color: #2a67ac;
}

#upgrader #main {
  width: 680px;
  float: left;
  padding-bottom: 20px;
}

#upgrader #main h1 {
  margin: 0;
  padding: 0;
  font-size: 1.6em;
  font-weight: normal;
}

#upgrader #main h2 {
  font-size: 1.2em;
  margin: 0;
  padding: 0;
  color: #e36414;
}

#upgrader #main h3 {
  margin: 0;
  padding: 0;
}

#upgrader #main div#intro {
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom: 1px solid #aaaaaa;
}

ul.progress {
  margin: 10px 0 20px 20px;
  padding: 0;
}

ul.progress li {
  list-style: none;
  margin: 0;
  padding: 0 0 2px 24px;
  background: url("../images/incomplete.png?1312910844");
  background-repeat: no-repeat;
  background-position: 0 50%;
}

ul.progress li.yes {
  background-image: url("../images/yes.png?1312906296");
}

ul.progress li.no {
  background-image: url("../images/no.png?1312906277");
}

ul.progress li.yes small {
  color: green;
}

ul.progress li.no small {
  color: red;
}

#bar {
  clear: both;
  padding-top: 10px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-top: 1px solid #aaaaaa;
}

#bar a.unstyled,
#bar a.unstyled:hover {
  font-weight: normal;
  background: none;
  border: none;
  text-decoration: underline;
  color: #2a67ac;
}

#bar.error {
  background: #ffd;
  text-align: center;
  color: #a00;
  font-weight: bold;
}

/* Overlay */

#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 9;
  -webkit-transform: translate3d(0, 0, 0);
  opacity: 0.8;
}

#loading,
#upgrading {
  border: 3px solid #777;
  border-radius: 10px;
  padding: 10px;
  width: 300px;
  background: #555
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAWUlEQVQYGY2PAQoAIAgDrQf6pf7kC2vCRlRUgrjqXFrMrI3McHdKiwhpiMrTDRL4ghL8geQIsc6EOwbMcsYXhIYyUlvTgXUeS1vzkXWG8OMRXCE0b+AJAtgB7jEc+2fs6e8AAAAASUVORK5CYII=)
    repeat;
  position: fixed;
  display: none;
  z-index: 3000;
  box-shadow: 0 5px 20px #001;
  vertical-align: middle;
  color: white;
}

#loading h1,
#upgrading h4 {
  margin: 3px 0 0 0;
  padding: 0;
  color: #d80;
}

.non-local-image {
  display: inline-block;
  border: 3px dashed #eee;
  border-radius: 5px;
}

.non-local-image:after {
  background: url(../../logo.php) center center no-repeat;
  background-size: cover;
  content: "";
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  display: block;
}

input[type="text"]:disabled,
input[type="checkbox"]:disabled {
  background-color: #f5f5f5;
  border-color: #e0e0e0;
  cursor: not-allowed;
}

input.dp {
  width: 10em;
}

.icon-warning-sign {
  color: #d33;
}

div.patch {
  border-bottom: 1px dotted #ccc;
  padding: 0.1em;
  margin-left: 1em;
}

.patch-title {
  color: #555;
}

div.selected-signature {
  border: 1px solid #ddd;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-style: none;
  border-top-style: dotted;
  padding: 0.3em 10px 5px;
  height: 2.5em;
  overflow-y: hidden;
  font-size: 15px;
  line-height: 1.25rem;
  background-color: white;
  background-color: rgba(255, 255, 255, 0.9);
}

div.selected-signature .inner {
  opacity: 0.5;
}

.action-button.danger:hover {
  opacity: 1;
  border-color: rgba(95, 75, 0, 0.8) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  background: linear-gradient(to bottom, #fc9f41 0%, #ce8114 100%);
}

.action-button.danger {
  color: #999 !important;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.5);
  opacity: 0.6;
}

.action-button.overlay {
  float: none;
  position: absolute;
  top: 4px;
  right: 5px;
}

.muted-button:hover {
  border: 1px solid #aaa;
  border: 1px solid rgba(0, 0, 0, 0.3);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  color: black;
}

.muted-button {
  border-radius: 5px;
  padding: 1px 5px;
  margin: -1px 0 -1px 5px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 0, 0, 0.1);
  background: linear-gradient(0, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
}

.sortable-rows tr td:hover {
  cursor: move;
}

.sortable {
  cursor: move;
}

.row-item {
  border: 1px solid #e5e7eb;
  padding: 10px 12px;
  position: relative;
  background: #fff;
  overflow: hidden;
}

.row-item:first-child {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.row-item:last-child {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.row-item + .row-item {
  margin-top: -1px;
}

.row-item .delete {
  border-left: 1px solid #ccc;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  width: 35px;
}

.row-item .delete:empty {
  visibility: hidden;
}

.row-item .button-group {
  font-size: 100%;
  position: absolute;
  top: 6px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.row-item .button-group div {
  display: inline-flex;
}

.row-item .button-group div a {
  padding: 4px 6px;
  color: #888;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.row-item .button-group div a:hover {
  color: #333;
  background: #f3f4f6;
}

.row-item .management {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #eee;
  clear: both;
}

.row-item .management table {
  width: 100%;
}

.row-item .management label {
  font-size: 0.8125rem;
  color: #555;
}

.row-item .management input[type="text"] {
  height: 34px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.8125rem;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.row-item .management input[type="text"]:focus {
  border-color: #fdc403;
  outline: none;
  box-shadow: 0 0 0 3px rgba(253, 196, 3, 0.15);
}

.row-item:first-child .delete {
  border-top-right-radius: 5px;
}

.row-item:last-child .delete {
  border-bottom-right-radius: 5px;
}

.row-item .delete:hover {
  background: #fdc403;
  color: #000 !important;
}

#sequences .manage-buttons {
  display: inline-block;
  margin-right: 60px;
}

.dialog .manage-buttons.pull-right {
  float: right;
  margin-right: 50px;
}

.dialog .manage-buttons .faded {
  font-size: 0.8125rem;
  color: #999;
}

.dialog .manage-buttons .current,
.dialog .manage-buttons .next {
  font-size: 0.875rem;
  font-weight: 600;
  color: #333;
}

tr.disabled td,
tr.disabled th {
  opacity: 0.6;
  background: #f5f5f5;
}

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

.quicknote .header {
  position: relative;
  display: block;
  padding: 10px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
}

.quicknote .header .header-left {
  display: inline-block;
}

.quicknote .header .header-right {
  display: inline-block;
  text-align: right;
  right: 1em;
  position: absolute;
}

.quicknote .header .options {
  display: inline-block;
  padding-left: 10px;
  margin-left: 5px;
  white-space: nowrap;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}

.quicknote .body {
  padding: 10px;
}

.quicknote a.action,
.floating-options a.action {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  display: inline-block;
  width: 15px;
  text-align: center;
  padding: 2px 2px;
  color: black !important;
  background-color: rgba(0, 0, 0, 0.05);
  border-width: 1px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.quicknote a.action:hover,
.floating-options a.action:hover {
  text-decoration: none;
  border-color: #ff9100;
  background-color: rgba(255, 145, 0, 0.05);
  border-radius: 3px;
}

.quicknote a.action.save-note,
.floating-options a.action.save-note {
  background-color: #bbeebb;
}

#new-note {
  margin-top: 10px;
}

.label {
  display: inline-block;
  position: relative;
  bottom: 1px;
  margin-bottom: 4px;
  font-size: 11px;
  padding: 0px 7px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  font-weight: bold;
  line-height: 18px;
  color: #ffffff;
  vertical-align: baseline;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #999999;
}

.label-bare {
  background-color: transparent;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #999999;
  color: #999999;
  text-shadow: none;
}

.label-info {
  background-color: #3a87ad;
}

.label-verified {
  border: 1px solid green;
  background-color: transparent;
  background-color: rgba(0, 0, 0, 0);
  color: green;
  text-shadow: none;
}

.label-danger {
  border: 1px solid red;
  background-color: transparent;
  background-color: rgba(0, 0, 0, 0);
  color: red;
  text-shadow: none;
}

.tab_content {
  position: relative;
}

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

.left-tabs {
  margin-left: 48px;
}

.floating-options {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 5px;
  padding-right: 5px;
}

i.note-type {
  color: #2a67ac;
  opacity: 0.8;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  padding-right: 8px;
}

table.custom-info th {
  background: transparent;
  border: none;
  padding: 5px;
  padding-top: 10px;
  border-bottom: 1px solid #ccc;
}

table.custom-info tr {
  vertical-align: top;
}

table.custom-info td {
  border-bottom: 1px solid #ccc;
  padding: 5px;
}

div.faq-status {
  padding-top: 6px;
}

.faq-title {
  font-size: 170%;
  font-weight: 600;
  margin-right: 10px;
}

.faq-content {
  width: 670px;
  margin: 0 15px;
}

.faq-category {
  margin: 0 15px;
}

.faq-meta section + section {
  margin-top: 15px;
}

button a {
  color: ButtonText !important;
  text-decoration: none;
}

button a:hover {
  text-decoration: none;
}

.bleed {
  padding: 0;
  margin: 0;
}

.doc-desc-title {
  font-weight: bold;
  text-transform: capitalize;
}

.doc-desc-opt {
  font-style: italic;
}

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

.ui-datepicker {
  z-index: 200 !important;
}

.draft-saved {
  background-color: black;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px 6px;
  border-radius: 3px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  line-height: 14px;
  position: absolute;
  top: 3em;
  right: 0.5em;
}

.delete-draft:hover {
  background-color: #fc9f41 !important;
}

.hidden {
  display: none;
}

.flush-right {
  text-align: right;
}

.flush-left {
  text-align: left;
}

.ltr {
  direction: ltr;
  unicode-bidi: embed;
}

.required {
  font-weight: bold;
}

.truncate {
  width: auto;
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.truncate.bleed {
  text-overflow: clip;
}

td.indented {
  padding-left: 20px;
}

.secondary_lang {
  padding: 3px 0;
  margin: 3px 0;
  border-bottom: 1px dotted #ccc;
}

.saved-search {
  padding: 5px;
}

.saved-search + .saved-search {
  border-top: 1px dotted #ccc;
}

.accordian {
  margin-bottom: 10px;
}

.accordian dt {
  border-radius: 4px;
  border: 1px solid #ccc;
}

.accordian dt.active {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.accordian dt,
dd {
  padding: 5px;
}

.accordian dt a {
  color: black;
  font-weight: 500;
  display: block;
}

.accordian dt.active a {
  color: #184e81;
  text-decoration: none;
}

.accordian dt:not(.active) a i {
  display: none;
}

.accordian dd {
  border-top: 0;
  font-size: 12px;
  margin-left: 0;
  border: 1px solid #ccc;
  border-top: none;
  box-shadow: inset 0px 10px 5px -10px rgba(0, 0, 0, 0.1);
  background-color: rgba(42, 103, 172, 0.1);
}

.accordian dt ~ dt {
  margin-top: 5px;
}

.accordian dd:last-of-type {
  position: relative;
  top: -1px;
}

#topic-forms tbody + tbody td.handle {
  padding-top: 15px;
}

#topic-forms #dynamic-actions > tr > td {
  padding: 5px;
}

.no-margin {
  margin: 0 !important;
}

.form-simple input,
.form-simple input[type="text"],
.form-simple input[type="password"],
.form-simple input[type="email"],
.form-simple input[type="number"] {
  margin-left: 0;
  width: 370px !important;
  max-width: 370px !important;
  min-width: 120px !important;
  height: 48px !important;
  padding: 12px 16px !important;
  font-size: 0.9375rem !important;
  font-family: "Open Sans", sans-serif !important;
  color: #333 !important;
  background-color: #fff !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  line-height: 1.5 !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

.form-simple select {
  margin-left: 0;
  width: 370px !important;
  max-width: 370px !important;
  min-width: 120px !important;
  height: 48px !important;
  padding: 12px 44px 12px 16px !important;
  font-size: 0.9375rem !important;
  font-family: "Open Sans", sans-serif !important;
  color: #333 !important;
  background-color: #fff !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.form-simple textarea {
  margin-left: 0;
  width: 100% !important;
  padding: 12px 16px !important;
  font-size: 0.9375rem !important;
  font-family: "Open Sans", sans-serif !important;
  color: #333 !important;
  background-color: #fff !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  line-height: 1.5 !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
  resize: vertical !important;
  min-height: 130px !important;
  height: auto !important;
}

.form-simple input:focus,
.form-simple input[type="text"]:focus,
.form-simple input[type="password"]:focus,
.form-simple input[type="email"]:focus,
.form-simple input[type="number"]:focus,
.form-simple select:focus,
.form-simple textarea:focus {
  outline: none !important;
  border-color: #fdc403 !important;
  box-shadow: 0 0 0 3px rgba(253, 196, 3, 0.15) !important;
}

.form-simple .redactor-focus.redactor-styles-on,
.form-simple .redactor-box:focus-within {
  border-color: #fdc403 !important;
  box-shadow: 0 0 0 3px rgba(253, 196, 3, 0.15) !important;
}

.sticky.bar.fixed {
  position: fixed;
  top: 0;
  left: 240px;
  z-index: 6;
  width: calc(100% - 240px);
  background-color: white;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 10px 20px;
  box-sizing: border-box;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.sidebar-collapsed .sticky.bar.fixed {
  left: 4rem;
  width: calc(100% - 4rem);
}

.sticky.bar .content {
  margin: auto;
  display: flex;
  align-items: center;
}

/* Listing pages: pull-left.flush-left is flex so cog sits inline with h2 */
.sticky.bar .content > .pull-left.flush-left {
  display: flex;
  align-items: center;
  gap: 4px;
  float: none;
  order: -1;
}

/* Ticket view: flush-left (no pull-left) — order before buttons */
.sticky.bar .content > .flush-left:not(.pull-left) {
  float: none;
  order: -1;
}

/* All pull-right elements pushed to the right (covers flush-right and non-flush-right) */
.sticky.bar .content > .pull-right {
  display: flex;
  align-items: center;
  float: none;
  margin-left: auto;
}

.sticky.bar .content > .pull-left.flush-left h2,
.sticky.bar .content > .flush-left h2 {
  margin: 0;
}

.sticky.bar.fixed .notsticky {
  display: none !important;
}

.sticky.bar.fixed .inline {
  float: left;
  display: inline;
  margin: 5px 10px 0 0;
}

.sticky.bar.opaque {
  background-color: transparent;
}

.sticky.bar.fixed h2 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #111827;
}

.sticky.bar:not(.fixed) .sticky.only {
  display: none;
}

/* Scroll-up button — only visible when bar is fixed, sits as flex item */
.sticky.bar.fixed .scroll-up {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-left: 12px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  box-shadow: none;
  color: #c4c8d0;
  flex-shrink: 0;
  text-decoration: none;
  font-size: 1.4rem;
  transition:
    color 0.15s,
    transform 0.15s;
}

.sticky.bar.fixed .scroll-up:hover {
  color: #fdc403;
  background: none;
  box-shadow: none;
  transform: translateY(-3px);
}

.content {
  width: 100% !important;
}

.scroll-up {
  display: none;
}

.message.bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 9px 15px;
  z-index: 10;
  background-color: white;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  opacity: 0.95;
}

.message.bar.bottom {
  bottom: 0;
  top: auto;
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.2);
}

.message.bar .avatar[class*=" oscar-"] {
  display: inline-block;
  width: 36px;
  height: 36px;
  margin-right: 10px;
  background-image: url(../images/oscar-avatars.png);
  background-repeat: no-repeat;
  background-size: 180px 72px;
}

.avatar.oscar-boy {
  background-position: -72px 0;
}

.avatar.oscar-borg {
  background-position: 0 -36px;
}

.message.bar .title {
  font-weight: bold;
  font-size: 1.1em;
}

.message.bar .body {
  margin-left: 42px;
}

.message.bar.warning {
  border-bottom: 3px solid orange;
}

.message.bar.bottom.warning {
  border-bottom: none;
  border-top: 3px solid orange;
}

.message.bar.danger {
  border-bottom: 3px solid red;
}

.message.bar.bottom.danger {
  border-bottom: none;
  border-top: 3px solid red;
}

.message.bar .title .avatar {
  width: auto;
  max-height: 20px;
  border-radius: 3px;
  margin: -4px 0.3em 0;
  vertical-align: middle;
}

/******** Start Thread Preview Styles ********/

.thread-preview {
  max-height: 350px;
  overflow-x: auto;
  margin: 8px 0;
}

/* Card wrapper — matches .thread-entry card design */
.thread-preview-entry {
  border-radius: 10px;
  margin-bottom: 10px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.thread-preview-entry:first-child {
  margin-top: 4px;
}

/* Header base */
.thread-preview-entry .header {
  padding: 10px 16px;
  border: none;
  border-radius: 0;
  cursor: pointer;
}

/* Header type colours — match thread-entry */
.thread-preview-entry.message .header {
  background: #fffbf2;
  border-left: 4px solid #fdc403;
}

.thread-preview-entry.response .header {
  background: #f8f9fa;
  border-left: 4px solid #d1d5db;
}

.thread-preview-entry.note .header {
  background: #fffaf0;
  border-left: 4px solid #e8903a;
}

.thread-preview .thread-name span:first-child {
  font-weight: 600;
}

/* Thread body */
.thread-preview-entry .thread-body {
  border: none;
  padding: 12px 16px;
  height: auto;
  overflow: visible;
}

.thread-preview-entry .thread-body .thread-teaser {
  width: auto;
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: inherit;
}

/* Collapsed state */
.thread-preview-entry.collapsed {
  margin-bottom: 6px;
  cursor: pointer;
}

.thread-preview-entry.collapsed .header {
  background: #f7f7f7;
  border-left: 4px solid #e0e0e0;
  border-radius: 10px;
}

.thread-preview-entry.collapsed .thread-body {
  height: 0;
  padding: 0;
  overflow: hidden;
}

.thread-preview-entry.collapsed .thread-body .thread-teaser {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/***Thread information styles***/
.thread-info {
  width: 60%;
}

/* Hide the dotted timeline line inside the preview */
.thread-preview #thread-items::before {
  display: none;
}

/******** End Thread Preview Styles ********/

#thread-items {
  z-index: 0;
  position: relative;
  padding-top: 0;
  padding-bottom: 15px;
  margin-top: 5px;
}

.type-icon {
  border-radius: 8px;
  background-color: #f4f4f4;
  padding: 4px 6px;
  margin-right: 5px;
  text-align: center;
  display: inline-block;
  font-size: 1.1em;
  border: 1px solid #ccc;
  vertical-align: top;
  position: relative;
}

.type-icon.dark {
  border-color: #666;
  background-color: #949494;
}

.thread-event img.avatar {
  vertical-align: middle;
  border-radius: 3px;
  width: auto;
  max-height: 20px;
  margin: -3px 3px 0;
}

.thread-event .description {
  margin-left: -30px;
  padding-top: 6px;
  padding-left: 30px;
  display: inline-block;
  width: 772px;
  width: calc(100% - 95px);
  line-height: 1.4em;
}

.freetext-files {
  padding: 10px;
  margin-top: 10px;
  border: 1px dotted #ddd;
  border-radius: 4px;
  background-color: #f5f5f5;
}

.freetext-files .file {
  margin-right: 10px;
  display: inline-block;
  width: 48%;
  padding-top: 0.2em;
}

.freetext-files .title {
  font-weight: bold;
  margin-bottom: 0.3em;
  font-size: 1.1em;
}

/* Form simple grid sizing */

.iblock {
  display: inline-block;
}

form .inset {
  padding: 10px;
}

.dialog form .quick-add {
  min-height: 150px;
}

.span12 {
  width: 100%;
}

.span6 {
  width: 48%;
  width: calc(50% - 10px);
}

.span6 + .span6 {
  margin-left: 1%;
  margin-left: calc(0 + 10px);
}

.form.footer {
  margin-top: 50px;
}

label.checkbox {
  display: block;
  padding-left: 1.3em;
  text-indent: -1.3em;
}

label.inline.checkbox {
  display: inline-block;
  margin-bottom: 10px;
}

label.inline.checkbox:last-child {
  margin-bottom: 0;
}

label.checkbox + label.checkbox {
  margin-top: 0.3em;
}

[class^="icon-"],
[class*=" icon-"] {
  /* Fix icons inside label.checkbox */
  text-indent: initial;
}

input[type="checkbox"] {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  margin-right: 5px;
  vertical-align: middle;
  position: relative;
  top: -0.05em;
  border: 2px solid #d0d0d0;
  border-radius: 4px;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

input[type="checkbox"]:checked {
  background-color: #fdc403;
  border-color: #fdc403;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
}

.vertical-pad {
  margin-top: 3px;
}

input,
textarea {
  padding: 10px;
  font-size: 0.95em;
  font-family: inherit;
  border-radius: 10px;
  border: 1px solid #ccc;
}

small {
  font-weight: normal;
  letter-spacing: 0.01px;
}

/* Form layouts */

table.grid.form {
  width: 100%;
  table-layout: fixed;
}

table.grid.form caption {
  font-size: 1.3em;
  font-weight: bold;
  text-align: start;
  padding: 0 9px;
}

.grid.form .cell {
  vertical-align: top;
}

.grid.form .field {
  padding: 5px;
}

.grid.form .field input:not([type="checkbox"]),
.grid.form .field textarea,
.grid.form .field select {
  width: 100%;
  max-width: 100%;
  display: block;
  box-sizing: border-box;
}

.dialog .grid.form .field input:not([type="checkbox"]),
.dialog .grid.form .field select {
  height: 48px !important;
  padding: 12px 16px !important;
  font-size: 0.9375rem !important;
  font-family: "Open Sans", sans-serif !important;
  color: #333 !important;
  background-color: #fff !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

.dialog .grid.form .field select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 44px !important;
  cursor: pointer !important;
}

.dialog .grid.form .field input:not([type="checkbox"]):focus,
.dialog .grid.form .field select:focus {
  outline: none !important;
  border-color: #fdc403 !important;
  box-shadow: 0 0 0 3px rgba(253, 196, 3, 0.15) !important;
}

.dialog button.ui-datepicker-trigger {
  display: none !important;
}

.grid.form .field > label {
  display: block;
  margin-bottom: 5px;
}

.grid.form .field > .field-hint-text {
  font-style: italic;
  margin: 0 10px 5px 10px;
  opacity: 0.8;
}

#basic_search {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  margin-bottom: 24px;
  padding: 28px 36px;
  border: none;
  border-radius: 12px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.06);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

#basic_search .pull-right {
  order: 2;
}

#basic-ticket-search {
  border: 1px solid #999;
  border-color: rgba(0, 0, 0, 0.45);
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

#basic_search label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

#basic_search > div:not(.input.attached):not(.action-dropdown) {
  display: flex;
  align-items: center;
  gap: 30px;
}

#basic_search
  > div:not(.input.attached):not(.action-dropdown):not(.pull-right) {
  width: 100%;
}

#basic_search form > div:not(.attached) {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
}

#basic_search #filter {
  width: 100%;
}

#basic_search .ui-datepicker-trigger {
  display: none;
}

#basic_search input[type="submit"],
#basic_search .action-button {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0 28px;
  height: 38px;
  line-height: 38px;
  border: none;
  background: #fdc403;
  color: #000;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(253, 196, 3, 0.3);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  white-space: nowrap;
}

#basic_search form[name="filter"] {
  display: flex;
  align-items: center;
  gap: 10px;
}


form[name="topics"] thead .pull-right {
  float: none;
  padding: 20px !important;
}

select {
  height: 48px;
  width: 100%;
  max-width: 350px;
  min-width: 150px;
  border: 1px solid #ccc;
  display: inline-block;
  padding: 10px 25px 10px 10px;
  font-size: 13px;
  border-radius: 10px;
  background: url(../images/arrow-down.png) no-repeat calc(100% - 10px) center;
  background-size: 10px;
  appearance: none;
  background-color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#cannedResp {
  margin-bottom: 10px;
}

a.attachment {
  padding-left: 1.2em;
  display: block;
}

.sidebar section header {
  font-weight: bold;
  margin-bottom: 0.3em;
}

#resizable-columns {
  margin: 10px 0;
  position: relative;
}

#resizable-columns .column-header:hover {
  cursor: pointer;
}

#resizable-columns .column-header {
  display: inline-block;
  padding: 5px 20px;
  background-color: #ddd;
  margin: 0 1px;
  position: relative;
  text-align: center;
  box-sizing: border-box;
}

#resizable-columns .column-header.ui-resizable:not(.active) {
  opacity: 0.4;
}

#resizable-columns .column-header.ui-resizable.active {
  background-color: #cfe6ff;
}

.ui-resizable-handle {
  cursor: pointer;
  cursor: ew-resize;
  cursor: col-resize;
  display: inline-block;
  vertical-align: bottom;
  position: absolute;
  right: 5px;
  color: #777;
}

.decoration + .decoration {
  margin-top: 10px;
}

.advanced-search .condition-property {
  margin: 7px 0 7px 25px;
}

.conditions .condition + .condition {
  margin-top: 10px;
}

img.avatar + img.avatar {
  margin-left: -14px;
  z-index: 1;
  transition: margin-left 0.1s linear;
}

.avatar.group:hover > img.avatar + img.avatar {
  margin-left: -4px;
}

.avatar.group {
  position: relative;
  z-index: 1;
  transition: margin-right 0.1s linear;
}

.avatar.group.\32:hover {
  margin-right: -10px;
}

.avatar.group.\33:hover {
  margin-right: -20px;
}

.avatar.group.\34:hover {
  margin-right: -30px;
}

.avatar.group.\35:hover {
  margin-right: -40px;
}

.avatar.group.\36:hover {
  margin-right: -50px;
}

.avatar.group.\37:hover {
  margin-right: -60px;
}

.avatar.group.\38:hover {
  margin-right: -70px;
}

.avatar.group.\39:hover {
  margin-right: -80px;
}

/* FIXME: Drop this with select2 4.0.1
 * Fixes a rendering issue on Safari
 */

.select2-search__field {
  -webkit-appearance: textfield;
}

/* Fixes Select2 placeholder bug where
 * placeholder is cutoff.
 */

.select2-selection__rendered,
.select2-search,
.select2-search__field:not([placeholder=""]) {
  width: 100% !important;
}

.select2-search--dropdown {
  width: calc(100% - 8px) !important;
}

/* Fix Canned Responses Select2 Height */

#resp_sec .select2-results,
#resp_sec .select2-results__choices {
  height: auto;
  max-height: 400px !important;
}

#select2-cannedResp-results {
  height: auto;
  max-height: 400px !important;
}

.icon-remove-circle::before {
  content: "\f00d" !important;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  margin-right: 5px;
}

.redactor-styles {
  margin: 0 !important;
}

/* ============================================
   NEW STYLES FROM REDESIGN
   ============================================ */

/* ============================================
   SIDEBAR
   ============================================ */

#sidebar {
  width: 240px;
  min-width: 240px;
  background: #fff;
  border-right: none;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: visible;
  z-index: 100;
  flex-shrink: 0;
  transition:
    width 0.25s ease,
    min-width 0.25s ease;
}

#sidebar-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  transition: background 0.2s ease;
}

#sidebar-toggle:hover {
  background: #f0f0f0;
}

#sidebar-toggle img {
  width: 1.25rem;
  height: 1.25rem;
}

.sidebar-collapsed #sidebar {
  width: 4rem;
  min-width: 4rem;
  overflow: hidden;
}

.sidebar-collapsed #sidebar #nav {
  padding: 0.5rem 0.5rem;
  align-items: center;
}

.sidebar-collapsed #sidebar #nav a {
  justify-content: center;
  padding: 0.75rem;
  font-size: 0;
  gap: 0;
}

.sidebar-collapsed #main-area {
  max-width: calc(100% - 4rem);
}

#sidebar-logo {
  padding: 1.25rem 1rem;
  text-align: left;
}

#sidebar-logo a {
  display: block;
  text-decoration: none;
}

#sidebar-logo img {
  max-height: 40px;
  max-width: 180px;
  height: auto;
  width: auto;
  border: none;
  outline: none;
}

.sidebar-collapsed #sidebar-logo {
  visibility: hidden;
}

#sidebar #nav {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: transparent;
  white-space: normal;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  clear: none;
}

#sidebar #nav .active,
#sidebar #nav .inactive {
  display: block;
  text-align: left;
  position: relative;
  border-radius: 0.75rem;
  transition: all 0.2s ease;
}

#sidebar #nav .active {
  background: #fdc403;
  box-shadow: 0 4px 15px rgba(253, 196, 3, 0.25);
}

#sidebar #nav .active a {
  color: #000;
  font-weight: 700;
}

#sidebar #nav .inactive:hover {
  background: #f5f5f5;
}

#sidebar #nav a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #999;
  text-decoration: none;
  white-space: nowrap;
}

#sidebar #nav .inactive:hover > a {
  color: #555;
}

#sidebar #nav > li + li {
  margin-left: 0;
}

.nav-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  vertical-align: middle;
}

.icon-cog {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.35rem;
}

#sidebar #nav li > ul {
  display: none;
}

#sidebar-footer {
  margin-top: auto;
  padding: 1.25rem 0.75rem 1.75rem;
  border-top: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.sidebar-welcome {
  font-size: 0.8rem;
  color: #bbb;
  padding: 0 1rem 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
}

.sidebar-welcome strong {
  color: #444;
  font-weight: 700;
}

.sidebar-footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.sidebar-footer-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #888;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0.75rem;
  transition: all 0.2s ease;
}

.sidebar-footer-link:hover {
  background: #f5f5f5;
  color: #333;
  text-decoration: none;
}

.sidebar-footer-icon {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  opacity: 0.5;
  transition: all 0.2s ease;
}

.sidebar-footer-link:hover .sidebar-footer-icon {
  opacity: 0.85;
  transform: scale(1.08);
}

.panel-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  margin: 0 calc((1.25rem - 8px) / 2);
}

.panel-dot--admin {
  background: #fdc403;
  box-shadow: 0 0 6px rgba(253, 196, 3, 0.5);
}

.panel-dot--agent {
  background: #ccc;
}

.sidebar-collapsed #sidebar-footer {
  padding: 0.75rem 0.5rem;
  align-items: center;
}

.sidebar-collapsed #sidebar-footer .sidebar-welcome {
  display: none;
}

.sidebar-collapsed #sidebar-footer .sidebar-footer-link {
  justify-content: center;
  padding: 0.6rem;
  font-size: 0;
  gap: 0;
}

.sidebar-collapsed #sidebar-footer .sidebar-footer-icon {
  width: 1.35rem;
  height: 1.35rem;
}

/* ============================================
   MAIN AREA
   ============================================ */

#main-area {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  max-width: calc(100% - 240px);
  transition: max-width 0.25s ease;
}

#pjax-container {
  width: 100%;
}

#header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

#header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

.welcome-text {
  font-size: 0.8125rem;
  color: #bbb;
  cursor: default;
  white-space: nowrap;
  letter-spacing: 0.03em;
  padding-right: 1.15rem;
}

.welcome-text strong {
  color: #555;
  font-weight: 700;
}

.header-links {
  display: flex;
  align-items: center;
  gap: 0;
}

.header-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1rem;
  font-weight: 600;
  color: #999;
  text-decoration: none;
  transition: all 0.2s ease;
  padding: 0.4rem 1.5rem;
  white-space: nowrap;
  border-radius: 0.375rem;
}

.header-link:hover {
  color: #111;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.03);
}

.header-icon {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  transition: all 0.2s ease;
  filter: brightness(0) saturate(100%) invert(15%) sepia(0%) saturate(0%)
    hue-rotate(0deg);
  opacity: 0.85;
}

.header-link:hover .header-icon {
  opacity: 1;
  transform: scale(1.05);
}

.header-links .header-link + .header-link {
  border-left: 1px solid #e8e8e8;
}

#header > #logo {
  display: none;
}

#header > #info,
#header > p#info {
  display: none;
}

#pjax-container #nav,
#pjax-container > #nav,
#main-area > #pjax-container > #nav {
  display: none;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: none;
  background: none;
}

#pjax-container > nav {
  margin: 0;
  padding: 0;
}

#sub_nav:has(#customQ_nav) {
  justify-content: flex-start;
}

#sub_nav > li {
  display: inline-block;
  margin: 0;
  padding: 0;
  position: relative;
  list-style: none;
}

#sub_nav > li > a {
  display: block;
  padding: 0.875rem 1.25rem;
  color: #aaa;
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 600;
  transition: color 0.2s ease;
  border: none;
  background: transparent;
  background-image: none;
  border-radius: 0;
  white-space: nowrap;
  position: relative;
}

#sub_nav > li > a:hover {
  color: #333;
  background: transparent;
  text-decoration: none;
}

#sub_nav > li.active > a,
#sub_nav > li > a.active {
  color: #111;
  background: transparent;
  font-weight: 700;
  border-bottom: none;
}

#sub_nav > li.active > a::after,
#sub_nav > li > a.active::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  height: 3px;
  background-color: #fdc403;
}

#sub_nav > li > a i,
#sub_nav > li > a [class^="icon-"] {
  display: none;
}

#customQ_nav .jb-overflowmenu {
  display: block;
  width: 100%;
}

#customQ_nav .jb-overflowmenu-menu-primary {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: stretch;
  gap: 0;
}

#customQ_nav .jb-overflowmenu-menu-primary > li.item {
  position: relative;
  padding: 0;
  margin: 0;
  display: inline-block;
  border: none;
  border-radius: 0;
  background: transparent;
}

#customQ_nav .jb-overflowmenu-menu-primary > li.item > a {
  display: block;
  padding: 0.875rem 1.25rem;
  color: #aaa;
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 600;
  transition: color 0.2s ease;
  border: none;
  background: transparent;
  background-image: none;
  border-radius: 0;
  white-space: nowrap;
  position: relative;
}

#customQ_nav .jb-overflowmenu-menu-primary > li.item:hover > a {
  color: #333;
  background: transparent;
}

#customQ_nav .jb-overflowmenu-menu-primary > li.item.active > a,
#customQ_nav .jb-overflowmenu-menu-primary > li.item > a.active {
  color: #111;
  font-weight: 700;
  border-bottom: 3px solid #fdc403;
}

.customQ-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0;
  border-radius: 0.625rem;
  border: 1px solid #e0e0e0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  padding: 0;
  background: #fff;
  z-index: 9999;
  min-width: 220px;
}

.customQ-dropdown:before,
.customQ-dropdown:after {
  display: none;
}

.customQ-dropdown ul {
  border: none;
  box-shadow: none;
  border-radius: 0.625rem;
  padding: 0.5rem 0;
  margin: 0;
  background: transparent;
  list-style: none;
}

.customQ-dropdown ul li a,
.customQ-dropdown ul li > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #555;
  text-decoration: none;
  padding: 0.5rem 1rem;
  line-height: 1.4;
  white-space: nowrap;
  transition: all 0.15s ease;
  border: none;
  border-bottom: none;
  background: transparent;
}

.customQ-dropdown ul li:hover {
  background: #f8f9fb;
}

.customQ-dropdown ul li:hover a,
.customQ-dropdown ul li:hover > a {
  background: transparent;
  color: #111;
}

.customQ-dropdown ul li a:hover,
.customQ-dropdown ul li > a:hover {
  background-color: transparent;
  color: #111;
  border: none;
  border-bottom: none;
}

.customQ-dropdown ul li.active a,
.customQ-dropdown ul li.active > a,
.customQ-dropdown ul li a.active,
.customQ-dropdown ul li > a.active {
  background-color: #fff8e1;
  color: #111;
  font-weight: 600;
  border: none;
  border-bottom: none;
}

.customQ-dropdown ul li.active:hover a,
.customQ-dropdown ul li.active:hover > a {
  background-color: #ffe082;
  color: #111;
  border: none;
  border-bottom: none;
}

.customQ-dropdown ul li a span,
.customQ-dropdown ul li > a > span {
  color: #999;
  font-weight: 600;
  font-size: 0.875rem;
  margin-left: 1rem;
}

.customQ-dropdown ul li.add-personalQ {
  border-top: 1px solid #eee;
  margin-top: 0.25rem;
  padding-top: 0.25rem;
}

.customQ-dropdown ul li.add-personalQ a {
  color: #999;
  font-size: 0.875rem;
}

.customQ-dropdown ul li.add-personalQ:hover a {
  background: transparent;
  color: #fdc403;
}

#sub_nav .open,
#sub_nav .answered,
#sub_nav .mine,
#sub_nav .closed,
#sub_nav .search,
#sub_nav .new {
  background-image: none;
  padding-left: 0;
}

table.list thead tr,
table.dashboard-stats thead tr,
table#topic-forms thead tr,
#entries table thead tr {
  background: #fff;
  position: relative;
}

table.list thead tr::after,
table.dashboard-stats thead tr::after,
table#topic-forms thead tr::after,
#entries table thead tr::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 5%;
  right: 5%;
  height: 3px;
  background: linear-gradient(
    to right,
    transparent 0%,
    #fdc403 30%,
    #fdc403 70%,
    transparent 100%
  );
  border-radius: 2px;
}

table.list th a:hover,
table.dashboard-stats th a:hover {
  color: #fdc403;
}

table.list thead th a:hover,
table.dashboard-stats thead th a:hover {
  background: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3.9375C12.1522 3.9375 12.2979 3.99917 12.4038 4.10842L15.4038 7.20217C15.6201 7.42519 15.6146 7.78132 15.3916 7.99755C15.1685 8.21385 14.8124 8.20838 14.5962 7.98533L12.5625 5.8881V13.5C12.5625 13.8107 12.3106 14.0625 12 14.0625C11.6893 14.0625 11.4375 13.8107 11.4375 13.5V5.8881L9.4038 7.98533C9.18757 8.20838 8.83147 8.21385 8.60842 7.99755C8.38537 7.78132 8.3799 7.42519 8.5962 7.20217L11.5962 4.10842C11.7021 3.99917 11.8478 3.9375 12 3.9375ZM6 3.9375C6.31066 3.9375 6.5625 4.18934 6.5625 4.5V12.1119L8.5962 10.0147C8.81242 9.79162 9.16852 9.78615 9.39157 10.0025C9.61462 10.2187 9.6201 10.5748 9.4038 10.7978L6.40382 13.8916C6.29788 14.0009 6.15218 14.0625 6 14.0625C5.84782 14.0625 5.70212 14.0009 5.59618 13.8916L2.59618 10.7978C2.37991 10.5748 2.3854 10.2187 2.60842 10.0025C2.83144 9.78615 3.18755 9.79162 3.40382 10.0147L5.4375 12.1119V4.5C5.4375 4.18934 5.68934 3.9375 6 3.9375Z' fill='%23FDC403'/%3E%3C/svg%3E")
    right center no-repeat;
  background-size: 14px 14px;
}

table.list tbody tr {
  border-bottom: 1px solid #f0f2f5;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

table.list tbody tr:last-child {
  border-bottom: none;
}

table.list tbody tr:hover {
  z-index: 1;
}

table.list tbody tr:hover td {
  background: #fbfbfb;
  color: #1f2937;
}

table.list tbody td a {
  color: #4b5563;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
  position: relative;
}

table.list tbody td a:hover {
  color: #fdc403;
  text-decoration: underline;
}

table.list tbody td a:active {
  transform: scale(0.98);
}

table tfoot {
  background: #fff;
}

table tfoot td a {
  color: #475569;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
  padding: 6px 12px;
  border-radius: 6px;
  margin: 0 4px;
  display: inline-block;
}

table tfoot td a:hover {
  color: #fdc403;
  background: rgba(253, 196, 3, 0.08);
  text-decoration: none;
}

#basic_search .pull-left,
#basic_search .pull-right {
  float: none;
  width: 100%;
}

#basic_search > div:not(.action-dropdown):not(.noclick-dropdown) {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: auto;
  height: auto;
}

#basic_search form {
  display: flex;
  align-items: center;
  gap: 20px;
}

#basic_search input[type="text"],
#basic_search input.dp,
#basic_search select {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0 16px;
  height: 38px;
  line-height: 38px;
  width: 180px;
  font-size: 0.875rem;
  color: #374151;
  background: #fff;
  outline: none;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
  white-space: nowrap;
}

#basic_search input[type="text"]:focus,
#basic_search input.dp:focus,
#basic_search select:focus {
  border-color: #fdc403;
}

#basic_search input[type="submit"]:hover,
#basic_search .action-button:hover {
  background: linear-gradient(180deg, #fdc403 0%, #e5b000 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(253, 196, 3, 0.4);
}

#basic_search .input.attached {
  display: flex;
  align-items: center;
  margin: 0;
}

#basic_search .input.attached input {
  border: 1px solid #e5e7eb;
  border-radius: 12px 0 0 12px;
  padding: 0 16px;
  height: 38px;
  line-height: 38px;
  width: 200px;
  font-size: 0.875rem;
  color: #374151;
  background: #fff;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

#basic_search .input.attached input:focus {
  border-color: #fdc403;
}

#basic_search .input.attached .button.attached {
  height: 38px;
  border: none;
  background: #fdc403;
  color: #000;
  border-radius: 0 12px 12px 0;
  padding: 0 16px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: none;
  margin: 0;
}

#basic_search .input.attached .button.attached:hover {
  background: linear-gradient(180deg, #fdc403 0%, #e5b000 100%);
  transform: translateY(-1px);
}

#basic_search a:not(.button) {
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
  white-space: nowrap;
}

#basic_search a:not(.button):hover {
  color: #fdc403;
}

.action-button:hover,
.button:hover {
  border-color: #fdc403;
  color: #000;
  background: #fff;
  box-shadow: none;
}

a.green.button,
.green.button {
  background: #fdc403;
  color: #000;
  border: none;
  border-radius: 8px;
  font-family: "Open Sans", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(253, 196, 3, 0.3);
  transition: all 0.3s ease;
  padding: 12px 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

a.green.button:hover,
.green.button:hover {
  background: linear-gradient(180deg, #fdc403 0%, #e5b000 100%) !important;
  transform: translateY(-1px);
  text-decoration: none !important;
  color: #000 !important;
  border: none !important;
  box-shadow: none !important;
}

.action-button[data-dropdown] {
  gap: 4px;
  justify-content: space-between;
}

.action-button[data-dropdown] .icon-caret-down {
  margin-left: auto;
  order: 2;
}

.icon-refresh {
  display: none !important;
}

div button[type="submit"]:not(.action-button):not(.attached),
div input[type="submit"]:not(.action-button):not(.attached),
input[type="submit"].save,
form.save button[type="submit"]:not(.red.action-button) {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  height: 44px;
  padding: 0 32px;
  background: #fdc403;
  color: #000;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(253, 196, 3, 0.3);
  box-sizing: border-box;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

div button[type="submit"]:not(.action-button):not(.attached):hover,
div input[type="submit"]:not(.action-button):not(.attached):hover,
input[type="submit"].save:hover,
form.save button[type="submit"]:not(.red.action-button):hover {
  background: linear-gradient(180deg, #fdc403 0%, #e5b000 100%);
  transform: translateY(-1px);
}

input[type="button"].close,
button[name="cancel"],
input[name="cancel"],
input[type="reset"],
form.save button[type="reset"],
form button.red.action-button {
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;
  height: 44px;
  padding: 0 20px;
  background: transparent;
  color: #999;
  border: none;
  border-radius: 8px;
  box-sizing: border-box;
  box-shadow: none;
  transition: all 0.2s ease;
}

input[type="button"].close:hover,
button[name="cancel"]:hover,
input[name="cancel"]:hover,
input[type="reset"]:hover,
form.save button[type="reset"]:hover,
form button.red.action-button:hover {
  color: #555;
  background: transparent;
  border: none;
  box-shadow: none;
  text-decoration: none;
}

/* ============================================
   TEMPLATE LIST ITEMS
   ============================================ */

.template-list-item,
.page-template-item {
  display: block;
  padding: 1.5rem 1.5rem;
  margin-bottom: 0;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
  text-decoration: none !important;
  color: #333;
}

.template-list-item:hover,
.page-template-item:hover {
  background: #fffbf0;
  border-color: #fdc403;
  text-decoration: none !important;
}

.template-list-item h4,
.page-template-item h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #000;
  text-decoration: none !important;
}

.template-list-item p,
.page-template-item p {
  margin: 0;
  font-size: 0.875rem;
  color: #666;
  line-height: 1.5;
}

.template-list-item .last-updated,
.page-template-item .last-updated {
  font-size: 0.8125rem;
  color: #999;
  margin-top: 0.5rem;
  font-style: italic;
}

/* ============================================
   INFO BANNER
   ============================================ */

#msg_info,
.info-banner {
  background: #fffbf0 !important;
  border: 1px solid #fdc403 !important;
  border-left: 4px solid #fdc403 !important;
  border-radius: 8px !important;
  padding: 1rem 1.25rem !important;
  color: #333 !important;
  margin: 1rem 0 !important;
}

#msg_info i.icon-info-sign,
.info-banner i.icon-info-sign {
  color: #666 !important;
}

#msg_notice,
.success-banner,
.notice-banner {
  background: #fffbf0 !important;
  border: 1px solid #fdc403 !important;
  border-left: 4px solid #fdc403 !important;
  border-radius: 8px !important;
  padding: 1rem 1.25rem !important;
  color: #333 !important;
  margin: 1rem 0 !important;
  background-image: none !important;
}

#msg_warning,
.warning-banner,
#msg_error,
.error-banner {
  background: #fdf2f2 !important;
  border: 1px solid #e8b4b4 !important;
  border-left: 4px solid #c0392b !important;
  border-radius: 8px !important;
  padding: 1rem 1.25rem !important;
  color: #7a2020 !important;
  margin: 1rem 0 !important;
  background-image: none !important;
}

#msg_warning i,
.warning-banner i,
#msg_error i,
.error-banner i {
  display: none !important;
}

#msg_warning .Icon,
.warning-banner .Icon,
#msg_error .Icon,
.error-banner .Icon,
#msg_notice .Icon,
.notice-banner .Icon,
.success-banner .Icon {
  background-image: none !important;
  padding-left: 0 !important;
}

/* ============================================
   ADVANCED SEARCH CRITERIA FORM STYLING
   ============================================ */
#criteria,
#columns {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 26px 30px;
  margin-top: 18px;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.03),
    0 8px 24px rgba(0, 0, 0, 0.03);
}

#criteria hr {
  display: none;
}

#criteria strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #222;
  margin-top: 12px;
}

#criteria table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 28px 16px;
}

#criteria td {
  vertical-align: top;
}

#criteria td input[type="text"],
#criteria td select {
  height: 44px;
  width: 100%;
  max-width: 360px;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.9375rem;
  font-family: "Open Sans", sans-serif;
  color: #333;
  background: #fff;
  box-sizing: border-box;
  margin-bottom: 12px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

#criteria td input[type="text"]:focus,
#criteria td select:focus {
  border-color: #fdc403;
  outline: none;
  box-shadow: 0 0 0 3px rgba(253, 196, 3, 0.15);
}

#criteria .error {
  color: #c0392b;
  font-size: 0.8125rem;
  margin-top: 4px;
}

#criteria .error-banner {
  background: #fee;
  border: 1px solid #dc2626;
  border-radius: 8px;
  padding: 12px 16px;
  color: #dc2626;
  margin-bottom: 16px;
}

#criteria .adv-search-field-container {
  padding: 8px 0;
}

#criteria .adv-search-field label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  cursor: pointer;
  padding-left: 0 !important;
  text-indent: 0 !important;
}

#criteria label.checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 0 !important;
  text-indent: 0 !important;
}

#criteria .adv-search-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex: 0 0 18px;
  appearance: none;
  border: 2px solid #d0d0d0;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
  margin: 0;
}

#criteria .adv-search-field input[type="checkbox"]:checked {
  background-color: #fdc403;
  border-color: #fdc403;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
}

#criteria .adv-search-field-body {
  margin-left: 28px;
  margin-top: 8px;
}

#criteria select#parent-id {
  margin-bottom: 20px;
}

#criteria .adv-search-field-body.hidden {
  display: none;
}

#criteria .adv-search-field-body select,
#criteria .adv-search-field-body input[type="text"],
#criteria #search-add-new-field {
  height: 42px;
  width: 100%;
  max-width: 360px;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.875rem;
  font-family: "Open Sans", sans-serif;
  color: #333;
  background: #fff;
  box-sizing: border-box;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

#criteria #search-add-new-field {
  margin-top: 16px;
}

#criteria .adv-search-field-body input:focus,
#criteria .adv-search-field-body select:focus,
#criteria #search-add-new-field:focus {
  border-color: #fdc403;
  outline: none;
  box-shadow: 0 0 0 3px rgba(253, 196, 3, 0.15);
}

/* ============================================
   ADVANCED SEARCH DIALOG CONTAINER
   ============================================ */

#advanced-search h3.drag-handle {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #111 !important;
  margin: 0 0 16px 0 !important;
  padding-right: 32px !important;
}

#advanced-search > hr,
#advanced-search form > hr {
  border: none !important;
  border-top: 1px solid #e5e7eb !important;
  margin: 16px 0 !important;
}

#advanced-search select#parent {
  width: 100% !important;
  height: 42px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  font-size: 0.9375rem !important;
  font-family: "Open Sans", sans-serif !important;
  color: #333 !important;
  background: #fff !important;
  box-sizing: border-box !important;
  margin-bottom: 14px !important;
  transition: border-color 0.2s ease !important;
}

#advanced-search select#parent:focus {
  border-color: #fdc403 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(253, 196, 3, 0.15) !important;
}

#advanced-search a#save {
  color: #fdc403 !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

#advanced-search a#save:hover {
  color: #e5b000 !important;
}

#save-changes {
  border-top: 1px solid #e5e7eb !important;
  padding: 14px 0 4px !important;
}

#save-changes input[name="queue-name"] {
  height: 40px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  font-size: 0.9rem !important;
  font-family: "Open Sans", sans-serif !important;
  color: #333 !important;
  background: #fff !important;
  box-sizing: border-box !important;
  margin-right: 8px !important;
  transition: border-color 0.2s ease !important;
}

#save-changes input[name="queue-name"]:focus {
  border-color: #fdc403 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(253, 196, 3, 0.15) !important;
}

#advanced-search .full-width {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 4px !important;
}

#advanced-search ul.clean.tabs li i {
  display: none !important;
}

/* ============================================
   PROFILE PAGE STYLING
   ============================================ */

.profile-wrapper {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px;
}

.profile-wrapper h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 24px 0;
}

.profile-wrapper .tab_content,
.profile-wrapper #signature {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 40px 44px;
  margin-top: 24px;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.03),
    0 8px 24px rgba(0, 0, 0, 0.03);
}

.profile-wrapper table.two-column {
  width: 100%;
  border: none;
  border-collapse: separate;
  border-spacing: 0;
}

.profile-wrapper table.two-column td {
  border: none;
  padding: 14px 0;
  vertical-align: middle;
  font-size: 0.9375rem;
  color: #555;
  line-height: 1.5;
}

.profile-wrapper table.two-column td.required {
  font-weight: 600;
  color: #111;
}

.profile-wrapper table.two-column td:first-child {
  width: 180px;
  font-weight: 500;
  color: #374151;
  padding-right: 20px;
}

.profile-wrapper tr.header th {
  background: none;
  border: none;
  box-shadow: none;
  padding: 32px 0 0 0;
  border-radius: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: #374151;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
}

.profile-wrapper tr.header th::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #fdc403;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.profile-wrapper tr.header th::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #f0f0f0;
  margin-top: 12px;
  margin-bottom: 4px;
}

.profile-wrapper tr.header th small {
  font-weight: 400;
  color: #b0b5bf;
  font-size: 0.75rem;
  display: block;
  margin-top: 4px;
  text-transform: none;
  letter-spacing: 0;
}

.profile-wrapper tbody:first-child tr.header th {
  padding-top: 0;
}

.profile-wrapper .avatar.pull-left {
  border-radius: 50% !important;
  overflow: hidden !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  width: 80px !important;
  height: 80px !important;
  margin: 0 24px 0 0 !important;
}

.profile-wrapper .avatar.pull-left img,
.profile-wrapper .avatar.pull-left span {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-wrapper .avatar .button {
  display: none;
}

.profile-wrapper table.two-column tbody tr:not(.header) {
  border-radius: 8px;
}

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

.profile-wrapper .tab_content input[type="checkbox"],
.profile-wrapper .tab_content label.checkbox input[type="checkbox"],
.profile-wrapper td input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  max-height: 18px;
  border: 2px solid #d0d0d0;
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-sizing: border-box;
  display: inline-block;
  position: static;
  top: auto;
  background: #fff;
  box-shadow: none;
  float: none;
}

.profile-wrapper .tab_content input[type="checkbox"]:checked,
.profile-wrapper .tab_content label.checkbox input[type="checkbox"]:checked,
.profile-wrapper td input[type="checkbox"]:checked {
  background-color: #fdc403;
  border-color: #fdc403;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 11px;
  background-repeat: no-repeat;
  background-position: center;
}

.profile-wrapper label.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9375rem;
  color: #333;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
}

.profile-wrapper .faded {
  color: #9ca3af;
  font-size: 0.8125rem;
  margin-top: 2px;
}

.profile-wrapper .error {
  color: #c0392b;
  font-size: 0.8125rem;
  margin-top: 4px;
}

.profile-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid #f0f0f0;
}

.profile-buttons-left {
  display: flex;
  align-items: center;
}

.profile-buttons-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-buttons button[name="submit"] {
  background: #fdc403;
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 0 32px;
  height: 46px;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: "Open Sans", sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(253, 196, 3, 0.3);
}

.profile-buttons button[name="reset"],
.profile-buttons button[name="cancel"] {
  background: transparent;
  color: #9ca3af;
  border: none;
  border-radius: 8px;
  padding: 0 20px;
  height: 46px;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: "Open Sans", sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: none;
}

.profile-wrapper .action-button {
  height: 38px;
  padding: 0 18px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background: #fafafa;
  color: #374151;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: "Open Sans", sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}

.profile-wrapper span.error {
  color: #c0392b;
  font-weight: 600;
}

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

i.help-tip,
i.icon-question-sign {
  color: #babdc3;
  opacity: 1;
  font-size: 1rem;
}

i.help-tip:hover,
i.icon-question-sign:hover {
  color: #7f838b;
}

#content input[type="text"]:not(#basic_search input),
#content input[type="tel"],
#content input[type="number"],
#content input[type="email"],
#content input[type="password"],
#content textarea,
#content select {
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.9375rem;
  font-family: "Open Sans", sans-serif;
  color: #333;
  background-color: #fff;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  box-sizing: border-box;
  max-width: 370px;
  min-width: 120px;
  line-height: 1.5;
  height: 48px;
}

#content textarea {
  min-height: 48px;
  height: auto;
  resize: vertical;
}

#content input[type="text"]:not(#basic_search input):focus,
#content input[type="tel"]:focus,
#content input[type="number"]:focus,
#content input[type="email"]:focus,
#content input[type="password"]:focus,
#content textarea:focus,
#content select:focus {
  border-color: #fdc403;
  outline: none;
  box-shadow: 0 0 0 3px rgba(253, 196, 3, 0.15);
}

#content input::placeholder,
#content textarea::placeholder {
  color: #999;
}

#content select:not(#basic_search select) {
  height: 48px;
  max-width: 370px;
  min-width: 120px;
  border: 1px solid #d0d0d0;
  display: inline-block;
  padding: 12px 44px 12px 16px;
  font-size: 0.9375rem;
  color: #333;
  border-radius: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  appearance: none;
  background-color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  cursor: pointer;
}

input[type="radio"]:checked {
  border-color: #fdc403;
}

.form_table td,
.settings_table td,
#nticket-form table td {
  border: none;
  padding: 16px 12px;
}

.form_table input[type="radio"],
.form_table input[type="checkbox"],
.settings_table input[type="radio"],
.settings_table input[type="checkbox"] {
  margin-left: 0;
  padding-left: 0;
}

/* Section headers */

#nticket-form table th,
.settings_table th,
.form_table th,
div.section-break,
div.form-header.section-break {
  text-align: left;
  box-shadow: none;
  border: none;
  background: #f8f9fa;
  padding: 14px 16px;
  border-radius: 8px;
}

div.section-break h3,
div.form-header h3,
.form_table th h3,
.settings_table th h3,
.settings_table th h4,
.form_table th h4,
#nticket-form table th h4 {
  margin: 0;
  padding: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #111;
  font-style: normal;
  letter-spacing: -0.01em;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  min-height: 48px;
  background: #fff;
  padding: 0 16px;
  display: flex;
  align-items: center;
  font-family: "Open Sans", sans-serif;
  font-size: 0.9375rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open
  .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus
  .select2-selection--multiple {
  border-color: #fdc403;
  box-shadow: 0 0 0 3px rgba(253, 196, 3, 0.15);
  outline: none;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: #333;
  line-height: normal;
  padding: 0;
  font-family: "Open Sans", sans-serif;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 100%;
  right: 12px;
  top: 0;
  display: flex;
  align-items: center;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow
  b {
  border-color: #666 transparent transparent transparent;
}

.select2-container--default.select2-container--open
  .select2-selection--single
  .select2-selection__arrow
  b {
  border-color: transparent transparent #666 transparent;
}

.select2-dropdown {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-top: 4px;
}

.select2-container--open .select2-dropdown--below {
  border-top: 1px solid #e0e0e0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.select2-container--open .select2-dropdown--above {
  border-bottom: 1px solid #e0e0e0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.875rem;
  font-family: "Open Sans", sans-serif;
  outline: none;
}

.select2-container--default
  .select2-search--dropdown
  .select2-search__field:focus {
  border-color: #fdc403;
  box-shadow: 0 0 0 3px rgba(253, 196, 3, 0.15);
}

.select2-results__options {
  padding: 4px 0;
}

.select2-container--default .select2-results__option {
  padding: 10px 16px;
  font-size: 0.9375rem;
  font-family: "Open Sans", sans-serif;
  color: #555;
  transition: all 0.15s ease;
}

.select2-container--default
  .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background-color: rgba(253, 196, 3, 0.25);
  color: #111;
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
  background-color: #fdc403;
  color: #000;
  font-weight: 600;
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice {
  background: #fff8e1;
  border: 1px solid #fdc403;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.8125rem;
  color: #333;
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove {
  color: #999;
  margin-right: 4px;
}

/* ============================================
   PASSWORD RESET PAGES
   ============================================ */

body#loginBody:has(> #loginBox) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2.5rem 1.25rem;
  background: #fff;
}

body#loginBody > #loginBox {
  width: 100%;
  max-width: 480px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  padding: 3rem 2.8rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  margin: 0;
  position: relative;
}

#blur,
#background {
  display: none;
}

#loginBox #logo {
  margin: 0 0 2rem 0;
  text-align: center;
}

#loginBox #logo a {
  display: block;
  text-decoration: none;
}

#loginBox #logo a img {
  max-height: 66px;
  max-width: 300px;
  height: auto;
  width: auto;
  vertical-align: middle;
  outline: none;
  border: none;
}

#loginBox h3 {
  color: #c13937;
  margin: 0 0 1.25rem 0;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
}

#loginBox h3:empty {
  display: none;
}

#loginBox form {
  width: 100%;
  margin: 0;
}

#loginBox fieldset {
  border: none;
  margin: 0 0 1.75rem 0;
  padding: 0;
}

#loginBox input[type="text"],
#loginBox input[type="password"] {
  width: 100%;
  height: auto;
  padding: 0.875rem 1rem;
  border: 1px solid #d0d0d0;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  color: #000;
  background: #fff;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  outline: none;
  font-family: "Open Sans", helvetica, arial, sans-serif;
  box-sizing: border-box;
}

#loginBox input[type="text"]:focus,
#loginBox input[type="password"]:focus {
  border-color: #fdc403;
  box-shadow: 0 0 0 3px rgba(253, 196, 3, 0.15);
}

#loginBox input[type="text"]::placeholder,
#loginBox input[type="password"]::placeholder {
  color: #aaa;
  font-style: normal;
}

#loginBox input.submit,
#loginBox input[type="submit"] {
  width: 100%;
  height: 3.25rem;
  background: #fdc403;
  color: #000;
  border: none;
  border-radius: 0.5rem;
  font-family: "Open Sans", helvetica, arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(253, 196, 3, 0.3);
  transition: all 0.3s ease;
  margin-top: 0.5rem;
}

#loginBox input.submit:hover,
#loginBox input[type="submit"]:hover {
  background: linear-gradient(180deg, #fdc403 0%, #e5b000 100%);
  transform: translateY(-1px);
}

#loginBox #company {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #f0f0f0;
  text-align: center;
}

tr.sorting-mode-row::after {
  display: none !important;
}

/* Add New Help Topic form styling */
#topic-tabs_container .tab_content:not(#forms) {
  background: transparent !important;
}

#topic-tabs_container .tab_content:not(#forms) table.table {
  background: transparent !important;
  border: none !important;
}

#topic-tabs_container .tab_content:not(#forms) table.table td {
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 10px 10px !important;
}

#topic-tabs_container .tab_content:not(#forms) table.table tr {
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
}

#topic-tabs_container .tab_content:not(#forms) table.table tbody tr {
  border-bottom: none !important;
}

#topic-tabs_container .tab_content:not(#forms) table.table tbody td {
  border-bottom: none !important;
}

#topic-tabs_container .tab_content:not(#forms) table.table th {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Forms tab - white header */
#topic-forms th {
  background: #fff !important;
}

#loginBox #company .content {
  font-size: 0.8125rem;
  color: #888;
}

#poweredBy {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.75rem;
  color: #aaa;
}

#poweredBy a {
  text-decoration: none;
  display: inline-block;
  margin-left: 0.25rem;
  vertical-align: middle;
}

#poweredBy .osticket-logo {
  height: 14px;
  width: auto;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

#poweredBy a:hover .osticket-logo {
  opacity: 0.8;
}

@media (max-width: 600px) {
  #loginBox {
    padding: 2rem 1.5rem;
    border-radius: 12px;
  }
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove:hover {
  color: #333;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__placeholder {
  color: #999;
}

#sorting-tab,
#export-columns {
  background: transparent !important;
}

#sorting-tab table,
#sorting-tab table.table,
#sorting-tab tbody,
#sorting-tab tr,
#sorting-tab td,
#export-columns table,
#export-columns tbody,
#export-columns tr,
#export-columns td {
  background: transparent !important;
}

/* ============================================
   TICKET TABLE: Hide ticket status icons
   ============================================ */

table.list.tickets .Icon.overdueTicket,
table.list.tickets .Icon.answeredTicket,
table.list.tickets .Icon.assignedTicket,
table.list.tickets .Icon.lockedTicket,
table.list.tickets .Icon.Ticket,
table.list.tickets .Icon.webTicket,
table.list.tickets .Icon.emailTicket,
table.list.tickets .Icon.phoneTicket,
table.list.tickets .Icon.apiTicket,
table.list.tickets .Icon.otherTicket,
table.list.queue .Icon.overdueTicket,
table.list.queue .Icon.answeredTicket,
table.list.queue .Icon.assignedTicket,
table.list.queue .Icon.lockedTicket,
table.list.queue .Icon.Ticket,
table.list.queue .Icon.webTicket,
table.list.queue .Icon.emailTicket,
table.list.queue .Icon.phoneTicket,
table.list.queue .Icon.apiTicket,
table.list.queue .Icon.otherTicket {
  display: none !important;
}

/* ============================================
   TICKET TABLE: Priority as pill
   ============================================ */

/* Reset the td background — keep the pill on the inner div only */
table.list.tickets td[style*="background-color"],
table.list.queue td[style*="background-color"] {
  background-color: transparent !important;
}

/* Restore row hover background on the priority td */
table.list.tickets tbody tr:hover td[style*="background-color"],
table.list.queue tbody tr:hover td[style*="background-color"] {
  background-color: #fbfbfb !important;
}

/* Base pill style */
table.list.tickets
  td[style*="background-color"]
  > div[style*="background-color"],
table.list.queue
  td[style*="background-color"]
  > div[style*="background-color"] {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  background-color: rgba(209, 213, 219, 0.2) !important;
  border: 1.5px solid rgba(209, 213, 219, 0.6);
  color: #6b7280;
}

/* Low — green */
table.list.tickets td[style*="DDFFDD"] > div[style*="DDFFDD"],
table.list.queue td[style*="DDFFDD"] > div[style*="DDFFDD"] {
  background-color: rgba(134, 239, 172, 0.15) !important;
  border-color: rgba(134, 239, 172, 0.5);
  color: #16a34a;
}

/* Normal — yellow */
table.list.tickets td[style*="FFFFF0"] > div[style*="FFFFF0"],
table.list.tickets td[style*="FFFF0A"] > div[style*="FFFF0A"],
table.list.queue td[style*="FFFFF0"] > div[style*="FFFFF0"],
table.list.queue td[style*="FFFF0A"] > div[style*="FFFF0A"] {
  background-color: rgba(253, 216, 53, 0.12) !important;
  border-color: rgba(253, 196, 3, 0.4);
  color: #c9a227;
}

/* High — orange/red */
table.list.tickets td[style*="FEE7E7"] > div[style*="FEE7E7"],
table.list.queue td[style*="FEE7E7"] > div[style*="FEE7E7"] {
  background-color: rgba(252, 165, 165, 0.15) !important;
  border-color: rgba(252, 165, 165, 0.5);
  color: #dc2626;
}

/* ============================================
   DASHBOARD: Fix select width + Refresh button
   ============================================ */

#basic_search select {
  width: 180px;
  min-width: 120px;
  height: 38px;
  padding: 0 16px;
  box-sizing: border-box;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  font-size: 0.875rem;
  color: #374151;
  background: #fff;
  outline: none;
  transition: border-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

#basic_search select:focus {
  border-color: #fdc403;
  outline: none;
}

#basic_search button.action-button,
#basic_search button.green.button {
  background: #fdc403 !important;
  background-image: none !important;
  color: #000 !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(253, 196, 3, 0.3) !important;
}

#basic_search button.action-button:hover,
#basic_search button.green.button:hover {
  background: linear-gradient(180deg, #fdc403 0%, #e5b000 100%) !important;
  box-shadow: 0 4px 12px rgba(253, 196, 3, 0.4) !important;
}

/* ============================================
   DIALOG: Universal input styling (border/radius/height only)
   ============================================ */

.dialog input[type="text"],
.dialog input[type="email"],
.dialog input[type="number"],
.dialog input[type="password"],
.dialog input[type="tel"],
.dialog input[type="url"] {
  border: 1px solid #d0d0d0 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  height: 48px !important;
  font-size: 0.9375rem !important;
  color: #333 !important;
  background: #fff !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

.dialog textarea:not(.redactor-editor):not(.richtext) {
  border: 1px solid #d0d0d0 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 0.9375rem !important;
  color: #333 !important;
  background: #fff !important;
  box-sizing: border-box !important;
  resize: vertical !important;
  min-height: 70px !important;
  outline: none !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

.dialog input:focus,
.dialog textarea:not(.redactor-editor):not(.richtext):focus {
  border-color: #fdc403 !important;
  box-shadow: 0 0 0 3px rgba(253, 196, 3, 0.15) !important;
  outline: none !important;
}

/* Ext input */
.dialog input[name$="-ext"] {
  display: inline-block !important;
  width: 60px !important;
  padding: 12px 10px !important;
  vertical-align: middle !important;
}

/* Search inputs — full width */
.dialog input.search-input,
.dialog #user-search,
.dialog #org-search {
  width: 100% !important;
  display: block !important;
  height: 44px !important;
}

/* Remove grey background from form section headers inside dialogs */
form.org th[colspan],
form.user th[colspan] {
  background: transparent !important;
  border-radius: 0 !important;
  border-bottom: none !important;
  padding-bottom: 16px !important;
  position: relative !important;
}

form.org th[colspan]::after,
form.user th[colspan]::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 10px;
  width: 36px;
  height: 2px;
  background: #fdc403;
  border-radius: 2px;
}

/* Spacing between dialog form rows */
.dialog .grid.form .field {
  margin-bottom: 12px;
}

.dialog table:not(.grid) tr > td,
.dialog table:not(.grid) tr > th {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* ============================================
   DIALOG: #new-user-form widths
   ============================================ */

#new-user-form td {
  position: relative;
  overflow: visible;
}

#new-user-form input[type="text"]:not([name$="-ext"]),
#new-user-form input[type="email"] {
  display: inline-block;
  width: 100%;
}

#new-user-form td em.error,
#new-user-form td span.error {
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #c0392b;
  font-style: normal;
  font-weight: 600;
  font-size: 0.9rem;
}

#new-user-form td > div {
  display: inline-flex;
  align-items: center;
  width: 100%;
  white-space: nowrap;
}

#new-user-form input[type="tel"] {
  flex: 1;
  width: auto;
  min-width: 0;
}

#new-user-form textarea:not(.richtext) {
  display: inline-block;
  width: 100%;
}

/* ============================================
   DIALOG: #new-org-form widths — max-width caps wide cells
   ============================================ */

#new-org-form td {
  position: relative;
  overflow: visible;
}

#new-org-form input[type="text"]:not([name$="-ext"]),
#new-org-form input[type="email"],
#new-org-form input[type="url"],
#new-org-form input[type="number"] {
  display: inline-block;
  width: 100%;
}

#new-org-form td em.error,
#new-org-form td span.error {
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #c0392b;
  font-style: normal;
  font-weight: 600;
  font-size: 0.9rem;
}

#new-org-form td > div {
  display: inline-flex;
  align-items: center;
  width: 100%;
  white-space: nowrap;
}

#new-org-form input[type="tel"] {
  flex: 1;
  width: auto;
  min-width: 0;
}

#new-org-form textarea:not(.richtext) {
  display: inline-block;
  width: 100%;
}

/* ============================================
   DIALOG: grid.form widths (Update User + any grid-based dialog form)
   ============================================ */

#user-form form.user td {
  position: relative;
  overflow: visible;
}

#user-form form.user input[type="text"]:not([name$="-ext"]),
#user-form form.user input[type="email"],
#user-form form.user input[type="url"],
#user-form form.user input[type="number"] {
  display: inline-block;
  width: 100%;
}

#user-form form.user td em.error,
#user-form form.user td span.error {
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #c0392b;
  font-style: normal;
  font-weight: 600;
  font-size: 0.9rem;
}

.dialog table td > div {
  white-space: nowrap;
}

#user-form form.user td > div {
  display: inline-flex;
  align-items: center;
  width: 100%;
  white-space: nowrap;
}

#user-form form.user input[type="tel"] {
  flex: 1;
  width: auto;
  min-width: 0;
}

#user-form form.user textarea:not(.richtext) {
  display: inline-block;
  width: 100%;
}

/* ============================================
   DIALOG: Update Organization Fields tab (form.org in profile tab)
   ============================================ */

form.org td {
  position: relative;
  overflow: visible;
}

form.org input[type="text"]:not([name$="-ext"]),
form.org input[type="email"],
form.org input[type="url"],
form.org input[type="number"] {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}

form.org td em.error,
form.org td span.error {
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #c0392b;
  font-style: normal;
  font-weight: 600;
  font-size: 0.9rem;
}

form.org td > div {
  display: inline-flex;
  align-items: center;
  width: 100%;
  white-space: nowrap;
}

form.org input[type="tel"] {
  flex: 1;
  width: auto;
  min-width: 0;
}

form.org textarea:not(.richtext) {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}

/* Ext container is hidden by scp.css — show it in dialogs */
.dialog .ext_container {
  display: inline !important;
}

/* ============================================
   DIALOG: #contact-settings (Update Organization Settings tab)
   ============================================ */

#contact-settings select {
  border: 1px solid #d0d0d0 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  height: 44px !important;
  font-size: 0.9375rem !important;
  color: #333 !important;
  background: #fff !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 36px !important;
}

#contact-settings select:focus {
  border-color: #fdc403 !important;
  box-shadow: 0 0 0 3px rgba(253, 196, 3, 0.15) !important;
  outline: none !important;
}

#contact-settings input[type="text"] {
  border: 1px solid #d0d0d0 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  height: 48px !important;
  font-size: 0.9375rem !important;
  color: #333 !important;
  background: #fff !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
  width: calc(100% - 25px) !important;
}

#contact-settings input[type="text"]:focus {
  border-color: #fdc403 !important;
  box-shadow: 0 0 0 3px rgba(253, 196, 3, 0.15) !important;
  outline: none !important;
}

#contact-settings input[type="checkbox"] {
  accent-color: #fdc403 !important;
  width: 16px !important;
  height: 16px !important;
  vertical-align: middle !important;
  margin-right: 6px !important;
}

#contact-settings th[colspan] {
  background: transparent !important;
  border-radius: 0 !important;
  border-bottom: none !important;
  padding-top: 16px !important;
  padding-bottom: 8px !important;
  font-size: 0.9375rem !important;
  color: #333 !important;
}

#contact-settings td,
#contact-settings th {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* ============================================
   USER + ORG DETAIL PAGE: info card (table.ticket_info)
   ============================================ */

table.ticket_info {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid #e5e7eb !important;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
}

table.ticket_info th {
  background: transparent;
  color: #888;
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 8px 14px;
  border: none;
  white-space: nowrap;
}

table.ticket_info td {
  padding: 8px 14px;
  color: #333;
  font-size: 0.9375rem;
}

table.ticket_info tr + tr th,
table.ticket_info tr + tr td {
  border-top: none;
}

/* ============================================
   USER DETAIL PAGE: hide ticket source icons
   ============================================ */

#tickets a.Icon {
  background-image: none !important;
  background: none !important;
  padding-left: 0 !important;
}

/* ============================================
   USER DETAIL PAGE: links
   ============================================ */

table.ticket_info a,
table.ticket_info a:visited {
  color: #333 !important;
  text-decoration: none !important;
  font-weight: 600;
}

table.ticket_info a:hover {
  color: #fdc403 !important;
}

#tickets a,
#tickets a:visited {
  color: #333 !important;
  text-decoration: none !important;
}

#tickets a:hover {
  color: #fdc403 !important;
}

/* ============================================
   REPLY / NOTE FORM
   ============================================ */

form#reply.tab_content,
form#note.tab_content {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 24px !important;
  margin-top: 12px !important;
}

#response_options ul.tabs {
  margin-bottom: 0 !important;
}

#response_options {
  margin-bottom: 16px !important;
}

form#reply select,
form#note select {
  width: 220px !important;
  min-width: 220px !important;
  box-sizing: border-box !important;
}

form#reply .select2-container,
form#note .select2-container {
  width: 220px !important;
  min-width: 220px !important;
}

/* KB SEARCH: Fix gap between input and button */

form#kbSearch .input.attached {
  gap: 0 !important;
}

form#kbSearch input#query {
  border-right: none !important;
  border-radius: 12px 0 0 12px !important;
}

/* ============================================
   TICKET THREAD 
   ============================================ */

/* Hide avatars */
.thread-entry > .avatar,
.thread-entry .pull-left.avatar,
.thread-entry .pull-right.avatar,
.thread-entry span.avatar,
.thread-entry img.avatar,
.thread-event img.avatar {
  display: none;
}

/* Remove avatar offsets */
.thread-entry.avatar,
.thread-entry.message.avatar,
.thread-entry.response.avatar,
.thread-entry.note.avatar {
  margin-left: 0;
  margin-right: 0;
}

/* Card wrapper */
.thread-entry.message,
.thread-entry.response,
.thread-entry.note {
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid #e8e8e8;
  background: #fff;
  display: block;
  position: relative;
}

/* Header base */
.thread-entry .header {
  padding: 14px 20px;
  border: none;
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: #9ca3af;
  min-height: 40px;
  position: static;
}

/* Header arrow pseudo-elements removed */
.thread-entry.avatar .header:before,
.thread-entry.avatar .header:after {
  display: none;
  content: none;
}

/* Message (from user) — warm yellow-tinted header */
.thread-entry.message .header {
  background: #fffbf2;
  border-left: 4px solid #fdc403;
}

/* Response (from agent) — neutral grey header */
.thread-entry.response .header {
  background: #f8f9fa;
  border-left: 4px solid #d1d5db;
}

/* Note (internal) — soft amber header */
.thread-entry.note .header {
  background: #fffaf0;
  border-left: 4px solid #e8903a;
}

/* Author name */
.thread-entry .header b {
  font-size: 0.875rem;
  color: #111827;
  font-weight: 600;
}

/* Timestamp */
.thread-entry .header time,
.thread-entry .header .faded {
  color: #9ca3af;
  font-size: 0.8125rem;
  font-weight: 400;
}

.thread-entry .header .title {
  display: none;
}

.thread-entry .header .pull-right {
  margin-left: auto;
  float: none;
  display: flex;
  align-items: center;
  gap: 8px;
  order: 3;
}

/* Thread body */
.thread-entry .thread-body {
  border: none;
  border-radius: 0 0 12px 12px;
  padding: 20px 24px;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #374151;
  background: #fff;
}

/* Attachments */
.thread-body .attachments {
  background-color: #f9f9f9;
  border-top: 1px solid #f0f0f0;
  border-radius: 0;
  margin: 0;
  top: 0;
  padding: 10px 24px;
}

.thread-body .attachment-info {
  background: #f4f4f4;
  border: 1px solid #e5e7eb;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.8125rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 8px;
  margin-bottom: 4px;
}

/* System events & thread events — centered muted text */
.thread-entry.system,
.thread-event {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 6px 0;
  margin: 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 0.75rem;
  margin-left: 0;
}

.thread-entry.system::before,
.thread-entry.system::after,
.thread-event::before,
.thread-event::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #f0f0f0;
  height: 1px;
  display: block;
  border-top: none;
}

.thread-entry.system .header,
.thread-event .description {
  background: transparent;
  border: none;
  padding: 0 16px;
  color: #9ca3af;
  font-size: 0.75rem;
  white-space: nowrap;
  display: inline-block;
}

.thread-entry.system .thread-body {
  display: none;
}

.thread-event .type-icon {
  display: none;
}

.thread-event a {
  color: #374151;
  font-weight: 500;
}

/* Avatar — left side of header */
.thread-entry .header .thread-header-avatar {
  order: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.thread-entry .header .thread-header-avatar img,
.thread-entry .header .thread-header-avatar .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Name/time — middle */
.thread-entry .header .thread-header-info {
  order: 2;
  flex: 1;
}

/* Hide label badges */
.thread-entry .header .textra.light {
  display: none;
}

/* Hide dropdown triangle arrow inside thread headers */
.thread-entry .header .action-dropdown::before,
.thread-entry .header .action-dropdown::after {
  display: none;
}

.thread-entry .header button.muted-button {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 0.8125rem;
  color: #374151;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  transition:
    border-color 0.15s,
    color 0.15s;
  box-shadow: none;
}

.thread-entry .header button.muted-button:hover {
  border-color: #fdc403;
  color: #fdc403;
  background: #fff;
}

/* Dropdown caret button (span.muted-button) */
.thread-entry .header span.muted-button {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.8125rem;
  color: #374151;
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition:
    border-color 0.15s,
    color 0.15s;
  float: none;
}

.thread-entry .header span.muted-button:hover {
  border-color: #fdc403;
  color: #fdc403;
}

/* Remove dotted vertical thread line */
#thread-items::before {
  display: none;
  border: none;
}

/* ============================================
   MERGE TICKETS — ticket row styling
   ============================================ */

/* All icons in a ticket row — grey by default */
.dialog #ticket-entries .row-item i {
  color: #9ca3af !important;
}

/* Drag handle cursor */
.dialog #ticket-entries .row-item .icon-reorder {
  cursor: grab;
}

/* Icon-class <a> tags (e.g. icon-comments-alt rendered directly on <a>) — grey */
.dialog #ticket-entries .row-item a[class*="icon-"] {
  color: #9ca3af !important;
}

/* Ticket number link — grey default, brand yellow on hover */
.dialog #ticket-entries .row-item a.preview {
  color: #6b7280 !important;
  text-decoration: none;
  font-weight: 600;
  margin-right: 6px;
  transition: color 0.15s;
}

.dialog #ticket-entries .row-item a.preview:hover {
  color: #fdc403 !important;
}

/* Delete button — always visible */
.dialog #ticket-entries .row-item .button-group {
  background: transparent;
}

/* Clean up the delete wrapper */
.dialog #ticket-entries .row-item .delete {
  border-left: none;
  width: auto;
  border-radius: 0;
  background: transparent;
}

/* Trash icon link */
.dialog #ticket-entries .row-item .button-group a {
  color: #9ca3af !important;
  background: transparent;
  padding: 4px 6px;
  border-radius: 4px;
  transition:
    color 0.15s,
    background 0.15s;
  display: inline-flex;
  align-items: center;
}

.dialog #ticket-entries .row-item .button-group a:hover {
  color: #fdc403 !important;
  background: transparent;
}

.dialog #ticket-entries .row-item .button-group a i {
  color: inherit !important;
}

/* ============================================
   MERGE / LINK TICKETS DIALOG — selects
   ============================================ */

/* Each label row: flex so label + select sit side by side */
.dialog #merge-selects label.inline.checkbox {
  display: flex;
  align-items: center;
  margin: 0 0 10px;
  border: none;
  background: none;
  padding: 0;
}

/* Fixed-width label column — all selects start at the same x */
.dialog #merge-selects .mf-label {
  min-width: 120px;
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}

/* Selects styled to match Select2 */
.dialog #participants,
.dialog #childStatusId,
.dialog #parentStatusId {
  min-height: 48px;
  width: 240px;
  border: 1px solid #d0d0d0 !important;
  border-radius: 8px !important;
  padding: 10px 32px 10px 10px !important;
  font-size: 0.9375rem !important;
  color: #374151 !important;
  background-color: #fff !important;
  background-image: url(../images/arrow-down.png) !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 12px) center !important;
  background-size: 10px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer;
  box-sizing: border-box;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.dialog #participants:focus,
.dialog #childStatusId:focus,
.dialog #parentStatusId:focus {
  border-color: #fdc403 !important;
  box-shadow: 0 0 0 3px rgba(253, 196, 3, 0.15) !important;
  outline: none !important;
}

.dialog #merge-selects .help-tip {
  margin-left: 6px;
}

/* Timezone select2 width */
#timezone-dropdown + .select2-container,
#timezone-dropdown ~ .select2-container {
  width: 200px !important;
}

/* ── FAQ / Knowledgebase background overrides ── */
#faq ol li:hover { background-color: transparent !important; }
#faq ol li { background: transparent !important; }
#kb li { background: transparent !important; }
#breadcrumbs { background: transparent !important; background-color: transparent !important; }
#content form[action="kb.php"] { background: transparent !important; border: none !important; padding: 0 !important; }
.faq-meta section { background: transparent !important; border: none !important; box-shadow: none !important; }
.faq-meta { background: transparent !important; border: none !important; }
.faq-content .thread-body.bleed,
.thread-body.bleed { background-color: transparent !important; background: transparent !important; }
/* ── End FAQ overrides ── */