/*
 * Part of osTicket Theme - BerryPress
 * See the LICENSE file in the project root for license details.
 */
/*
 * Part of osTicket Theme - BerryPress
 * See the LICENSE file in the project root for license details.
 */
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap");
:root {
  /* Colors */
  --primary-color: #4943c4;
  --secondary-color: #f8f3ff;
  --background-color: #f9fafb;
  --text-color: #081625;
  --text-color-light: #fff;
  --text-color-secondary: #6b7094;
  --border-color: #e0e0e0;
  --border-color-light: #f3f3f3;
  --border-radius: 5px;
  --shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  --gray: #f0f1f6;
  --gray-dark: #e0e2ee;
  --header-width: 1400px;
  --header-border-bottom-width: 1px;
  --header-border-bottom-color: var(--border-color);
  --header-background-color: #fff;
  --header-box-shadow: unset;
  --content-width: 1400px;
  /* Login form */
  --form-width: 600px;
  --nav-background-color: var(--gray);
  --nav-width: var(--content-width);
  /* Transitions */
  --transition-fast: 0.2s ease-in-out;
  --transition-medium: 0.4s ease-in-out;
  --transition-slow: 0.6s ease-in-out;
  --font-family: "Roboto", sans-serif;
  /* Button Variables */
  --btn-font-size: 12px;
  --btn-line-height: 1.5em;
  --btn-padding: 6px 12px;
  --btn-small-padding: 6px 6px;
  --btn-border-radius: 5px;
  --btn-primary-bg: #4943c4;
  --btn-primary-color: #fff;
  --btn-primary-hover-bg: #342ebc;
  --btn-border-width: 1px;
  --btn-border-color: #4943c4;
  --btn-shadow: unset;
  --btn-secondary-bg: #fff;
  --btn-secondary-color: var(--text-color);
  --btn-secondary-hover-color: var(--text-color);
  --btn-secondary-hover-bg: var(--gray);
  --btn-secondary-border-color: var(--gray-dark);
  /* Form variables */
  --form-field-border-radius: 5px;
  --form-field-border: 1px solid #ebecf4;
  --form-field-border-focus: 1px solid #dfe1ed;
  --form-field-color: #081625;
  --form-field-placeholder-color: #6b7094;
  --form-field-min-height: 32px;
  --form-field-small-min-height: 32px;
  --form-field-padding: 10px 12px;
  --form-field-small-padding: 6px 8px;
  --form-field-background-color: #fff;
  --form-field-box-shadow: unset;
  --form-field-font-size: 14px;
  --form-field-medium-font-size: 14px;
  --form-field-small-font-size: 12px;
  --form-field-focus-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

/* Base Button Styles */
/* Primary Button Styles */
/* Secondary Button Styles */
/* Base */
html {
  font-size: 13px;
  background-color: transparent;
}
html .clear {
  height: 0;
  display: inline;
}

hr {
  border-color: var(--border-color-light);
}

body {
  color: var(--text-color);
  font-family: var(--font-family);
  background-color: var(--background-color);
  background-image: unset;
}

.theme-content {
  width: 90%;
  max-width: var(--content-width);
  margin: 20px auto;
}

#content {
  padding-top: 30px;
  background-color: transparent;
}
#content .has_bottom_border {
  border-bottom: 0;
}
#content .has_bottom_border .pull-left {
  float: unset;
}

a {
  color: var(--primary-color);
}

h2 {
  color: var(--text-color);
}

i.help-tip:hover {
  color: var(--primary-color) !important;
}

#container {
  width: 100%;
  box-shadow: unset;
  background-color: transparent;
}

input[type=submit], input[type=reset], input[type=button], .action-button, .button, .action-button.muted, a.action-button {
  font-size: var(--btn-font-size);
  line-height: var(--btn-line-height);
  padding: var(--btn-padding);
  border-radius: var(--btn-border-radius);
  border: var(--btn-border-width) solid var(--btn-border-color);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--btn-shadow);
  display: inline-block;
  text-align: center;
  height: unset;
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-color);
  border-color: var(--btn-secondary-border-color);
  text-shadow: unset;
  background-image: unset;
  margin-bottom: 0;
}
input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, .action-button:hover, .button:hover, .action-button.muted:hover, a.action-button:hover {
  box-shadow: var(--btn-shadow);
}
input[type=submit] i, input[type=reset] i, input[type=button] i, .action-button i, .button i, .action-button.muted i, a.action-button i {
  color: var(--btn-secondary-color);
}
input[type=submit]:hover i, input[type=reset]:hover i, input[type=button]:hover i, .action-button:hover i, .button:hover i, .action-button.muted:hover i, a.action-button:hover i {
  color: var(--btn-secondary-hover-color);
}
input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, .action-button:hover, .button:hover, .action-button.muted:hover, a.action-button:hover {
  background-color: var(--btn-secondary-hover-bg);
  color: var(--btn-secondary-hover-color);
}
input[type=submit] i, input[type=submit] i.icon-caret-down, input[type=reset] i, input[type=reset] i.icon-caret-down, input[type=button] i, input[type=button] i.icon-caret-down, .action-button i, .action-button i.icon-caret-down, .button i, .button i.icon-caret-down, .action-button.muted i, .action-button.muted i.icon-caret-down, a.action-button i, a.action-button i.icon-caret-down {
  height: 14px;
  margin-top: 0;
  padding-top: 4px;
}

button[type=submit], input[type=submit], .primary.button,
button.submit {
  font-size: var(--btn-font-size);
  line-height: var(--btn-line-height);
  padding: var(--btn-padding);
  border-radius: var(--btn-border-radius);
  border: var(--btn-border-width) solid var(--btn-border-color);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--btn-shadow);
  display: inline-block;
  text-align: center;
  height: unset;
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border-color: var(--btn-border-color);
  text-shadow: unset;
  background-image: unset;
}
button[type=submit]:hover, input[type=submit]:hover, .primary.button:hover,
button.submit:hover {
  box-shadow: var(--btn-shadow);
}
button[type=submit]:hover, input[type=submit]:hover, .primary.button:hover,
button.submit:hover {
  background-color: var(--btn-primary-hover-bg);
  border-color: var(--btn-border-color);
  color: var(--btn-primary-color);
}
button[type=submit] i, input[type=submit] i, .primary.button i,
button.submit i {
  display: none;
}

.save.pending {
  font-size: var(--btn-font-size);
  line-height: var(--btn-line-height);
  padding: var(--btn-padding);
  border-radius: var(--btn-border-radius);
  border: var(--btn-border-width) solid var(--btn-border-color);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--btn-shadow);
  display: inline-block;
  text-align: center;
  height: unset;
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border-color: var(--btn-border-color);
  text-shadow: unset;
  background-image: unset;
}
.save.pending:hover {
  box-shadow: var(--btn-shadow);
}
.save.pending:hover {
  background-color: var(--btn-primary-hover-bg);
  border-color: var(--btn-border-color);
  color: var(--btn-primary-color);
}

.green.button:hover {
  background-color: #2e8755;
  border-color: #2e8755;
  box-shadow: var(--shadow);
  color: var(--text-color-light);
}
.green.button:hover i {
  color: var(--text-color-light);
}

h1, h2, h3, h4, h5, h6, p {
  line-height: 1.2;
}

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

.bp-mobile-nav-wrapper {
  /* Mobile nav icon styling */
}
.bp-mobile-nav-wrapper .mobile-nav-icon {
  font-size: 24px;
  color: var(--text-color);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow);
  margin: 0;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
  border-radius: var(--border-radius);
}
.bp-mobile-nav-wrapper .mobile-nav-icon:hover {
  border-bottom: 1px solid var(--border-color);
  margin: 0;
  padding: 10px 12px;
}
.bp-mobile-nav-wrapper .mobile-nav-icon i {
  font-size: 16px;
  color: var(--text-color);
  transition: color 0.3s ease, transform 0.3s ease;
}
.bp-mobile-nav-wrapper .mobile-nav-icon i::before {
  content: "\f0c9";
}

@media (max-width: 980px) {
  .bp-mobile-nav-wrapper {
    display: block !important;
  }
  .nav-top-wrapper,
  .nav-wrapper.nav-wrapper-client {
    display: none;
  }
  .header-inner #info,
  .nav-wrapper {
    display: none !important;
  }
}
/* Mobile nav dropdown */
#bp-mobile-nav {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 24px 0;
  list-style: none;
  background-color: var(--background-color);
  top: 0;
  left: 0;
  z-index: 999;
  position: fixed;
  box-sizing: border-box;
  overflow: auto;
}
#bp-mobile-nav li:has(ul) > a {
  padding-bottom: 20px;
}
#bp-mobile-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border-color-light);
}
#bp-mobile-nav ul li {
  margin-left: 20px;
}
#bp-mobile-nav ul li a {
  color: var(--text-color-secondary);
}
#bp-mobile-nav ul li:last-of-type {
  border: none;
}
#bp-mobile-nav #bp-mobile-close {
  font-size: 0;
  color: var(--text-color);
  transition: color 0.3s ease, transform 0.3s ease;
  position: absolute;
  top: 14px;
  right: 20px;
  z-index: 999999;
}
#bp-mobile-nav #bp-mobile-close::before {
  content: "\f00d";
  font-size: 18px;
  font-weight: normal;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow);
  border-radius: var(--border-radius);
}
#bp-mobile-nav li {
  max-width: 90%;
  margin: 0 auto;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color-light);
}
#bp-mobile-nav li a {
  display: block;
  text-decoration: none;
  color: var(--text-color);
  font-size: 16px;
  padding: 10px;
  background-image: unset !important;
}
#bp-mobile-nav li a.active {
  color: var(--primary-color);
  font-weight: 600;
}

#pjax-container #content {
  max-width: var(--nav-width);
  width: 90%;
  margin: auto;
  border: 0;
}

.nav-wrapper {
  background-color: var(--nav-background-color);
  border-bottom: 1px solid var(--border-color);
  /* Navigation Top */
  /* Sub Navigation Container */
  /* Sub Navigation Tickets page */
  /* Sub Navigation */
}
.nav-wrapper #nav {
  max-width: var(--nav-width);
  background: transparent;
  width: 90%;
  margin: auto;
  border: unset;
  padding: 0;
  height: unset;
}
.nav-wrapper #nav > li {
  border: 0;
  padding: 0;
  height: unset;
  min-width: unset;
  margin: 0;
}
.nav-wrapper #nav > li:first-child > a {
  padding-left: 0;
  margin-left: 0;
}
.nav-wrapper #nav > li > a {
  padding: 10px 15px;
  margin-left: 10px;
  color: var(--text-color-secondary);
}
.nav-wrapper #nav > li:hover {
  background-color: transparent;
  box-shadow: unset;
  border: 0;
  padding: 0;
}
.nav-wrapper #nav > li:hover a {
  color: var(--text-color);
}
.nav-wrapper #nav > li.active {
  background-color: transparent;
  box-shadow: unset;
  border: 0;
}
.nav-wrapper #nav > li.active > a {
  color: var(--primary-color);
}
.nav-wrapper #nav > li > ul {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  background-color: #fff;
}
.nav-wrapper #nav > li > ul > li:hover {
  background-color: transparent;
}
.nav-wrapper #nav > li > ul > li > a {
  background: transparent;
  padding: 5px 6px 5px 10px;
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
}
.nav-wrapper #nav > li > ul > li > a:hover {
  color: var(--primary-color);
  background-color: var(--gray);
}
.nav-wrapper #nav > li > ul > li > a:last-child {
  border: unset;
}
.nav-wrapper > nav {
  line-height: 14px;
  background-color: var(--background-color);
  width: 100%;
  border-top: 1px solid var(--border-color);
}
.nav-wrapper nav.jb-overflowmenu {
  margin: auto !important;
  line-height: 14px !important;
  height: unset;
  background-color: var(--background-color);
  width: 100%;
  border-top: 1px solid var(--border-color);
}
.nav-wrapper nav.jb-overflowmenu li.item > a > i {
  margin-top: 0 !important;
}
.nav-wrapper nav.jb-overflowmenu .customQ-dropdown {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  background-color: #fff;
}
.nav-wrapper nav.jb-overflowmenu .customQ-dropdown ul {
  border-bottom: 0;
}
.nav-wrapper nav.jb-overflowmenu .customQ-dropdown ul li {
  background: transparent;
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
}
.nav-wrapper nav.jb-overflowmenu .customQ-dropdown ul li:hover {
  background-color: var(--gray);
}
.nav-wrapper nav.jb-overflowmenu .customQ-dropdown ul li a {
  padding: 10px 6px 10px 10px;
  color: var(--text-color);
}
.nav-wrapper nav.jb-overflowmenu .customQ-dropdown ul li:hover a {
  color: var(--primary-color);
}
.nav-wrapper nav.jb-overflowmenu .customQ-dropdown:last-child a {
  border: unset;
}
.nav-wrapper nav.jb-overflowmenu .customQ-dropdown span.queue-count {
  color: var(--primary-color);
  padding: 9px 8px 0 0;
}
.nav-wrapper nav.jb-overflowmenu .customQ-dropdown .add-queue a {
  padding: 8px 5px;
}
.nav-wrapper nav.jb-overflowmenu .customQ-dropdown .add-queue a span, .nav-wrapper nav.jb-overflowmenu .customQ-dropdown .add-queue a i {
  color: var(--text-color-secondary);
}
.nav-wrapper nav.jb-overflowmenu .customQ-dropdown .add-queue a:hover {
  background-color: transparent;
}
.nav-wrapper nav.jb-overflowmenu .customQ-dropdown .add-queue a:hover span, .nav-wrapper nav.jb-overflowmenu .customQ-dropdown .add-queue a:hover i {
  color: var(--text-color);
}
.nav-wrapper #sub_nav {
  max-width: var(--nav-width);
  width: 90%;
  border: unset;
  margin: 0 auto 0;
  padding: 0;
  background-color: transparent;
  height: unset !important;
  line-height: unset;
  position: relative;
}
.nav-wrapper #sub_nav > li, .nav-wrapper #sub_nav li.item {
  background-color: transparent;
  box-shadow: unset;
  border: 0;
  padding: 0;
  height: unset;
  margin: 0;
  min-width: unset;
}
.nav-wrapper #sub_nav > li:first-child > a, .nav-wrapper #sub_nav li.item:first-child > a {
  margin-left: 0;
}
.nav-wrapper #sub_nav > li > a, .nav-wrapper #sub_nav li.item > a {
  padding: 12px 15px 12px 0;
  margin-left: 10px;
  background: unset;
  color: var(--text-color-secondary);
}
.nav-wrapper #sub_nav > li:hover, .nav-wrapper #sub_nav li.item:hover {
  background-color: transparent;
  box-shadow: unset;
  border: 0;
  padding: 0;
}
.nav-wrapper #sub_nav > li:hover a, .nav-wrapper #sub_nav li.item:hover a {
  color: var(--text-color);
}
.nav-wrapper #sub_nav > li.active, .nav-wrapper #sub_nav li.item.active {
  background-color: transparent;
  box-shadow: unset;
  border: 0;
}
.nav-wrapper #sub_nav > li.active > a, .nav-wrapper #sub_nav li.item.active > a {
  color: var(--primary-color);
}

.nav-wrapper.nav-wrapper-client #nav {
  box-shadow: unset;
}
.nav-wrapper.nav-wrapper-client #nav a.active {
  background-color: transparent;
  box-shadow: unset;
  border: 0;
}
.nav-wrapper.nav-wrapper-client #nav a:hover {
  color: var(--primary-color);
  font-weight: 600;
  border: unset;
}
.nav-wrapper.nav-wrapper-client #nav a {
  background-image: unset;
  background-color: transparent;
}

/* Header */
#header {
  background-color: var(--header-background-color);
  box-shadow: var(--header-box-shadow);
  border-bottom-width: var(--header-border-bottom-width);
  border-bottom-style: solid;
  border-bottom-color: var(--header-border-bottom-color);
}
#header .header-inner {
  max-width: var(--header-width);
  margin: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  width: 90%;
}
#header .header-inner #logo {
  padding-left: 0;
}
#header .header-inner #logo:hover {
  border-bottom: 0;
}
#header .header-inner #info {
  order: 2;
  display: block;
  width: auto;
  max-width: unset;
  margin: 0;
  background: transparent;
  border: 0;
  padding: 8px;
  text-align: center;
  font-size: 0;
  color: transparent;
  float: unset;
}
#header .header-inner #info > a {
  font-weight: 600;
  font-size: 14px;
  margin-left: 10px;
  color: var(--text-color-secondary);
}
#header .header-inner .nav-top-wrapper {
  color: var(--text-color-secondary);
}
#header .header-inner .nav-top-wrapper a {
  font-weight: 600;
  font-size: 14px;
  margin-left: 10px;
  color: var(--text-color-secondary);
}
#header .header-inner .nav-top-wrapper a:hover {
  border-bottom: 1px solid;
}

/* Form */
input[type=text],
input[type=password],
input[type=email], input[type=tel],
textarea,
select {
  border-radius: var(--form-field-border-radius);
  border: var(--form-field-border);
  color: var(--form-field-color);
  min-height: var(--form-field-small-min-height);
  padding: var(--form-field-small-padding);
  background-color: var(--form-field-background-color);
  box-shadow: var(--form-field-box-shadow);
  font-size: var(--form-field-small-font-size);
  line-height: var(--form-field-font-size);
  height: unset;
  box-sizing: border-box;
}
input[type=text]::placeholder,
input[type=password]::placeholder,
input[type=email]::placeholder, input[type=tel]::placeholder,
textarea::placeholder,
select::placeholder {
  color: var(--form-field-placeholder-color);
}
input[type=text]:hover,
input[type=password]:hover,
input[type=email]:hover, input[type=tel]:hover,
textarea:hover,
select:hover {
  box-shadow: var(--form-field-focus-shadow);
}
input[type=text]:focus, input[type=text]:focus-visible,
input[type=password]:focus,
input[type=password]:focus-visible,
input[type=email]:focus,
input[type=email]:focus-visible, input[type=tel]:focus, input[type=tel]:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
  box-shadow: var(--form-field-focus-shadow);
  border: var(--form-field-border-focus);
  outline: unset;
}

.redactor-styles {
  color: var(--form-field-color);
  font-size: var(--form-field-medium-font-size);
  line-height: var(--form-field-font-size);
}

.redactor-placeholder:before {
  color: var(--text-color-secondary);
}

label > input[type=radio] {
  position: absolute;
  opacity: 0;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  position: relative;
  padding-left: 20px;
}
label > input[type=radio] + ::before {
  content: "";
  background: #fff;
  border-radius: 100%;
  border: 1px solid var(--gray-dark);
  display: inline-block;
  width: 18px;
  height: 18px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  vertical-align: middle;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
  opacity: 1;
}
label > input[type=radio]:checked + ::before {
  background-color: var(--primary-color);
  box-shadow: inset 0 0 0 4px var(--gray);
  border: 1px solid var(--gray-dark);
}
label > input[type=radio]:focus + ::before {
  outline: none;
  border-color: var(--primary-color);
}
label > input[type=radio]:disabled + ::before {
  box-shadow: inset 0 0 0 4px var(--gray);
  border-color: var(--gray-dark);
  background: var(--gray-dark);
}

label:has(input[type=radio]) {
  position: relative;
  padding-left: 20px;
}

input[type=checkbox] {
  -webkit-appearance: none;
  background-color: #fff;
  box-shadow: none;
  border: 1px solid var(--gray-dark);
  border-radius: 3px;
  height: 16px;
  width: 16px;
  margin: 0 10px 0 0;
  vertical-align: middle;
  cursor: pointer;
  -webkit-transition: background 0.15s, box-shadow 0.1s;
  transition: background 0.15s, box-shadow 0.1s;
}
input[type=checkbox]:before {
  margin: 0;
  width: 16px;
  height: 16px;
  float: none;
  text-align: center;
  padding-left: 0;
  display: block;
  background-size: 11px 11px;
  content: "";
  background-repeat: no-repeat;
  background-position: center;
}
input[type=checkbox]:after {
  display: none;
}
input[type=checkbox]:hover {
  box-shadow: var(--shadow);
  outline: none;
}
input[type=checkbox]:hover:not(:checked):before {
  background-image: url("../../assets/media/check.svg");
}
input[type=checkbox]:focus {
  box-shadow: var(--shadow);
  outline: none;
}
input[type=checkbox]:checked {
  background-color: #fff;
  box-shadow: none;
  border: 1px solid var(--primary-color);
}
input[type=checkbox]:checked:before {
  background-image: url("../../assets/media/check.svg");
}
input[type=checkbox][disabled] {
  background-color: var(--gray);
  box-shadow: none;
  opacity: 0.3;
  cursor: not-allowed;
}

.select2 .select2-selection--single, .select2-container--default .select2-selection--multiple {
  border-radius: var(--form-field-border-radius);
  border: var(--form-field-border);
  color: var(--form-field-color);
  min-height: var(--form-field-small-min-height);
  padding: var(--form-field-small-padding);
  background-color: var(--form-field-background-color);
  box-shadow: var(--form-field-box-shadow);
  font-size: var(--form-field-small-font-size);
  line-height: var(--form-field-font-size);
  height: unset;
}
.select2 .select2-selection--single::placeholder, .select2-container--default .select2-selection--multiple::placeholder {
  color: var(--form-field-placeholder-color);
}
.select2 .select2-selection--single:hover, .select2-container--default .select2-selection--multiple:hover {
  box-shadow: var(--form-field-focus-shadow);
}
.select2 .select2-selection--single:focus, .select2 .select2-selection--single:focus-visible, .select2-container--default .select2-selection--multiple:focus, .select2-container--default .select2-selection--multiple:focus-visible {
  box-shadow: var(--form-field-focus-shadow);
  border: var(--form-field-border-focus);
  outline: unset;
}
.select2 .select2-selection--single .select2-selection__arrow, .select2-container--default .select2-selection--multiple .select2-selection__arrow {
  top: 6px;
}

.redactor-focus.redactor-styles-on, .redactor-focus:focus.redactor-styles-on {
  border-color: var(--border-color) !important;
}

.redactor-box .redactor-styles {
  max-width: unset !important;
}

.redactor-statusbar {
  font-family: var(--font-family);
  color: var(--text-color-secondary);
  background-color: var(--gray);
  border: 0;
  font-size: 12px;
}

form .filedrop .dropzone,
table .filedrop .dropzone {
  background-color: var(--gray);
  border: 1px dashed var(--border-color);
  font-size: 12px;
}
form .filedrop .dropzone a,
table .filedrop .dropzone a {
  color: var(--primary-color);
}

.-redactor-container em {
  font-style: normal;
  color: var(--text-color-secondary);
  font-size: 12px;
}

/* Table */
table, form {
  width: 100% !important;
}

table.form_table tbody > tr > td:first-child:not(:has(table)):not(:has(input)):not(:has(textarea)),
table.table.two-column tbody > tr > td:first-child:not(:has(table)):not(:has(input)):not(:has(textarea)) {
  max-width: 400px;
  width: unset;
}

table.table,
table.form_table,
table.settings_table.form_table {
  display: flex;
  flex-direction: column;
  border: 0;
  width: 100% !important;
  padding-top: 20px;
  margin-left: 0;
  margin-bottom: 50px;
}
table.table tr.header,
table.table tr:not(:last-child):not(.header),
table.form_table tr.header,
table.form_table tr:not(:last-child):not(.header),
table.settings_table.form_table tr.header,
table.settings_table.form_table tr:not(:last-child):not(.header) {
  border-bottom: 1px solid #f3f3f3;
}
table.table input[type=text],
table.table input[type=password],
table.table textarea,
table.table select,
table.form_table input[type=text],
table.form_table input[type=password],
table.form_table textarea,
table.form_table select,
table.settings_table.form_table input[type=text],
table.settings_table.form_table input[type=password],
table.settings_table.form_table textarea,
table.settings_table.form_table select {
  border-radius: var(--form-field-border-radius);
  border: var(--form-field-border);
  color: var(--form-field-color);
  min-height: var(--form-field-small-min-height);
  padding: var(--form-field-small-padding);
  background-color: var(--form-field-background-color);
  box-shadow: var(--form-field-box-shadow);
  font-size: var(--form-field-small-font-size);
  line-height: var(--form-field-font-size);
  height: unset;
}
table.table input[type=text]::placeholder,
table.table input[type=password]::placeholder,
table.table textarea::placeholder,
table.table select::placeholder,
table.form_table input[type=text]::placeholder,
table.form_table input[type=password]::placeholder,
table.form_table textarea::placeholder,
table.form_table select::placeholder,
table.settings_table.form_table input[type=text]::placeholder,
table.settings_table.form_table input[type=password]::placeholder,
table.settings_table.form_table textarea::placeholder,
table.settings_table.form_table select::placeholder {
  color: var(--form-field-placeholder-color);
}
table.table input[type=text]:hover,
table.table input[type=password]:hover,
table.table textarea:hover,
table.table select:hover,
table.form_table input[type=text]:hover,
table.form_table input[type=password]:hover,
table.form_table textarea:hover,
table.form_table select:hover,
table.settings_table.form_table input[type=text]:hover,
table.settings_table.form_table input[type=password]:hover,
table.settings_table.form_table textarea:hover,
table.settings_table.form_table select:hover {
  box-shadow: var(--form-field-focus-shadow);
}
table.table input[type=text]:focus, table.table input[type=text]:focus-visible,
table.table input[type=password]:focus,
table.table input[type=password]:focus-visible,
table.table textarea:focus,
table.table textarea:focus-visible,
table.table select:focus,
table.table select:focus-visible,
table.form_table input[type=text]:focus,
table.form_table input[type=text]:focus-visible,
table.form_table input[type=password]:focus,
table.form_table input[type=password]:focus-visible,
table.form_table textarea:focus,
table.form_table textarea:focus-visible,
table.form_table select:focus,
table.form_table select:focus-visible,
table.settings_table.form_table input[type=text]:focus,
table.settings_table.form_table input[type=text]:focus-visible,
table.settings_table.form_table input[type=password]:focus,
table.settings_table.form_table input[type=password]:focus-visible,
table.settings_table.form_table textarea:focus,
table.settings_table.form_table textarea:focus-visible,
table.settings_table.form_table select:focus,
table.settings_table.form_table select:focus-visible {
  box-shadow: var(--form-field-focus-shadow);
  border: var(--form-field-border-focus);
  outline: unset;
}
table.table > thead th,
table.form_table > thead th,
table.settings_table.form_table > thead th {
  padding-bottom: 15px;
}
table.table > thead,
table.table > tbody,
table.form_table > thead,
table.form_table > tbody,
table.settings_table.form_table > thead,
table.settings_table.form_table > tbody {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  gap: 5px;
}
table.table thead > tr,
table.form_table thead > tr,
table.settings_table.form_table thead > tr {
  display: flex;
  flex-direction: row;
  font-weight: 600;
  border-bottom: 1px solid #f3f3f3;
  padding-bottom: 5px;
  background-color: transparent;
}
table.table tbody > tr,
table.form_table tbody > tr,
table.settings_table.form_table tbody > tr {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid #f3f3f3;
  padding: 5px 0;
}
table.table td,
table.table th,
table.form_table td,
table.form_table th,
table.settings_table.form_table td,
table.settings_table.form_table th {
  flex: 1;
  padding: 5px;
  text-align: left;
  border: 0;
  background-color: transparent;
  height: unset !important;
  font-size: 13px;
  width: unset !important;
}
table.table tr:not(:has(input)) em,
table.form_table tr:not(:has(input)) em,
table.settings_table.form_table tr:not(:has(input)) em {
  color: var(--text-color);
  font-style: normal;
  font-weight: 600;
  font-size: calc(0.8125rem + (1.125rem - 0.8125rem) * (100vw - 320px) / (1200px - 320px));
}
@media (max-width: 320px) {
  table.table tr:not(:has(input)) em,
  table.form_table tr:not(:has(input)) em,
  table.settings_table.form_table tr:not(:has(input)) em {
    font-size: 0.8125rem;
  }
}
@media (min-width: 1200px) {
  table.table tr:not(:has(input)) em,
  table.form_table tr:not(:has(input)) em,
  table.settings_table.form_table tr:not(:has(input)) em {
    font-size: 1.125rem;
  }
}
table.table .required,
table.form_table .required,
table.settings_table.form_table .required {
  font-weight: 400;
  color: var(--text-color);
}

/* Dropdowns */
.action-dropdown ul.bleed-left,
.action-dropdown ul, .noclick-dropdown ul {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  background-color: #fff;
  border-bottom: 0;
}
.action-dropdown ul.bleed-left > li > a,
.action-dropdown ul > li > a, .noclick-dropdown ul > li > a {
  background: transparent;
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
  padding: 5px 6px 5px 10px;
  color: var(--text-color);
}
.action-dropdown ul.bleed-left > li > a i,
.action-dropdown ul > li > a i, .noclick-dropdown ul > li > a i {
  color: var(--text-color-secondary);
  margin-right: 5px;
}
.action-dropdown ul.bleed-left > li > a:hover,
.action-dropdown ul > li > a:hover, .noclick-dropdown ul > li > a:hover {
  background-color: var(--gray);
  color: var(--primary-color) !important;
  font-weight: 500 !important;
}
.action-dropdown ul.bleed-left > li > a:hover i,
.action-dropdown ul > li > a:hover i, .noclick-dropdown ul > li > a:hover i {
  color: var(--primary-color) !important;
}
.action-dropdown ul.bleed-left > li.danger > a:hover,
.action-dropdown ul > li.danger > a:hover, .noclick-dropdown ul > li.danger > a:hover {
  color: var(--text-color-light) !important;
}
.action-dropdown ul.bleed-left > li.danger > a:hover i,
.action-dropdown ul > li.danger > a:hover i, .noclick-dropdown ul > li.danger > a:hover i {
  color: var(--text-color-light) !important;
}
.action-dropdown ul.bleed-left > li:last-of-type > a,
.action-dropdown ul > li:last-of-type > a, .noclick-dropdown ul > li:last-of-type > a {
  border-bottom: 0;
}

/* Login Page Staff */
#loginBody {
  background-color: var(--gray-dark);
  height: 100%;
  display: flex;
  align-items: flex-start;
  margin-top: 10vh;
  /* Forgot Password Link */
}
#loginBody #brickwall {
  display: none;
}
#loginBody form#login, #loginBody form[action="pwreset.php"] {
  width: unset !important;
  max-width: 400px;
}
#loginBody form#login input, #loginBody form[action="pwreset.php"] input {
  max-width: 100%;
}
#loginBody > .login-form-container {
  background-color: var(--background-color);
  border-radius: var(--border-radius);
  flex-basis: var(--form-width);
  margin: 20px auto 0;
  padding: 25px 20px;
}
#loginBody .login-heading {
  font-size: calc(0.9375rem + (1.5rem - 0.9375rem) * (100vw - 320px) / (1200px - 320px));
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 35px;
  display: block;
}
@media (max-width: 320px) {
  #loginBody .login-heading {
    font-size: 0.9375rem;
  }
}
@media (min-width: 1200px) {
  #loginBody .login-heading {
    font-size: 1.5rem;
  }
}
#loginBody .login-copyright, #loginBody #company {
  font-size: 12px;
  color: var(--text-color-secondary);
  margin-top: 30px;
}
#loginBody button.submit {
  float: right;
}
#loginBody h3 {
  display: block !important;
}
#loginBody #blur {
  display: none;
}
#loginBody #loginBox {
  background-color: var(--background-color);
  border-radius: var(--border-radius);
  flex-basis: var(--form-width);
  margin: 20px auto 0;
  padding: 25px 20px;
  box-shadow: unset;
  border: unset;
  position: initial;
}
#loginBody #loginBox::after {
  display: none;
}
#loginBody h3 {
  font-size: calc(0.75rem + (1rem - 0.75rem) * (100vw - 320px) / (1200px - 320px));
  margin-bottom: 20px;
  color: var(--text-color);
}
@media (max-width: 320px) {
  #loginBody h3 {
    font-size: 0.75rem;
  }
}
@media (min-width: 1200px) {
  #loginBody h3 {
    font-size: 1rem;
  }
}
#loginBody > #poweredBy {
  display: none;
}
#loginBody #company {
  position: initial;
  margin: 25px 0 0;
  width: unset;
  background-color: unset;
}
#loginBody #company .content {
  background-color: unset;
  border-radius: unset;
  color: var(--text-color-secondary);
  text-shadow: unset;
  box-shadow: unset;
}

/* Search */
.search.well {
  background-color: transparent;
  margin-bottom: 0;
  gap: 10px;
}
.search.well form {
  margin-bottom: 0 !important;
}
.search.well form input {
  margin-bottom: 5px;
}
.search.well .pull-right {
  margin-left: 10px;
  margin-bottom: 5px;
}

.search.well .flush-left form,
#basic_search {
  background-color: transparent;
  border-bottom: 1px solid var(--border-color);
  box-shadow: unset;
  margin: 0 0 20px;
  padding-bottom: 15px;
  padding-left: 0;
  border-radius: 0;
  font-size: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.search.well .flush-left form .pull-right,
#basic_search .pull-right {
  float: unset;
}
.search.well .flush-left form form,
#basic_search form {
  width: unset !important;
}
.search.well .flush-left form > div,
#basic_search > div {
  height: unset !important;
}
.search.well .flush-left form > div button.ui-datepicker-trigger,
#basic_search > div button.ui-datepicker-trigger {
  margin-right: 8px;
}
.search.well .flush-left form .input.attached,
#basic_search .input.attached {
  position: relative;
  height: unset;
}
.search.well .flush-left form .input.attached button,
#basic_search .input.attached button {
  background-color: transparent;
  border: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  color: var(--text-color-secondary);
}
.search.well .flush-left form .input.attached button:hover,
#basic_search .input.attached button:hover {
  color: var(--primary-color);
}
.search.well .flush-left form input[type=text], .search.well .flush-left form input[type=password], .search.well .flush-left form textarea, .search.well .flush-left form select, .search.well .flush-left form .input.attached input,
#basic_search input[type=text],
#basic_search input[type=password],
#basic_search textarea,
#basic_search select,
#basic_search .input.attached input {
  border-radius: var(--form-field-border-radius);
  border: var(--form-field-border);
  color: var(--form-field-color);
  min-height: var(--form-field-small-min-height);
  padding: var(--form-field-small-padding);
  background-color: var(--form-field-background-color);
  box-shadow: var(--form-field-box-shadow);
  font-size: var(--form-field-small-font-size);
  line-height: var(--form-field-font-size);
  height: unset;
  padding-right: 24px;
}
.search.well .flush-left form input[type=text]::placeholder, .search.well .flush-left form input[type=password]::placeholder, .search.well .flush-left form textarea::placeholder, .search.well .flush-left form select::placeholder, .search.well .flush-left form .input.attached input::placeholder,
#basic_search input[type=text]::placeholder,
#basic_search input[type=password]::placeholder,
#basic_search textarea::placeholder,
#basic_search select::placeholder,
#basic_search .input.attached input::placeholder {
  color: var(--form-field-placeholder-color);
}
.search.well .flush-left form input[type=text]:hover, .search.well .flush-left form input[type=password]:hover, .search.well .flush-left form textarea:hover, .search.well .flush-left form select:hover, .search.well .flush-left form .input.attached input:hover,
#basic_search input[type=text]:hover,
#basic_search input[type=password]:hover,
#basic_search textarea:hover,
#basic_search select:hover,
#basic_search .input.attached input:hover {
  box-shadow: var(--form-field-focus-shadow);
}
.search.well .flush-left form input[type=text]:focus, .search.well .flush-left form input[type=text]:focus-visible, .search.well .flush-left form input[type=password]:focus, .search.well .flush-left form input[type=password]:focus-visible, .search.well .flush-left form textarea:focus, .search.well .flush-left form textarea:focus-visible, .search.well .flush-left form select:focus, .search.well .flush-left form select:focus-visible, .search.well .flush-left form .input.attached input:focus, .search.well .flush-left form .input.attached input:focus-visible,
#basic_search input[type=text]:focus,
#basic_search input[type=text]:focus-visible,
#basic_search input[type=password]:focus,
#basic_search input[type=password]:focus-visible,
#basic_search textarea:focus,
#basic_search textarea:focus-visible,
#basic_search select:focus,
#basic_search select:focus-visible,
#basic_search .input.attached input:focus,
#basic_search .input.attached input:focus-visible {
  box-shadow: var(--form-field-focus-shadow);
  border: var(--form-field-border-focus);
  outline: unset;
}
.search.well .flush-left form .input.attached.focus,
#basic_search .input.attached.focus {
  outline-style: unset;
}

/* Pages */
h2 i {
  color: var(--text-color-secondary);
}

form[action="dashboard.php"] > div > .pull-left:has(h2) {
  float: unset;
}

.dialog {
  border: 0;
  border-radius: var(--border-radius);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  background-color: var(--background-color);
}
.dialog h3 {
  color: var(--primary-color);
  margin-top: 5px;
  margin-bottom: 15px;
  font-size: calc(0.875rem + (1.25rem - 0.875rem) * (100vw - 320px) / (1200px - 320px));
}
@media (max-width: 320px) {
  .dialog h3 {
    font-size: 0.875rem;
  }
}
@media (min-width: 1200px) {
  .dialog h3 {
    font-size: 1.25rem;
  }
}
.dialog caption {
  margin-bottom: 10px;
  margin-top: 10px;
}
.dialog fieldset input:not([type=checkbox]) {
  border-radius: var(--form-field-border-radius);
  border: var(--form-field-border);
  color: var(--form-field-color);
  min-height: var(--form-field-small-min-height);
  padding: var(--form-field-small-padding);
  background-color: var(--form-field-background-color);
  box-shadow: var(--form-field-box-shadow);
  font-size: var(--form-field-small-font-size);
  line-height: var(--form-field-font-size);
  height: unset;
}
.dialog fieldset input:not([type=checkbox])::placeholder {
  color: var(--form-field-placeholder-color);
}
.dialog fieldset input:not([type=checkbox]):hover {
  box-shadow: var(--form-field-focus-shadow);
}
.dialog fieldset input:not([type=checkbox]):focus, .dialog fieldset input:not([type=checkbox]):focus-visible {
  box-shadow: var(--form-field-focus-shadow);
  border: var(--form-field-border-focus);
  outline: unset;
}
.dialog .buttons {
  padding-bottom: 10px;
  display: block;
}
.dialog small {
  font-size: 12px;
  color: var(--text-color-secondary);
}
.dialog table.grid.form caption, .dialog .grid.form .field {
  padding-left: 0;
}
.dialog table {
  font-size: calc(0.75rem + (1rem - 0.75rem) * (100vw - 320px) / (1200px - 320px));
  color: var(--text-color);
}
@media (max-width: 320px) {
  .dialog table {
    font-size: 0.75rem;
  }
}
@media (min-width: 1200px) {
  .dialog table {
    font-size: 1rem;
  }
}
.dialog hr {
  background: var(--border-color);
}
.dialog th {
  background: transparent;
  border: 0;
  padding-left: 0;
  padding-bottom: 20px;
}
.dialog th em {
  font-style: normal;
  font-size: calc(0.875rem + (1.25rem - 0.875rem) * (100vw - 320px) / (1200px - 320px));
}
@media (max-width: 320px) {
  .dialog th em {
    font-size: 0.875rem;
  }
}
@media (min-width: 1200px) {
  .dialog th em {
    font-size: 1.25rem;
  }
}

/* Tickets */
.thread-entry.message .header {
  background: var(--primary-color);
  color: var(--text-color-light);
  font-size: 13px;
  padding-top: 15px;
  padding-bottom: 15px;
  border-color: var(--primary-color);
}
.thread-entry.message .header time, .thread-entry.message .header span, .thread-entry.message .header .title.faded {
  color: var(--text-color-light) !important;
}

.thread-entry.avatar .header:before,
.thread-entry.avatar.message .header:after {
  border-left: 7px solid var(--primary-color);
}

.thread-entry .thread-body {
  box-shadow: unset;
  border: 1px solid var(--border-color);
  border-top: 0;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  padding-top: 20px;
  padding-bottom: 20px;
}
.thread-entry .thread-body > div p {
  font-size: 13px;
  color: var(--text-color);
  line-height: 1.4em;
}
.thread-entry .thread-body > div p a {
  color: var(--primary-color) !important;
}

.thread-entry .header {
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  border-color: var(--border-color);
  padding-top: 15px;
  padding-bottom: 15px;
}

.thread-entry.response .header {
  background: var(--secondary-color);
}

.thread-entry.avatar.response .header:after {
  border-right: 7px solid var(--secondary-color);
}

.thread-entry.avatar.response .header:before {
  border-right-color: var(--border-color);
}

.thread-entry::after,
.thread-entry::before {
  display: none;
}

.thread-event .type-icon::after,
.type-icon {
  background-color: #fff;
  overflow: hidden;
  border-radius: var(--border-radius);
}

#ticket_thread .faded {
  color: var(--text-color-secondary);
}
#ticket_thread .faded b {
  color: var(--text-color-secondary);
}

.thread-event .description {
  font-size: 12px;
  color: var(--text-color-secondary);
}

.thread-entry.note .thread-body,
.thread-entry.note .header {
  background: var(--gray);
}

.thread-entry.avatar.note .header:after {
  border-right-color: var(--gray);
}

.tixTitle h3 {
  font-size: calc(0.875rem + (1.25rem - 0.875rem) * (100vw - 320px) / (1200px - 320px));
  color: var(--text-color);
  font-weight: normal;
  margin-bottom: 15px;
  margin-top: 10px;
}
@media (max-width: 320px) {
  .tixTitle h3 {
    font-size: 0.875rem;
  }
}
@media (min-width: 1200px) {
  .tixTitle h3 {
    font-size: 1.25rem;
  }
}

.ticket_info {
  background-color: transparent;
  font-size: 12px;
  margin-top: 15px;
}
.ticket_info th {
  color: var(--text-color);
  font-weight: 500;
}
.ticket_info td {
  color: var(--text-color-secondary);
  font-weight: normal;
}
.ticket_info td a {
  text-decoration: underline;
}
.ticket_info th, .ticket_info td {
  padding-bottom: 10px;
}

#response_options {
  margin-top: 50px;
}
#response_options #response-tabs {
  margin-bottom: 15px;
}

#response_options > form {
  border: 0;
  background-color: transparent;
}

/* Tabs */
ul.tabs {
  padding: 4px 0 0 0;
  margin: 15px 0 0 0;
  text-align: left;
  height: unset;
  border-bottom: 1px solid var(--border-color);
  background: transparent;
  position: relative;
  box-shadow: unset;
}
ul.tabs li {
  box-shadow: unset;
  border: 0;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  padding-bottom: 5px;
  bottom: -1px;
}
ul.tabs li:not(.active) {
  box-shadow: unset;
  bottom: 0;
}
ul.tabs li.active {
  box-shadow: unset;
  border: 0;
  border-bottom: 2px solid var(--primary-color);
  bottom: -1px;
  background-color: transparent;
}
ul.tabs li.error, ul.tabs li.active.error {
  border-top-color: transparent !important;
  background-color: transparent !important;
  border-bottom: 2px solid red;
}
ul.tabs li.error a:before, ul.tabs li.active.error a:before {
  background-color: transparent !important;
}
ul.tabs li.error a, ul.tabs li.active.error a {
  color: red;
}
ul.tabs li a {
  color: var(--text-color);
}
ul.tabs li.active a {
  color: var(--primary-color);
}

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

.tab_content .table td {
  background-color: transparent !important;
}

/* Table */
#content table.list tfoot td {
  background-color: var(--gray);
}
#content table.list tbody tr:nth-child(2n) td {
  background-color: var(--gray);
}
#content table.list tbody tr:nth-child(2n+1) td {
  background-color: #fff;
}
#content table.list thead th a.desc,
#content table.list thead th a.asc {
  background-color: transparent;
  color: var(--primary-color) !important;
}
#content table.list thead th:has(a.desc),
#content table.list thead th:has(a.asc) {
  background-color: var(--gray-dark);
}

#ticketTable, #content table.list {
  margin-top: 40px;
  width: 100% !important;
  border: 0;
  margin-bottom: 40px;
  /* Target odd rows */
  /* Target even rows */
}
#ticketTable caption, #content table.list caption {
  padding: 15px 5px 20px;
  text-align: left;
  color: var(--text-color);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
  margin-bottom: 10px;
}
#ticketTable th, #content table.list th {
  height: 20px;
  line-height: 24px;
  background: var(--gray);
  border: 0;
  padding: 8px 10px;
  color: var(--text-color);
  font-weight: 600;
}
#ticketTable th a, #content table.list th a {
  color: var(--text-color);
}
#ticketTable td, #content table.list td {
  padding: 8px 10px;
  border: 0;
  border-right: none;
  border-top: none;
}
#ticketTable tr:nth-child(odd), #content table.list tr:nth-child(odd) {
  background-color: #fff; /* background for odd rows */
}
#ticketTable tr:nth-child(even), #content table.list tr:nth-child(even) {
  background: var(--gray); /* background for even rows */
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
#ticketTable a.Icon.webTicket, #ticketTable .link, #content table.list a.Icon.webTicket, #content table.list .link {
  color: var(--text-color);
  font-weight: 600;
  padding-left: 0;
}

.Icon.webTicket {
  background: unset;
}

/* Notices */
#msg_warning {
  background-color: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  color: var(--text-color);
  padding: 15px 0;
  font-size: 13px;
}
#msg_warning .Icon.overdueTicket {
  background: unset;
  padding-left: 30px;
}

#msg_notice {
  background-color: transparent;
  border: 1px solid #2e8755;
  border-radius: var(--border-radius);
  color: #2e8755;
  padding: 10px 15px;
  font-size: 13px;
  background-image: unset;
  max-width: var(--content-width);
  margin: 10px auto;
}

#msg_info {
  background-color: transparent;
  border: 1px solid var(--primary-color);
  border-radius: var(--border-radius);
  color: var(--primary-color);
  padding: 10px 15px;
  font-size: 13px;
  background-image: unset;
  max-width: var(--content-width);
  margin: 10px auto;
}
#msg_info strong {
  margin-bottom: 5px;
  display: inline-block;
  font-size: 14px;
}
#msg_info a:hover {
  border-bottom: none;
}
#msg_info i {
  display: none;
}

#msg_error {
  background-color: #fff0f0;
  border: 1px solid #a00;
  border-radius: var(--border-radius);
  color: var(--text-color);
  padding: 10px 15px;
  font-size: 13px;
  background-image: unset;
  max-width: var(--content-width);
  margin: 10px auto;
}

/* Tip */
.tip_content {
  box-shadow: var(--shadow);
  border: 1px solid var(--border-color);
  background-color: #fff;
  font-size: 12px;
  color: var(--text-color);
  padding: 15px;
}
.tip_content h1 {
  font-size: calc(0.8125rem + (1.125rem - 0.8125rem) * (100vw - 320px) / (1200px - 320px));
  color: var(--text-color);
  border-color: var(--border-color);
  margin-bottom: 10px;
}
@media (max-width: 320px) {
  .tip_content h1 {
    font-size: 0.8125rem;
  }
}
@media (min-width: 1200px) {
  .tip_content h1 {
    font-size: 1.125rem;
  }
}
.tip_content h1 i {
  display: none;
}
.tip_content::after {
  position: absolute;
  left: -8px;
  top: 12px;
  width: 14px;
  height: 14px;
  border: 1px solid var(--border-color);
  display: block;
  content: "";
  transform: rotate(45deg);
  background-color: #fff;
  border-right: 0;
  border-top: 0;
}
.tip_content .tip_arrow {
  display: none;
}

/* Loading */
#loading {
  box-shadow: var(--shadow);
  border: 1px solid var(--border-color);
  background: #fff !important;
  font-size: 12px;
  border-radius: var(--border-radius);
}
#loading i {
  color: var(--text-color);
  font-size: 16px;
  line-height: 26px !important;
  margin-right: 10px !important;
}
#loading h1 {
  color: var(--text-color);
  font-size: calc(0.9375rem + (1.5rem - 0.9375rem) * (100vw - 320px) / (1200px - 320px));
}
@media (max-width: 320px) {
  #loading h1 {
    font-size: 0.9375rem;
  }
}
@media (min-width: 1200px) {
  #loading h1 {
    font-size: 1.5rem;
  }
}

#content:has(#landing_page) {
  background-color: var(--background-color);
}

#landing_page {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 20px;
  max-width: var(--content-width);
  width: 90%;
  column-gap: 20px;
}
#landing_page .sidebar {
  margin: 0;
  width: unset;
}
#landing_page .sidebar .front-page-button p {
  margin: 10px 0;
}
#landing_page .sidebar .front-page-button p a {
  display: block;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  color: #fff;
}
#landing_page .sidebar .front-page-button p a.blue.button {
  font-size: var(--btn-font-size);
  line-height: var(--btn-line-height);
  padding: var(--btn-padding);
  border-radius: var(--btn-border-radius);
  border: var(--btn-border-width) solid var(--btn-border-color);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--btn-shadow);
  display: inline-block;
  text-align: center;
  height: unset;
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border-color: var(--btn-border-color);
  text-shadow: unset;
  background-image: unset;
  font-weight: 500;
  min-width: 200px;
}
#landing_page .sidebar .front-page-button p a.blue.button:hover {
  box-shadow: var(--btn-shadow);
}
#landing_page .sidebar .front-page-button p a.blue.button:hover {
  background-color: var(--btn-primary-hover-bg);
  border-color: var(--btn-border-color);
  color: var(--btn-primary-color);
}
#landing_page .sidebar .front-page-button p a.green.button {
  font-size: var(--btn-font-size);
  line-height: var(--btn-line-height);
  padding: var(--btn-padding);
  border-radius: var(--btn-border-radius);
  border: var(--btn-border-width) solid var(--btn-border-color);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--btn-shadow);
  display: inline-block;
  text-align: center;
  height: unset;
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-color);
  border-color: var(--btn-secondary-border-color);
  text-shadow: unset;
  background-image: unset;
  margin-bottom: 0;
  font-weight: 500;
  min-width: 200px;
}
#landing_page .sidebar .front-page-button p a.green.button:hover {
  box-shadow: var(--btn-shadow);
}
#landing_page .sidebar .front-page-button p a.green.button i {
  color: var(--btn-secondary-color);
}
#landing_page .sidebar .front-page-button p a.green.button:hover i {
  color: var(--btn-secondary-hover-color);
}
#landing_page .sidebar .front-page-button p a.green.button:hover {
  background-color: var(--btn-secondary-hover-bg);
  color: var(--btn-secondary-hover-color);
}
#landing_page .main-content {
  flex: 3;
  margin-right: auto;
  padding: 0 20px;
}
#landing_page .main-content .thread-body {
  background-color: transparent;
}
#landing_page .main-content .thread-body h1 {
  font-size: calc(1rem + (1.75rem - 1rem) * (100vw - 320px) / (1200px - 320px));
  color: var(--text-color);
  margin-top: 0;
  margin-bottom: 20px;
}
@media (max-width: 320px) {
  #landing_page .main-content .thread-body h1 {
    font-size: 1rem;
  }
}
@media (min-width: 1200px) {
  #landing_page .main-content .thread-body h1 {
    font-size: 1.75rem;
  }
}
#landing_page .main-content .thread-body p {
  font-size: calc(0.7rem + (1.05rem - 0.7rem) * (100vw - 320px) / (1200px - 320px));
  line-height: 1.6;
  color: var(--text-color);
}
@media (max-width: 320px) {
  #landing_page .main-content .thread-body p {
    font-size: 0.7rem;
  }
}
@media (min-width: 1200px) {
  #landing_page .main-content .thread-body p {
    font-size: 1.05rem;
  }
}
@media (max-width: 980px) {
  #landing_page .sidebar {
    order: 1;
  }
  #landing_page .main-content, #landing_page .main-content .thread-body {
    padding: 0;
    margin-bottom: 30px;
  }
}

/* Footer */
#footer p {
  font-size: 12px;
  color: var(--text-color-secondary);
  margin-bottom: 20px;
}
#footer a#poweredBy {
  display: none;
}

/* Client Login */
#content:has(#clientLogin) {
  background-color: var(--background-color);
  max-width: var(--content-width);
  margin: auto;
  width: 90%;
}
#content:has(#clientLogin) h1 {
  color: var(--text-color);
  font-size: calc(1rem + (1.75rem - 1rem) * (100vw - 320px) / (1200px - 320px));
  font-weight: 500;
  margin-bottom: 20px;
  margin-top: 30px;
}
@media (max-width: 320px) {
  #content:has(#clientLogin) h1 {
    font-size: 1rem;
  }
}
@media (min-width: 1200px) {
  #content:has(#clientLogin) h1 {
    font-size: 1.75rem;
  }
}
#content:has(#clientLogin) form#clientLogin {
  width: unset !important;
  margin: 45px 0 20px;
  text-align: left;
  background-color: #fff;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow);
  background-image: unset;
  padding-top: 40px;
  max-width: 450px !important;
}
#content:has(#clientLogin) form#clientLogin > div {
  display: flex !important;
  flex-direction: column;
}
#content:has(#clientLogin) form#clientLogin .login-box {
  box-shadow: unset;
  width: unset;
  padding-top: 0;
  color: var(--text-color-secondary);
  font-size: 13px;
}
#content:has(#clientLogin) form#clientLogin .instructions {
  padding: 0 15px 10px;
  width: unset;
  font-size: 13px;
}
#content:has(#clientLogin) form#clientLogin input {
  border-radius: var(--form-field-border-radius);
  border: var(--form-field-border);
  color: var(--form-field-color);
  min-height: var(--form-field-small-min-height);
  padding: var(--form-field-small-padding);
  background-color: var(--form-field-background-color);
  box-shadow: var(--form-field-box-shadow);
  font-size: var(--form-field-small-font-size);
  line-height: var(--form-field-font-size);
  height: unset;
  margin-top: 5px;
  width: 100%;
  max-width: 400px;
}
#content:has(#clientLogin) form#clientLogin input::placeholder {
  color: var(--form-field-placeholder-color);
}
#content:has(#clientLogin) form#clientLogin input:hover {
  box-shadow: var(--form-field-focus-shadow);
}
#content:has(#clientLogin) form#clientLogin input:focus, #content:has(#clientLogin) form#clientLogin input:focus-visible {
  box-shadow: var(--form-field-focus-shadow);
  border: var(--form-field-border-focus);
  outline: unset;
}
#content:has(#clientLogin) form#clientLogin input.btn {
  font-size: var(--btn-font-size);
  line-height: var(--btn-line-height);
  padding: var(--btn-padding);
  border-radius: var(--btn-border-radius);
  border: var(--btn-border-width) solid var(--btn-border-color);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--btn-shadow);
  display: inline-block;
  text-align: center;
  height: unset;
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border-color: var(--btn-border-color);
  text-shadow: unset;
  background-image: unset;
}
#content:has(#clientLogin) form#clientLogin input.btn:hover {
  box-shadow: var(--btn-shadow);
}
#content:has(#clientLogin) form#clientLogin input.btn:hover {
  background-color: var(--btn-primary-hover-bg);
  border-color: var(--btn-border-color);
  color: var(--btn-primary-color);
}

/* Manage Your Profile Information */
#content:has(form[action="profile.php"]) {
  background-color: var(--background-color);
  max-width: var(--content-width);
  margin: auto;
  width: 90%;
}
#content:has(form[action="profile.php"]) h1 {
  color: var(--text-color);
  font-size: calc(1rem + (1.75rem - 1rem) * (100vw - 320px) / (1200px - 320px));
  font-weight: 500;
  margin-bottom: 20px;
  margin-top: 30px;
}
@media (max-width: 320px) {
  #content:has(form[action="profile.php"]) h1 {
    font-size: 1rem;
  }
}
@media (min-width: 1200px) {
  #content:has(form[action="profile.php"]) h1 {
    font-size: 1.75rem;
  }
}
#content:has(form[action="profile.php"]) form[action="profile.php"] {
  padding: 20px 20px;
  width: unset !important;
  margin: 45px 0 20px;
  text-align: left;
  background-color: #fff;
  border-radius: var(--border-radius);
  max-width: var(--form-width);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow);
  background-image: unset;
}
#content:has(form[action="profile.php"]) form[action="profile.php"] input {
  border-radius: var(--form-field-border-radius);
  border: var(--form-field-border);
  color: var(--form-field-color);
  min-height: var(--form-field-small-min-height);
  padding: var(--form-field-small-padding);
  background-color: var(--form-field-background-color);
  box-shadow: var(--form-field-box-shadow);
  font-size: var(--form-field-small-font-size);
  line-height: var(--form-field-font-size);
  height: unset;
  margin-top: 5px;
}
#content:has(form[action="profile.php"]) form[action="profile.php"] input::placeholder {
  color: var(--form-field-placeholder-color);
}
#content:has(form[action="profile.php"]) form[action="profile.php"] input:hover {
  box-shadow: var(--form-field-focus-shadow);
}
#content:has(form[action="profile.php"]) form[action="profile.php"] input:focus, #content:has(form[action="profile.php"]) form[action="profile.php"] input:focus-visible {
  box-shadow: var(--form-field-focus-shadow);
  border: var(--form-field-border-focus);
  outline: unset;
}
#content:has(form[action="profile.php"]) form[action="profile.php"] tbody > tr > td > hr:first-child {
  display: none;
}
#content:has(form[action="profile.php"]) form[action="profile.php"] label > span {
  font-size: 13px;
  color: var(--text-color-secondary);
  font-weight: 400;
  margin-bottom: 5px;
  display: inline-block;
}
#content:has(form[action="profile.php"]) form[action="profile.php"] h3 {
  margin-bottom: 10px;
}
#content:has(form[action="profile.php"]) form[action="profile.php"] table td {
  vertical-align: middle;
}
#content:has(form[action="profile.php"]) form[action="profile.php"] tr:has(select),
#content:has(form[action="profile.php"]) form[action="profile.php"] tr:has(input[type=password]),
#content:has(form[action="profile.php"]) form[action="profile.php"] label:has(input[type=tel]) {
  color: var(--text-color-secondary);
  font-size: 13px;
  font-weight: 400;
}
#content:has(form[action="profile.php"]) form[action="profile.php"] tr:has(select) input,
#content:has(form[action="profile.php"]) form[action="profile.php"] tr:has(input[type=password]) input,
#content:has(form[action="profile.php"]) form[action="profile.php"] label:has(input[type=tel]) input {
  width: unset;
}
#content:has(form[action="profile.php"]) form[action="profile.php"] tr:has(select) input[type=password],
#content:has(form[action="profile.php"]) form[action="profile.php"] tr:has(input[type=password]) input[type=password],
#content:has(form[action="profile.php"]) form[action="profile.php"] label:has(input[type=tel]) input[type=password] {
  width: 100% !important;
}

/* Check Ticket Status */
/* Register */
#content:has(form[action="account.php"]) {
  background-color: var(--background-color);
  max-width: var(--content-width);
  margin: auto;
  width: 90%;
}
#content:has(form[action="account.php"]) h1 {
  color: var(--text-color);
  font-size: calc(1rem + (1.75rem - 1rem) * (100vw - 320px) / (1200px - 320px));
  font-weight: 500;
  margin-bottom: 20px;
  margin-top: 30px;
}
@media (max-width: 320px) {
  #content:has(form[action="account.php"]) h1 {
    font-size: 1rem;
  }
}
@media (min-width: 1200px) {
  #content:has(form[action="account.php"]) h1 {
    font-size: 1.75rem;
  }
}
#content:has(form[action="account.php"]) form[action="account.php"] {
  padding: 20px 20px;
  width: unset !important;
  margin: 35px 0 20px;
  text-align: left;
  background-color: #fff;
  border-radius: var(--border-radius);
  max-width: var(--form-width);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow);
  background-image: unset;
}
#content:has(form[action="account.php"]) form[action="account.php"] tbody > tr > td > hr:first-child {
  display: none;
}
#content:has(form[action="account.php"]) form[action="account.php"] label > span {
  font-size: 13px;
  color: var(--text-color-secondary);
  font-weight: 400;
  margin-bottom: 5px;
  display: inline-block;
}
#content:has(form[action="account.php"]) form[action="account.php"] h3 {
  margin-bottom: 10px;
}
#content:has(form[action="account.php"]) form[action="account.php"] table td {
  vertical-align: middle;
}
#content:has(form[action="account.php"]) form[action="account.php"] tr:has(select),
#content:has(form[action="account.php"]) form[action="account.php"] tr:has(input[type=password]),
#content:has(form[action="account.php"]) form[action="account.php"] label:has(input[type=tel]) {
  color: var(--text-color-secondary);
  font-size: 13px;
  font-weight: 400;
}
#content:has(form[action="account.php"]) form[action="account.php"] tr:has(select) input,
#content:has(form[action="account.php"]) form[action="account.php"] tr:has(input[type=password]) input,
#content:has(form[action="account.php"]) form[action="account.php"] label:has(input[type=tel]) input {
  width: unset;
}
#content:has(form[action="account.php"]) form[action="account.php"] tr:has(select) input[type=password],
#content:has(form[action="account.php"]) form[action="account.php"] tr:has(input[type=password]) input[type=password],
#content:has(form[action="account.php"]) form[action="account.php"] label:has(input[type=tel]) input[type=password] {
  width: 100% !important;
}
#content:has(form[action="account.php"]) form[action="account.php"] input[type=submit][value=Register] {
  font-size: var(--btn-font-size);
  line-height: var(--btn-line-height);
  padding: var(--btn-padding);
  border-radius: var(--btn-border-radius);
  border: var(--btn-border-width) solid var(--btn-border-color);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--btn-shadow);
  display: inline-block;
  text-align: center;
  height: unset;
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border-color: var(--btn-border-color);
  text-shadow: unset;
  background-image: unset;
  color: #fff !important;
}
#content:has(form[action="account.php"]) form[action="account.php"] input[type=submit][value=Register]:hover {
  box-shadow: var(--btn-shadow);
}
#content:has(form[action="account.php"]) form[action="account.php"] input[type=submit][value=Register]:hover {
  background-color: var(--btn-primary-hover-bg);
  border-color: var(--btn-border-color);
  color: var(--btn-primary-color);
}
#content:has(form[action="account.php"]) form[action="account.php"] input[type=button] {
  font-size: var(--btn-font-size);
  line-height: var(--btn-line-height);
  padding: var(--btn-padding);
  border-radius: var(--btn-border-radius);
  border: var(--btn-border-width) solid var(--btn-border-color);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--btn-shadow);
  display: inline-block;
  text-align: center;
  height: unset;
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-color);
  border-color: var(--btn-secondary-border-color);
  text-shadow: unset;
  background-image: unset;
  margin-bottom: 0;
}
#content:has(form[action="account.php"]) form[action="account.php"] input[type=button]:hover {
  box-shadow: var(--btn-shadow);
}
#content:has(form[action="account.php"]) form[action="account.php"] input[type=button] i {
  color: var(--btn-secondary-color);
}
#content:has(form[action="account.php"]) form[action="account.php"] input[type=button]:hover i {
  color: var(--btn-secondary-hover-color);
}
#content:has(form[action="account.php"]) form[action="account.php"] input[type=button]:hover {
  background-color: var(--btn-secondary-hover-bg);
  color: var(--btn-secondary-hover-color);
}

/* Open a New Ticket */
#content:has(form#ticketForm) {
  margin: auto;
  background-color: var(--background-color);
  padding-top: 50px;
  text-align: center;
}
#content:has(form#ticketForm) input[type=submit][value="Create Ticket"] {
  color: #fff !important;
}
#content:has(form#ticketForm) h1 {
  color: var(--text-color);
  font-size: calc(1rem + (1.75rem - 1rem) * (100vw - 320px) / (1200px - 320px));
  font-weight: 500;
  margin-bottom: 20px;
}
@media (max-width: 320px) {
  #content:has(form#ticketForm) h1 {
    font-size: 1rem;
  }
}
@media (min-width: 1200px) {
  #content:has(form#ticketForm) h1 {
    font-size: 1.75rem;
  }
}
#content:has(form#ticketForm) hr {
  display: none;
}
#content:has(form#ticketForm) form {
  margin-top: 40px;
  text-align: left;
}
#content:has(form#ticketForm) table {
  width: unset !important;
  margin: 0 auto 20px;
  text-align: left;
  background-color: #fff;
  border-radius: var(--border-radius);
  max-width: var(--form-width);
  padding: 30px 30px;
  display: flex;
  flex-direction: column;
  font-size: 13px;
}
#content:has(form#ticketForm) table tr td {
  padding-bottom: 5px;
}
#content:has(form#ticketForm) table label {
  width: 100%;
}
#content:has(form#ticketForm) table label input[type=email], #content:has(form#ticketForm) table label input[type=text], #content:has(form#ticketForm) table label select {
  width: 100%;
}
#content:has(form#ticketForm) table label:has(input[type=tel]) {
  color: var(--text-color-secondary);
  font-size: 13px;
}
#content:has(form#ticketForm) table label:has(input[type=tel]) input {
  width: unset;
}
#content:has(form#ticketForm) table label > span {
  margin-bottom: 5px;
  display: inline-block;
  font-weight: normal;
  font-size: 13px;
  color: var(--text-color-secondary);
}
#content:has(form#ticketForm) table tbody {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#content:has(form#ticketForm) table tbody td {
  width: unset;
  display: block;
}
#content:has(form#ticketForm) table tbody:has(select#topicId) {
  border-top: 1px solid var(--border-color-light);
  padding-top: 20px;
  margin-top: 30px;
}
#content:has(form#ticketForm) table #dynamic-form .form-header {
  margin-top: 20px;
}
#content:has(form#ticketForm) table #dynamic-form .form-header h3 {
  margin-bottom: 15px;
  font-weight: 500;
}

/* View Tickets Client */
#content:has(#ticketInfo) {
  background-color: var(--background-color);
  max-width: var(--content-width);
  margin: auto;
  width: 90%;
}
#content:has(#ticketInfo) table {
  margin: 20px auto 10px;
}
#content:has(#ticketInfo) table h1 {
  font-size: calc(0.9375rem + (1.5rem - 0.9375rem) * (100vw - 320px) / (1200px - 320px));
  color: var(--text-color);
  border-bottom: 1px solid var(--border-color-light);
  padding-bottom: 18px;
}
@media (max-width: 320px) {
  #content:has(#ticketInfo) table h1 {
    font-size: 0.9375rem;
  }
}
@media (min-width: 1200px) {
  #content:has(#ticketInfo) table h1 {
    font-size: 1.5rem;
  }
}
#content:has(#ticketInfo) table h1 i.refresh {
  color: var(--text-color-secondary);
}
#content:has(#ticketInfo) table.infoTable {
  background-color: transparent;
  display: flex;
  flex-direction: column;
  gap: 25px;
}
#content:has(#ticketInfo) table.infoTable td, #content:has(#ticketInfo) table.infoTable th {
  padding: 0;
}
#content:has(#ticketInfo) table.infoTable .headline {
  border-bottom: 0;
  background-color: transparent;
}
#content:has(#ticketInfo) table.infoTable tbody {
  font-size: 13px;
}
#content:has(#ticketInfo) table.infoTable tbody td {
  padding-bottom: 10px;
  color: var(--text-color-secondary);
}
#content:has(#ticketInfo) #ticketThread {
  border-bottom: 0;
}
#content:has(#ticketInfo) form#reply {
  border: 0;
  margin-top: 50px;
}
#content:has(#ticketInfo) form#reply h2 {
  border: 0;
}
#content:has(#ticketInfo) .thread-entry.avatar.message .header {
  font-weight: 400;
}
#content:has(#ticketInfo) .thread-entry.avatar.message .header b {
  font-weight: 500;
}
#content:has(#ticketInfo) .thread-entry.avatar.message .header:after {
  border-left: none;
  border-right: 7px solid var(--primary-color);
}

/* Tickets List Client */
#content:has(#ticketTable):has(.search.well) h1 {
  font-size: calc(0.9375rem + (1.5rem - 0.9375rem) * (100vw - 320px) / (1200px - 320px));
  color: var(--text-color);
  border-bottom: 1px solid var(--border-color-light);
  padding-bottom: 18px;
}
@media (max-width: 320px) {
  #content:has(#ticketTable):has(.search.well) h1 {
    font-size: 0.9375rem;
  }
}
@media (min-width: 1200px) {
  #content:has(#ticketTable):has(.search.well) h1 {
    font-size: 1.5rem;
  }
}
#content:has(#ticketTable):has(.search.well) h1 i.refresh {
  color: var(--text-color-secondary);
}
#content:has(#ticketTable):has(.search.well) table#ticketTable {
  margin-top: 0;
}

/* Edit ticket Client */
#content:has(form[action="tickets.php"]) {
  background-color: var(--background-color);
  max-width: var(--content-width);
  margin: auto;
  width: 90%;
}
#content:has(form[action="tickets.php"]) h1 {
  font-size: calc(0.9375rem + (1.5rem - 0.9375rem) * (100vw - 320px) / (1200px - 320px));
  color: var(--text-color);
  border-bottom: 1px solid var(--border-color-light);
  padding-bottom: 18px;
}
@media (max-width: 320px) {
  #content:has(form[action="tickets.php"]) h1 {
    font-size: 0.9375rem;
  }
}
@media (min-width: 1200px) {
  #content:has(form[action="tickets.php"]) h1 {
    font-size: 1.5rem;
  }
}
#content:has(form[action="tickets.php"]) table {
  margin-top: 30px;
}
#content:has(form[action="tickets.php"]) table .form-header h3 {
  margin-bottom: 15px;
  font-weight: 500;
}
#content:has(form[action="tickets.php"]) table .form-header {
  font-size: 12px;
}
#content:has(form[action="tickets.php"]) table tbody label > span {
  font-size: 12px;
  color: var(--text-color-secondary);
  font-weight: 500;
  margin-bottom: 5px;
  display: inline-block;
}
#content:has(form[action="tickets.php"]) hr {
  display: none;
}

/*# sourceMappingURL=clients.css.map */