/* Core layout Styling */
html {
  color: #000;
  /* Don't delete - weird bug with page head */
}

body {
  background: #d5d8db;
  color: #010101;
}

h1 {
  font-size: 18px;
}

h2 {
  font-size: 16px;
}

h3 {
  font-size: 14px;
}

h2.sectionHeading {
  font-size: 18px;
  font-weight: bold;
}

h4, .h4, .subheading-blue {
  font-size: 14px;
  background-color: #31708f;
  color: #fff;
  width: auto !important;
  padding: 5px 10px;
  line-height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 5px;
}
h4 .btn, .h4 .btn, .subheading-blue .btn {
  line-height: 1.2;
}

hr {
  color: #ccc;
  border-color: #ccc;
  margin: 5px 0 0;
  width: 100%;
}

.rulerBorderBottom {
  border-bottom: 1px solid #31708f;
  padding-bottom: 12px;
}

.help-block.error {
  color: #c9302c;
}

#page_wrapper > .container:first-child {
  background-color: #fff;
  min-height: 96vh;
}

summary {
  cursor: pointer;
}

p:last-of-type {
  margin: 0;
}

[hidden] {
  display: none;
}

.container {
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 992px) {
  .container {
    width: 98%;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 95%;
  }
}
#footer {
  width: 100%;
  margin: 10px auto;
  text-align: center;
}

#footer p {
  text-align: center;
  font-size: 12px;
  color: #444;
}

/* In addition to bootstrap */
.label-hide .control-label {
  display: none;
}

.form-group.tinymce {
  position: relative;
}
.form-group.tinymce:before {
  content: "";
  display: block;
  height: 200px;
  color: #fff;
  background: #fff;
  border: 2px solid #eee;
  border-radius: 10px;
  box-shadow: none;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
}
.form-group.tinymce:not(.active) {
  height: 225px;
  overflow: hidden;
}
.form-group.tinymce:not(.active) textarea.tinymce, .form-group.tinymce:not(.active) .tox-tinymce {
  visibility: hidden;
}
.form-group.tinymce:not(.active) .tox-tinymce {
  height: 200px !important;
}

.heading {
  text-align: center;
  font-size: 28px;
}

h1.page-title {
  float: left;
  margin: 2% 0 0 2%;
  font-weight: 600;
  padding: 0;
}

.logged-data {
  color: #666;
  font-size: 11px;
  float: right;
  margin: 10px 0 0;
  display: flex;
}

.logged-data b {
  display: inline-block;
  padding-left: 5px;
}

.logged-data hr {
  margin: 5px 0;
}

.logged-data .menu-open {
  flex: 1;
  font-size: 30px;
}

.logged-data .info {
  vertical-align: top;
}

.logged-data .actionImg {
  padding-left: 10px;
}

.container .logo {
  display: block;
  float: left;
  overflow: hidden;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .logged-data {
    width: 100%;
    padding-bottom: 1rem;
  }
}
@media (min-width: 768px) {
  .logged-data .menu-open {
    display: none;
  }
}
/** -- Menu -- */
#menu.navbar {
  border: none;
  background: #31708f;
  border-radius: 4px;
  margin: 20px 0;
  color: #fff;
}

#menu.navbar .nav {
  margin: 0;
}

#menu.navbar > ul > li > a {
  padding: 15px 30px;
}

#menu.navbar a {
  color: inherit;
}

#menu.navbar .navbar-nav > .active > a,
#menu.navbar .navbar-nav > .active > a:hover,
#menu.navbar .navbar-nav > .active > a:focus,
#menu.navbar .open a {
  color: #000;
}

#menu.navbar i {
  margin-right: 1ch;
}

#menu.navbar .dropdown-menu {
  background: #fff;
  border: 1px solid #e7e7e7;
}

#menu.navbar .dropdown-menu li {
  line-height: 1.2;
}

#menu.navbar .dropdown-menu a {
  color: #31708f;
}

.nav {
  margin: 10px 0; /* previously 10px all-round */
}

#menu-ticket-btn {
  background: #D1FF00;
  padding: 15px;
  border-radius: 3px;
  float: right;
}

#menu-ticket-btn:hover {
  background: #cbf50a;
}

#menu-ticket-btn a:hover {
  text-decoration: none;
}

@media (max-width: 768px) {
  #menu {
    display: none;
  }
  #menu.open {
    display: flex;
    flex-direction: column;
  }
}
.responsive-table {
  overflow-y: auto;
}

.table {
  background: #9f9f9f;
  border-bottom: 1px solid #9f9f9f;
  border-right: 1px solid #9f9f9f;
  border-radius: 0 0 6px 6px;
  color: #010101;
  margin: 0;
  width: 100%;
}

.table > thead > tr > th {
  background: #f2f5f6; /* Old browsers */
  background: -moz-linear-gradient(top, #f2f5f6 0%, #e5e5e5 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f5f6), color-stop(100%, #e5e5e5)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f2f5f6 0%, #e5e5e5 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f2f5f6 0%, #e5e5e5 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f2f5f6 0%, #e5e5e5 100%); /* IE10+ */
  background: linear-gradient(to bottom, #f2f5f6 0%, #e5e5e5 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f2f5f6", endColorstr="#e5e5e5", GradientType=0); /* IE6-9 */
  color: #000000;
  font: bold 12px/1 Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
  vertical-align: middle;
  text-align: center;
  height: 50px;
}

.table > thead > tr > th > a > i {
  margin-right: 8px;
}

.table > thead > tr > th > a {
  color: #000000;
  text-decoration: none;
}

.table > tbody > tr {
  width: 100%;
}

.table > tbody > tr > td {
  background: #f9f9f9;
  vertical-align: middle;
  line-height: 16px;
  padding: 6px 8px;
  word-wrap: break-word;
  position: relative;
}

.table > tbody > tr.rowActive > td {
  background-color: #f0c040;
}

.table > tfoot > tr > td {
  color: #fff;
}

.table > tfoot > tr > td span {
  padding: 10px;
}

.table > tbody > tr.highlight > td {
  background: #FFD782;
}

.table > tbody > tr.row1 > td {
  background: #ccc;
}

.table-scroller {
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
}

.table .selection {
  width: 1px;
  text-align: center;
}

.table td.selection {
  background-color: #e5e5e5;
}

.table .selection input[type=number] {
  width: 40px;
  text-align: center;
}

/* Table colors */
tr.bgLightBlue td {
  background-color: #f0f1ff !important;
}

tr.bgOrangeLight td {
  background-color: #fdeeb2 !important;
}

tr.bgClosed td {
  background-color: #51a251 !important;
}

tr.bgClosed td .darkgreen {
  color: #bfffbf !important;
}

tr.bgClosed td .darkorange {
  color: #fbbe75 !important;
}

.high-priority, .high-priority td {
  background-color: rgba(255, 216, 216, 0.8) !important;
  border-bottom: 1px solid #8b0000 !important;
}

.medium-priority, .medium-priority td {
  background-color: rgba(255, 246, 210, 0.8) !important;
  border-bottom: 1px solid #b8860b !important;
}

.low-priority, .low-priority td {
  /* -- has no additional colour effect -- */
}

.no-priority, .no-priority td {
  border-bottom: 1px solid #7a7a7a !important;
}

/* -- Custom TABLE styles -- */
.table tbody tr.owner td {
  background-color: #d8d8f0;
}

/* Utilities from later bootstrap versions / tailwind that are missing in v3 */
/* Border */
.border-0 {
  border: 0 solid #ccc;
}

.border-top-0 {
  border-top: 0 solid #ccc;
}

.border-right-0 {
  border-right: 0 solid #ccc;
}

.border-bottom-0 {
  border-bottom: 0 solid #ccc;
}

.border-left-0 {
  border-left: 0 solid #ccc;
}

.border-1 {
  border: 1px solid #ccc;
}

.border-top-1 {
  border-top: 1px solid #ccc;
}

.border-right-1 {
  border-right: 1px solid #ccc;
}

.border-bottom-1 {
  border-bottom: 1px solid #ccc;
}

.border-left-1 {
  border-left: 1px solid #ccc;
}

.border-2 {
  border: 2px solid #ccc;
}

.border-top-2 {
  border-top: 2px solid #ccc;
}

.border-right-2 {
  border-right: 2px solid #ccc;
}

.border-bottom-2 {
  border-bottom: 2px solid #ccc;
}

.border-left-2 {
  border-left: 2px solid #ccc;
}

.border-3 {
  border: 3px solid #ccc;
}

.border-top-3 {
  border-top: 3px solid #ccc;
}

.border-right-3 {
  border-right: 3px solid #ccc;
}

.border-bottom-3 {
  border-bottom: 3px solid #ccc;
}

.border-left-3 {
  border-left: 3px solid #ccc;
}

.border-4 {
  border: 4px solid #ccc;
}

.border-top-4 {
  border-top: 4px solid #ccc;
}

.border-right-4 {
  border-right: 4px solid #ccc;
}

.border-bottom-4 {
  border-bottom: 4px solid #ccc;
}

.border-left-4 {
  border-left: 4px solid #ccc;
}

.border-5 {
  border: 5px solid #ccc;
}

.border-top-5 {
  border-top: 5px solid #ccc;
}

.border-right-5 {
  border-right: 5px solid #ccc;
}

.border-bottom-5 {
  border-bottom: 5px solid #ccc;
}

.border-left-5 {
  border-left: 5px solid #ccc;
}

.border-primary {
  border-color: #007bff;
}

/* Border Radius */
.rounded {
  border-radius: 5px;
}

.rounded-top {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.rounded-right {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.rounded-bottom {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.rounded-left {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.circle {
  border-radius: 50%;
}

/* Breadcrumb amends from bootstrap **/
.breadcrumb {
  margin-bottom: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.breadcrumb li:first-child {
  font-weight: bold;
}

.breadcrumb-bar > * {
  margin-top: -10px;
  margin-bottom: 10px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Buttons in addition to bootstrap **/
.btn-member, .btn-member:hover {
  background-color: rgba(7, 0, 218, 0.8);
  border-radius: 15px;
  color: #fff;
  padding: 5px 15px;
  margin: 5px;
}
.btn-member i:hover, .btn-member:hover i:hover {
  transform: scale(1.2);
}

.btn-pink, .btn-pink:focus {
  background-color: #FF0088;
  color: #fff;
}
.btn-pink:hover {
  color: #fff;
  background-color: rgb(229.5, 0, 122.4);
}

.btn-light {
  border: 1px solid #ccc;
  background-color: #efefef;
}
.btn-light:hover {
  background-color: rgb(226.25, 226.25, 226.25);
}

.btn-secondary, .btn-secondary:focus {
  background-color: #5bc0de;
  color: #fff;
}
.btn-secondary:hover {
  color: #fff;
  background-color: rgb(69.7715736041, 183.845177665, 217.7284263959);
}

.green, .text-green {
  color: #008000 !important;
}

.bg-green {
  background: #008000 !important;
  color: #fff;
}

.blue, .text-blue {
  color: #0000ff !important;
}

.bg-blue {
  background: #0000ff !important;
  color: #fff;
}

.red, .text-red {
  color: #ff0000 !important;
}

.bg-red {
  background: #ff0000 !important;
  color: #fff;
}

.orange, .text-orange {
  color: #ff6600 !important;
}

.bg-orange {
  background: #ff6600 !important;
  color: #000;
}

.grey, .text-grey {
  color: #585858 !important;
}

.bg-grey {
  background: #585858 !important;
  color: #fff;
}

.black, .text-black {
  color: #000 !important;
}

.bg-black {
  background: #000 !important;
  color: #fff;
}

.purple, .text-purple {
  color: #815CB8 !important;
}

.bg-purple {
  background: #815CB8 !important;
  color: #fff;
}

.pink, .text-pink {
  color: #FF0088 !important;
}

.bg-pink {
  background: #FF0088 !important;
  color: #fff;
}

.darkred, .text-darkred {
  color: darkred !important;
}

.bg-darkred {
  background: darkred !important;
  color: #fff;
}

.darkorange, .text-darkorange {
  color: darkorange !important;
}

.bg-darkorange {
  background: darkorange !important;
  color: #000;
}

.darkgreen, .text-darkgreen {
  color: darkgreen !important;
}

.bg-darkgreen {
  background: darkgreen !important;
  color: #fff;
}

.darkblue, .text-darkblue {
  color: #369 !important;
}

.bg-darkblue {
  background: #369 !important;
  color: #fff;
}

.light, .text-light {
  color: #f0f0f0 !important;
}

.bg-light {
  background: #f0f0f0 !important;
  color: #000;
}

.d-none, .hidden {
  display: none !important;
}

.d-block {
  display: block !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.d-grid {
  display: grid;
}

/* Extra small devices (phones) */
@media (max-width: 575.98px) {
  .d-xs-none {
    display: none !important;
  }
  .d-xs-block {
    display: block !important;
  }
  .d-xs-inline {
    display: inline !important;
  }
  .d-xs-flex {
    display: flex !important;
  }
}
/* Small devices (tablets) */
@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }
  .d-sm-block {
    display: block !important;
  }
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-flex {
    display: flex !important;
  }
}
/* Medium devices (laptops, desktops) */
@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-inline {
    display: inline !important;
  }
  .d-md-flex {
    display: flex !important;
  }
}
/* Large devices (large laptops, desktops) */
@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-inline {
    display: inline !important;
  }
  .d-lg-flex {
    display: flex !important;
  }
}
/* Extra large devices (extra-large laptops, desktops) */
@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }
  .d-xl-block {
    display: block !important;
  }
  .d-xl-inline {
    display: inline !important;
  }
  .d-xl-flex {
    display: flex !important;
  }
}
/* Shorthands - useful for table */
@media (max-width: 950px) {
  .hide-mobile {
    display: none;
  }
}
@media (min-width: 950px) {
  .hide-desktop {
    display: none;
  }
}
/* Flex Utilities */
.flex-row {
  flex-direction: row !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 1rem;
}

.gap-4 {
  gap: 1.5rem;
  row-gap: 1rem;
}

.gap-5 {
  gap: 3rem;
  row-gap: 1rem;
}

.flex-grow-1, .flex-1 {
  flex: 1;
}

/* Justify content utilities */
.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

/* Align items utilities */
.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

/* Align content utilities */
.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

/* Breakpoints */
/* Extra small devices (phones) */
@media (max-width: 575.98px) {
  .flex-xs-row {
    flex-direction: row !important;
  }
  .flex-xs-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-xs-column {
    flex-direction: column !important;
  }
  .flex-xs-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-xs-wrap {
    flex-wrap: wrap !important;
  }
  .justify-content-xs-start {
    justify-content: flex-start !important;
  }
  .justify-content-xs-end {
    justify-content: flex-end !important;
  }
  .justify-content-xs-center {
    justify-content: center !important;
  }
  .justify-content-xs-between {
    justify-content: space-between !important;
  }
  .justify-content-xs-around {
    justify-content: space-around !important;
  }
  .align-items-xs-start {
    align-items: flex-start !important;
  }
  .align-items-xs-end {
    align-items: flex-end !important;
  }
  .align-items-xs-center {
    align-items: center !important;
  }
  .align-items-xs-baseline {
    align-items: baseline !important;
  }
  .align-items-xs-stretch {
    align-items: stretch !important;
  }
  .align-content-xs-start {
    align-content: flex-start !important;
  }
  .align-content-xs-end {
    align-content: flex-end !important;
  }
  .align-content-xs-center {
    align-content: center !important;
  }
  .align-content-xs-between {
    align-content: space-between !important;
  }
  .align-content-xs-around {
    align-content: space-around !important;
  }
  .align-content-xs-stretch {
    align-content: stretch !important;
  }
}
/* Small devices (tablets) */
@media (min-width: 576px) {
  .flex-sm-row {
    flex-direction: row !important;
  }
  .flex-sm-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-sm-column {
    flex-direction: column !important;
  }
  .flex-sm-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-sm-wrap {
    flex-wrap: wrap !important;
  }
  .justify-content-sm-start {
    justify-content: flex-start !important;
  }
  .justify-content-sm-end {
    justify-content: flex-end !important;
  }
  .justify-content-sm-center {
    justify-content: center !important;
  }
  .justify-content-sm-between {
    justify-content: space-between !important;
  }
  .justify-content-sm-around {
    justify-content: space-around !important;
  }
  .align-items-sm-start {
    align-items: flex-start !important;
  }
  .align-items-sm-end {
    align-items: flex-end !important;
  }
  .align-items-sm-center {
    align-items: center !important;
  }
  .align-items-sm-baseline {
    align-items: baseline !important;
  }
  .align-items-sm-stretch {
    align-items: stretch !important;
  }
  .align-content-sm-start {
    align-content: flex-start !important;
  }
  .align-content-sm-end {
    align-content: flex-end !important;
  }
  .align-content-sm-center {
    align-content: center !important;
  }
  .align-content-sm-between {
    align-content: space-between !important;
  }
  .align-content-sm-around {
    align-content: space-around !important;
  }
  .align-content-sm-stretch {
    align-content: stretch !important;
  }
}
/* Medium devices (laptops, desktops) */
@media (min-width: 768px) {
  .flex-md-row {
    flex-direction: row !important;
  }
  .flex-md-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-md-column {
    flex-direction: column !important;
  }
  .flex-md-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-md-wrap {
    flex-wrap: wrap !important;
  }
  .justify-content-md-start {
    justify-content: flex-start !important;
  }
  .justify-content-md-end {
    justify-content: flex-end !important;
  }
  .justify-content-md-center {
    justify-content: center !important;
  }
  .justify-content-md-between {
    justify-content: space-between !important;
  }
  .justify-content-md-around {
    justify-content: space-around !important;
  }
  .align-items-md-start {
    align-items: flex-start !important;
  }
  .align-items-md-end {
    align-items: flex-end !important;
  }
  .align-items-md-center {
    align-items: center !important;
  }
  .align-items-md-baseline {
    align-items: baseline !important;
  }
  .align-items-md-stretch {
    align-items: stretch !important;
  }
  .align-content-md-start {
    align-content: flex-start !important;
  }
  .align-content-md-end {
    align-content: flex-end !important;
  }
  .align-content-md-center {
    align-content: center !important;
  }
  .align-content-md-between {
    align-content: space-between !important;
  }
  .align-content-md-around {
    align-content: space-around !important;
  }
  .align-content-md-stretch {
    align-content: stretch !important;
  }
}
/* Large devices (large laptops, desktops) */
@media (min-width: 992px) {
  .flex-lg-row {
    flex-direction: row !important;
  }
  .flex-lg-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-lg-column {
    flex-direction: column !important;
  }
  .flex-lg-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-lg-wrap {
    flex-wrap: wrap !important;
  }
  .justify-content-lg-start {
    justify-content: flex-start !important;
  }
  .justify-content-lg-end {
    justify-content: flex-end !important;
  }
  .justify-content-lg-center {
    justify-content: center !important;
  }
  .justify-content-lg-between {
    justify-content: space-between !important;
  }
  .justify-content-lg-around {
    justify-content: space-around !important;
  }
  .align-items-lg-start {
    align-items: flex-start !important;
  }
  .align-items-lg-end {
    align-items: flex-end !important;
  }
  .align-items-lg-center {
    align-items: center !important;
  }
  .align-items-lg-baseline {
    align-items: baseline !important;
  }
  .align-items-lg-stretch {
    align-items: stretch !important;
  }
  .align-content-lg-start {
    align-content: flex-start !important;
  }
  .align-content-lg-end {
    align-content: flex-end !important;
  }
  .align-content-lg-center {
    align-content: center !important;
  }
  .align-content-lg-between {
    align-content: space-between !important;
  }
  .align-content-lg-around {
    align-content: space-around !important;
  }
  .align-content-lg-stretch {
    align-content: stretch !important;
  }
}
/* Extra large devices (extra-large laptops, desktops) */
@media (min-width: 1200px) {
  .flex-xl-row {
    flex-direction: row !important;
  }
  .flex-xl-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-xl-column {
    flex-direction: column !important;
  }
  .flex-xl-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-xl-wrap {
    flex-wrap: wrap !important;
  }
  .justify-content-xl-start {
    justify-content: flex-start !important;
  }
  .justify-content-xl-end {
    justify-content: flex-end !important;
  }
  .justify-content-xl-center {
    justify-content: center !important;
  }
  .justify-content-xl-between {
    justify-content: space-between !important;
  }
  .justify-content-xl-around {
    justify-content: space-around !important;
  }
  .align-items-xl-start {
    align-items: flex-start !important;
  }
  .align-items-xl-end {
    align-items: flex-end !important;
  }
  .align-items-xl-center {
    align-items: center !important;
  }
  .align-items-xl-baseline {
    align-items: baseline !important;
  }
  .align-items-xl-stretch {
    align-items: stretch !important;
  }
  .align-content-xl-start {
    align-content: flex-start !important;
  }
  .align-content-xl-end {
    align-content: flex-end !important;
  }
  .align-content-xl-center {
    align-content: center !important;
  }
  .align-content-xl-between {
    align-content: space-between !important;
  }
  .align-content-xl-around {
    align-content: space-around !important;
  }
  .align-content-xl-stretch {
    align-content: stretch !important;
  }
}
/* CSS Grid */
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 576px) {
  .grid-sm-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .grid-md-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 992px) {
  .grid-lg-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-lg-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .grid-xl-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* Gap utilities are in flex */
.autofit {
  width: max-content !important;
}

/* Padding Utility Classes */
.p-0 {
  padding: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.px-1 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.px-3 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.px-4 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.px-5 {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pt-1 {
  padding-top: 0.25rem !important;
}

.pt-2 {
  padding-top: 0.5rem !important;
}

.pt-3 {
  padding-top: 1rem !important;
}

.pt-4 {
  padding-top: 1.5rem !important;
}

.pt-5 {
  padding-top: 3rem !important;
}

.pr-0 {
  padding-right: 0 !important;
}

.pr-1 {
  padding-right: 0.25rem !important;
}

.pr-2 {
  padding-right: 0.5rem !important;
}

.pr-3 {
  padding-right: 1rem !important;
}

.pr-4 {
  padding-right: 1.5rem !important;
}

.pr-5 {
  padding-right: 3rem !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pb-1 {
  padding-bottom: 0.25rem !important;
}

.pb-2 {
  padding-bottom: 0.5rem !important;
}

.pb-3 {
  padding-bottom: 1rem !important;
}

.pb-4 {
  padding-bottom: 1.5rem !important;
}

.pb-5 {
  padding-bottom: 3rem !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.pl-1 {
  padding-left: 0.25rem !important;
}

.pl-2 {
  padding-left: 0.5rem !important;
}

.pl-3 {
  padding-left: 1rem !important;
}

.pl-4 {
  padding-left: 1.5rem !important;
}

.pl-5 {
  padding-left: 3rem !important;
}

/* Margin Utility Classes */
.m-0 {
  margin: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.mx-1 {
  margin-left: 0.25rem !important;
  margin-right: 0.25rem !important;
}

.mx-2 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}

.mx-3 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

.mx-4 {
  margin-left: 1.5rem !important;
  margin-right: 1.5rem !important;
}

.mx-5 {
  margin-left: 3rem !important;
  margin-right: 3rem !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

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

.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.mr-0 {
  margin-right: 0 !important;
}

.mr-1 {
  margin-right: 0.25rem !important;
}

.mr-2 {
  margin-right: 0.5rem !important;
}

.mr-3 {
  margin-right: 1rem !important;
}

.mr-4 {
  margin-right: 1.5rem !important;
}

.mr-5 {
  margin-right: 3rem !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.ml-0 {
  margin-left: 0 !important;
}

.ml-1 {
  margin-left: 0.25rem !important;
}

.ml-2 {
  margin-left: 0.5rem !important;
}

.ml-3 {
  margin-left: 1rem !important;
}

.ml-4 {
  margin-left: 1.5rem !important;
}

.ml-5 {
  margin-left: 3rem !important;
}

/* Custom Utilities */
.clearBoth {
  clear: both;
}

.mt-8 {
  margin-top: 8px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mt-15 {
  margin-top: 15px;
}

.mt--10 {
  margin-top: -10px;
}

.bold {
  font-weight: bold !important;
}

.nowrap {
  white-space: nowrap;
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.small {
  font-size: 85%;
}

.underline {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Legacy jQuery components that can ultimately be replaced by new component library */
/* Custom Uploader Drag + Drop */
.dm-upload {
  text-align: center;
  padding: 20px 40px;
  background: #cadce1;
  border: 2px dashed #96a3ed;
}

.dm-upload.active {
  border-color: red;
  background-color: #ffd6d6;
}

.upload-heading {
  margin: 0px 0 10px;
  font-size: 16px;
  font-weight: normal;
}

.upload-file {
  padding: 15px 10px;
  border-bottom: 1px dotted #ccc;
}

.upload-remove {
  float: right;
}

.upload-name {
  font-size: 13px;
  font-weight: bold;
  float: left;
  word-break: break-word;
  line-height: 1.2;
  letter-spacing: 0.7px;
}

.upload-preview {
  overflow: hidden;
}

.upload-preview img {
  height: 50px;
}

.upload-progress {
  position: relative;
  clear: left;
  margin-top: 6px;
  height: 20px;
  background: #ddd;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 3px #6f6f6f;
}

.upload-progress > .progress-bar {
  transition: width 1s;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 20px;
  background: red;
  text-align: center;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  letter-spacing: 1px;
}

.upload-progress > .progress-bar.bg-primary {
  background-color: #007bff !important;
}

.upload-progress > .progress-bar.bg-success {
  background-color: #28a745 !important;
}

.upload-progress > .progress-bar.bg-danger {
  background-color: #dc3545 !important;
}

.upload-progress > .progress-bar.bg-warning {
  background-color: #ffc107 !important;
}

/* Lightbox */
.ekko-lightbox .modal-content {
  border: none;
  box-shadow: none;
  background: none;
}

.ekko-lightbox .modal-header {
  background: none;
  border: none;
  box-shadow: none;
}

.ekko-lightbox .close {
  font-size: 40px;
  color: #fff;
  opacity: 1;
}

.ekko-lightbox-container {
  background: #fff;
  border-radius: 5px;
}

.ekko-lightbox-nav-overlay a {
  font-size: 60px !important;
  text-decoration: none;
}

.messages {
  position: relative;
  margin: 5px 0;
  width: 100%;
}

#messages .messages {
  margin: 10px 0;
}

.messages ul {
  margin: 0;
  padding: 0 10px;
}

.messages .message {
  font-size: 17px;
  color: #2b2a26;
  position: relative;
  overflow: hidden;
  min-height: 45px;
  margin: 0 4px 30px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.message .message-close, .message .message-img {
  bottom: 0;
  display: block;
  height: auto;
  line-height: 41px;
  position: absolute;
  text-align: center;
  text-decoration: none;
  top: 0;
}

.message .message-close {
  border-left: 1px solid #FFFFFF;
  box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.5);
  width: 35px;
  right: 1px;
}

.message .message-img {
  border-right: 2px solid #FFFFFF;
  box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.1);
  moz-box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.1);
  width: 70px;
  left: 1px;
}

.message .message-img .message-img-wrap {
  position: relative;
  height: 100%;
}

.message .message-img .message-icon {
  background-position: -125px 0;
  display: block;
  height: 26px;
  left: 50%;
  margin-left: -12px;
  margin-top: -12px;
  position: absolute;
  top: 50%;
  width: 26px;
}

.messages .info {
  background-color: #bbdcf4;
}

.messages .success {
  background-color: #def4bb;
}

.messages .warning {
  background-color: #ECD69E;
}

.messages .error {
  background-color: #f4bbbb;
}

.messages .info .message-img .message-icon {
  background-position: -88px 0;
}

.messages .success .message-img .message-icon {
  background-position: -161px 0;
}

.messages .warning .message-img .message-icon {
  background-position: -125px 0;
}

.messages .error .message-img .message-icon {
  background-position: -52px 0;
}

.message .message-content {
  padding: 11px 48px 10px 90px;
}

.message .message-content,
.message .message-content p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 24px;
  text-shadow: none;
  margin: 0;
}

.message .message-content a {
  text-shadow: none;
  text-decoration: underline;
}

h4.modal-title {
  font-size: 18px;
  background: none;
  color: #000;
  width: auto !important;
  padding-left: 5px;
}

.modal-vertical-centered {
  transform: translate(0, 50%) !important;
  -ms-transform: translate(0, 50%) !important; /* IE 9 */
  -webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */
}

.modal-body {
  padding: 1px 0 0 1px;
}

.modal-header {
  padding: 7px 15px 3px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  background: #f8f8f8;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y4ZjhmOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, #f8f8f8 0%, #eeeeee 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8f8f8), color-stop(100%, #eeeeee));
  background: -webkit-linear-gradient(top, #f8f8f8 0%, #eeeeee 100%);
  background: -o-linear-gradient(top, #f8f8f8 0%, #eeeeee 100%);
  background: -ms-linear-gradient(top, #f8f8f8 0%, #eeeeee 100%);
  background: linear-gradient(to bottom, #f8f8f8 0%, #eeeeee 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f8f8f8", endColorstr="#eeeeee", GradientType=0);
  -moz-border-radius: 6px 6px 0 0;
  -webkit-border-radius: 6px 6px 0 0;
  border-radius: 6px 6px 0 0;
  -webkit-box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
}

.modal-header h3 {
  font-size: 20px;
  letter-spacing: -0.5px;
}

.modal-dialog {
  max-width: 95%;
}

.modal-footer:before, .modal-footer:after {
  display: none;
}

.msgBox {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  margin: 0 auto 10px auto;
  padding: 10px;
  min-height: 50px;
  width: 80%;
}

.msgbox .message {
  font-size: 16px;
}

.msgBox .message p {
  padding: 0 5px 0 0;
  margin: 0;
}

.msgBox.success {
  background-color: #ccffcc;
}

.msgBox.warning {
  background-color: #ffffcc;
}

.msgBox.danger {
  background-color: #ffcccc;
}

.msgBox .message .actions {
  margin: 0 0 0 110px;
  display: inline-block;
}

.msgBox .message .actions .btn {
  margin: 0 5px;
}

.inlineNotice {
  color: red;
  font-size: 12px;
  margin: 5px 0 0 10px;
}

/* Close Icon */
.sprite {
  background: url(/default/img/sprite.png) no-repeat;
  display: inline-block;
}

.close-icon {
  width: 16px;
  height: 16px;
  background-position: -26px 0;
}

.action-icon {
  cursor: pointer;
}

/* -- PAGING -- */
.paging-simple,
.paging-advanced {
  margin: 10px auto;
}

ul.paging {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  list-style: none;
  margin: 0 auto;
  padding: 0;
}

ul.paging li {
  display: inline-block;
  padding: 4px 8px;
  text-align: center;
}

ul.paging > li > a,
ul.paging > li > span {
  padding: 3px 11px 2px;
}

ul.paging li[class*=paging-] a {
  padding: 3px 9px 2px;
}

ul.paging li a b {
  display: inline-block;
  font-size: 20px;
  letter-spacing: -1px;
  padding: 0 1px;
  vertical-align: bottom;
}

ul.paging ul > li > select {
  float: left;
  padding: 4px 4px 4px 6px;
  margin: 0;
  line-height: 20px;
  border-radius: 0;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-left: none;
}

/* ==========================================================================
   Overwrite default page styles for popup
   ========================================================================== */
body.popup {
  background: #fff;
  padding: 4px 5px;
  border-bottom: 60px solid #f8f8f8;
  min-height: 100vh;
}

.popup .widget {
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}

.modal-iframe {
  background: url(../img/spinner/loading.gif) center center no-repeat;
}

body.popup .modal-footer {
  bottom: 0;
  left: 0;
  background: linear-gradient(to bottom, #f8f8f8 0%, #eeeeee 100%);
  width: 100%;
  padding: 1rem 2rem;
  position: fixed;
  border-top: none;
}

.popup-content {
  padding: 4px 8px 10px;
}

.popup hr {
  margin: 5px 0 0;
  width: 100%;
}

.popup .form-vertical {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}

.popup .form-vertical .control-group {
  padding: 8px 8px 4px;
}

.popup .form-vertical input[type=text], .popup .form-vertical input[type=password], .popup .form-vertical input[type=datetime], .popup .form-vertical input[type=datetime-local], .popup .form-vertical input[type=date], .popup .form-vertical input[type=month], .popup .form-vertical input[type=time],
.popup .form-vertical input[type=week], .popup .form-vertical input[type=number], .popup .form-vertical input[type=email], .popup .form-vertical input[type=url], .popup .form-vertical input[type=search], .popup .form-vertical input[type=tel], .popup .form-vertical input[type=color], .popup .form-vertical textarea, .popup .form-vertical select {
  margin-bottom: 5px;
}

.nav-tabs {
  border-bottom: 1px solid #337ab7;
  display: flex;
  flex-wrap: wrap;
}
.nav-tabs > div, .nav-tabs a {
  border-radius: 4px 4px 0 0;
  padding: 10px 15px;
  color: #337ab7;
  margin-right: 2px;
}
.nav-tabs > div a, .nav-tabs a a {
  text-decoration: none !important;
  color: inherit !important;
}
.nav-tabs > div:hover {
  background: #eee;
}
.nav-tabs > div.active, .nav-tabs > div.active:hover {
  background: #337ab7;
  color: #fff;
}
.nav-tabs > li.active a {
  background: #337ab7;
  color: #fff;
}

/* New component library */
filter-bar {
  display: grid;
  gap: 2rem;
}
filter-bar :empty + .buttons {
  display: none;
}
filter-bar .buttons {
  min-width: 85px;
}
filter-bar input, filter-bar select {
  width: max-content;
}
filter-bar label {
  text-wrap: nowrap;
}

@media (min-width: 992px) {
  filter-bar {
    grid-template-columns: auto 1fr auto;
  }
}
paging-bar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
paging-bar .pagination {
  margin: 0;
  flex: 1;
}
paging-bar .pagination ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: center;
}
paging-bar .pagination ul a, paging-bar .pagination ul select {
  padding: 3px 6px;
  border: 1px solid #ccc;
  border-right-width: 0;
  height: 100%;
  display: block;
  color: #000;
  min-width: 40px;
  text-align: center;
}
paging-bar .pagination ul a {
  line-height: 1.8;
}
paging-bar .pagination ul a:hover {
  text-decoration: none;
  background-color: #f1f1f1;
}
paging-bar .pagination ul select {
  text-align: center;
  padding: 3px;
}
paging-bar .pagination ul li:first-child a {
  border-left-width: 1px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
paging-bar .pagination ul li:last-child a {
  border-right-width: 1px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
@media (min-width: 576px) {
  paging-bar {
    flex-direction: row;
    text-align: left;
    justify-content: space-between;
  }
}

.search-results .search-result {
  max-width: 475px;
  display: block;
  padding: 5px 2.5rem 5px 5px;
  line-height: 1.2;
  margin-bottom: 2px;
  position: relative;
  color: #555;
  font-size: smaller;
}
.search-results .search-result div {
  overflow: hidden;
  font-weight: bold;
}
.search-results .search-result:hover, .search-results .search-result:focus {
  text-decoration: none;
  background-color: #f1f1f1;
}
.search-results .search-resulta:after {
  font-family: "Font Awesome 5 Free";
  content: "\f061";
  font-weight: 900;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}
.search-results .btn-primary {
  width: 100%;
  border-radius: 0;
  color: #fff !important;
  font-size: smaller;
  padding: 4px;
}
.search-results .btn-primary:focus {
  background-color: #2e6da4;
}

#salesorder-search {
  position: relative;
  display: inline-flex;
  margin: 8px 30px;
  padding: 4px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  float: right;
  height: 30px;
  min-width: 250px;
}
#salesorder-search:focus {
  outline: 1px solid #000;
}
#salesorder-search input {
  border: none;
  outline: none;
  color: #000;
  padding-left: 8px;
  flex: 1;
}
#salesorder-search button {
  all: unset;
  color: #555;
}
#salesorder-search filter-bar {
  display: none;
}
#salesorder-search .search-results {
  right: 0.5px;
  position: absolute;
  background: #fff;
  color: #000;
  z-index: 5;
  border-radius: 5px;
  box-shadow: 5px 5px 15px -5px #ccc;
  overflow: hidden;
  width: max-content;
  max-width: 80vw;
  top: 30px;
}

/* Custom styling for pages */
body#page-login #page_wrapper > .container:first-child {
  background-color: transparent;
}

.login-form {
  margin: 50px auto 0;
  max-width: 250px;
}
.login-form .head {
  background-color: #363636;
  border-radius: 25px 25px 0 0;
  color: #fff;
  font: 16px/40px Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
  padding-left: 20px;
}
.login-form fieldset {
  background-color: #fff;
  border-radius: 0 0 10px 10px;
  padding: 20px 12px;
}

.unit-status .sprite {
  background: url(../img/unit-status.png) no-repeat;
  width: 55px;
  height: 15px;
}

.unit-status_pending {
  color: #444 !important;
}

.unit-status_pending .sprite {
  background-position: 0 0;
}

.unit-status_quote_issued {
  color: #319312 !important;
}

.unit-status_quote_issued .sprite {
  background-position: 0 -24px;
}

.unit-status_lost {
  color: #f72b2b !important;
}

.unit-status_lost .sprite {
  background-position: 0 -48px;
}

.unit-status_expired {
  color: #f72b2b !important;
}

.unit-status_expired .sprite {
  background-position: 0 -48px;
}

.unit-status_po_received {
  color: #cc33cc !important;
}

.unit-status_po_received .sprite {
  background-position: 0 -71px;
}

.salesorder-image-count {
  background: darkred;
  border-radius: 50%;
  padding: 2px;
  position: absolute;
  transform: translate(10%, -80%);
  text-align: center;
  width: 3ch;
  height: 3ch;
  font-size: smaller;
  color: #fff;
}

/* Salesorder Details */
.order-summary-lines {
  height: auto;
  padding: 5px;
}

.order-summary-line {
  margin: 0 0 2px 0;
  display: block;
  color: #000;
  padding: 2px 5px;
  border-radius: 5px;
  text-decoration: none;
}
.order-summary-line.complete {
  background: #F0F1FF;
}

.order-status {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 15px;
  margin: 0 15px;
}
.order-status select {
  margin-bottom: 5px;
}

/* Filter file categories based on whether all or shipment */
#salesorder_files_salesorder_file_description option[disabled] {
  display: none;
}

/* Custom override for column widths */
#page-salesorder-details .col-sm-11 .col-md-2 {
  width: 15.666667%;
}

/* Serial Browse  */
.serial-details-link .fa {
  margin-right: 5px;
}

.serial-details-link .serial-image-count {
  background: darkred;
  border-radius: 50%;
  padding: 2px;
  position: absolute;
  transform: translate(10%, -60%);
  width: 3ch;
  height: 3ch;
  font-size: smaller;
}

/*Ticket Details*/
.ticket-item {
  height: 100%;
}

.ticket-header {
  border-radius: 5px;
  font-size: 1.5rem;
  padding: 5px 20px;
}

.ticket-info {
  background-color: #FAFAFA;
  height: 100% !important;
  min-height: 100% !important;
  padding-bottom: 20px;
  margin-bottom: 20px;
  padding-top: 5px;
}

.ticket-details-buttons {
  display: flex;
  justify-content: space-between;
}

.remove-comment-btn {
  all: unset;
  cursor: pointer;
  position: absolute;
  background-color: #d9534f;
  border-radius: 5px;
  right: 40px;
  font-size: 1.5rem;
  color: #fff;
  padding: 0 5px;
}

.remove-comment-btn i {
  cursor: pointer;
}

.remove-comment-btn:hover, .remove-comment-btn:active {
  background-color: #c9302c;
}

.member-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.ticket-breadcrumb {
  padding-bottom: 20px;
}

.ticket-members {
  display: flex;
  flex-direction: column;
}

.ticket-members-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
}

.member-item {
  background-color: rgba(7, 0, 218, 0.8);
  border-radius: 15px;
  width: fit-content;
  height: fit-content;
  color: #fff;
  padding: 5px 15px;
  margin: 5px;
  text-align: center;
}

.member-item button {
  all: unset;
  cursor: pointer !important;
  transition: transform 0.2s;
}

.member-item button:hover {
  transform: scale(1.2);
}

.member-item i {
  cursor: pointer;
}

.comment-box h5 {
  text-align: center;
  font-weight: bold;
  font-size: 2rem;
  background-color: #6780cc;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
}

.comment-box span {
  font-weight: bold;
}

.comment-box textarea {
  margin-bottom: 20px;
}

.comment-input {
  margin-bottom: 10px;
}

.comment-header {
  background-color: #f6f6f6;
  border-radius: 3px 10px 10px 10px;
  padding: 5px;
  margin-bottom: 10px;
}

.comment-body {
  font-size: 1.4rem;
}

.create-ticket-form textarea:focus,
.create-ticket-form select:active,
.create-ticket-form select:focus,
.create-ticket-form input:focus,
.create-ticket-form input[type]:focus,
.create-ticket-form .uneditable-input:focus,
.ticket-item textarea:focus,
.ticket-item select:active,
.ticket-item select:focus,
.ticket-item input:focus,
.ticket-item input[type]:focus,
.ticket-item .uneditable-input:focus,
.comment-box textarea:focus,
.comment-box input:focus,
.comment-box input[type]:focus,
.comment-box .uneditable-input:focus {
  border: 2px grey solid;
  box-shadow: none;
  outline: 0 none;
}

.ticket-files {
  padding-top: 30px;
}

.ticket-file-buttons {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

@media (max-width: 950px) {
  .ticket-item {
    display: flex;
    flex-direction: column;
  }
  .ticket-info, .ticket-right {
    width: 100%;
  }
  .ticket-members-header {
    display: flex;
    flex-direction: column;
  }
}
@media (max-width: 950px) {
  .ticket-expand-btn {
    margin-top: 5px;
  }
}

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