@charset "UTF-8";
:root {
  --split-gutter-size: 12px;
  --tree-spacing: 1.5rem;
  --tree-item-height: 1.4rem;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

html {
  font-family: var(--font-family-standard);
  font-size: var(--font-size);
  color: var(--color-text);
  background-color: var(--color-background);
}

button {
  font-family: var(--font-family-standard);
}

body {
  line-height: var(--line-height);
}

a {
  color: var(--color-text-lighter);
  text-decoration: none;
  cursor: pointer;
}
a:hover {
  color: black;
  text-decoration: underline;
}

/* Preset widths */
.width-500 {
  width: 500%;
}

.width-250 {
  width: 250%;
}

.width-150 {
  width: 150%;
}

.width-100 {
  width: 100%;
}

.width-75 {
  width: 75%;
}

.width-50 {
  width: 50%;
}

.width-25 {
  width: 25%;
}

.width-10 {
  width: 10%;
}

/* Textcase */
.upperCase {
  text-transform: uppercase;
}

.lowerCase {
  text-transform: lowercase;
}

/* Display helpers */
.d-block {
  display: block;
}

/* margin helpers */
.mt-5 {
  margin-top: 25px;
}

.mt-4 {
  margin-top: 20px;
}

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

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

.mt-1 {
  margin-top: 5px;
}

/* 12 Column system */
@media (max-width: 768px) {
  .zXCol_1, .zXCol_2, .zXCol_3, .zXCol_4, .zXCol_5, .zXCol_6, .zXCol_7, .zXCol_8, .zXCol_9, .zXCol_10, .zXCol_11, .zXCol_12 {
    width: 99% !important;
  }
}
@media (min-width: 768px) {
  .zXCol_1, .zXCol_2, .zXCol_3, .zXCol_4, .zXCol_5, .zXCol_6 {
    width: 50% !important;
  }
  .zXCol_7, .zXCol_8, .zXCol_9, .zXCol_10, .zXCol_11, .zXCol_12 {
    width: 99% !important;
  }
}
@media (min-width: 992px) {
  .zXCol.l1 {
    width: 8.33333% !important;
  }
  .zXCol.l2 {
    width: 16.66666% !important;
  }
  .zXCol.l3 {
    width: 24.99999% !important;
  }
  .zXCol.l4 {
    width: 33.33333% !important;
  }
  .zXCol.l5 {
    width: 41.66666% !important;
  }
  .zXCol.l6 {
    width: 49.99999% !important;
  }
  .zXCol.l7 {
    width: 58.33333% !important;
  }
  .zXCol.l8 {
    width: 66.66666% !important;
  }
  .zXCol.l9 {
    width: 74.99999% !important;
  }
  .zXCol.l10 {
    width: 83.33333% !important;
  }
  .zXCol.l11 {
    width: 91.66666% !important;
  }
  .zXCol.l12 {
    width: 99.99999% !important;
  }
}
.zXPage {
  margin-bottom: 2vw;
}
.zXPage .zXPageAction {
  padding-left: 1vw;
}
.zXPage .zXPageAction .zXPageAction {
  padding-left: 0vw;
}

body.login {
  background: radial-gradient(circle, rgb(112, 89, 163) 0%, rgb(72, 48, 135) 100%);
  height: 100vh;
  width: 100vw;
}

.LoginContainer {
  left: 50vw;
  position: relative;
  top: 40vh;
  transform: translate(-50%, -50%);
  width: 60rem;
  height: 25rem;
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  background-color: rgba(255, 255, 255, 0.968627451);
}
@media (max-width: 768px) {
  .LoginContainer {
    width: 100vw;
    padding: 1rem 0;
  }
  .LoginContainer .zXFormEntry {
    width: 100%;
  }
  .LoginContainer .zXFormEntry .zXFormEntryInputBlock {
    width: 100%;
  }
  .LoginContainer .zXFormEntry .zXFormEntryInputBlock .zXFormEntryInput {
    width: 100%;
  }
  .LoginContainer .zXFormEntry .zXFormEntryInputBlock .zXFormEntryInput .zXFormInput {
    width: calc(100% - 30px) !important;
  }
}

.LoginLeft {
  width: 50%;
  height: 100%;
  padding: 0px 30px;
  border-right: 1px solid lightgrey;
}

.LoginLeftImg {
  height: 100%;
  width: 100%;
  /*background-image: url('../images/Logo_9Knots.svg');*/
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.LoginRight {
  width: 50%;
  height: 100%;
}

.LoginContainer .zXRequired {
  background-color: revert !important;
}

.LoginContainer .zXFormLabel.zXRequiredLabel::after {
  content: "";
}

.LoginContainer .zXTextButton {
  color: var(--color-text-lighter);
  background: none !important;
  font-size: 0.9rem;
  cursor: pointer;
  border: none;
  padding: 0 !important;
}

.LoginFooter {
  content: "9 Knots Solutions B.V.";
  color: lightgray;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center; /* Zorgt voor gecentreerde inhoud */
  padding: 10px; /* Optioneel, om wat ruimte aan de binnenkant te geven */
  z-index: 1000;
  text-decoration: none;
}

.LoginFooter a {
  text-decoration: none;
}

.zXStdPopupTabContainer.left.collapsed .zXVersion {
  visibility: hidden;
}
.zXStdPopupTabContainer.left.collapsed .zXMinimizeIcon {
  margin-left: 1rem;
}
.zXStdPopupTabContainer.left.collapsed .zXMinimizeIcon:before {
  content: "\f101";
  font-family: "Font Awesome 6 Pro";
}
.zXStdPopupTabContainer.left.collapsed .zXStdPopupTabButton {
  width: 30px;
  min-width: unset;
  padding-right: 0px;
  padding-left: 0.5rem;
}
.zXStdPopupTabContainer.left.collapsed .zXStdPopupTabButton .zXTabLabel {
  overflow: hidden;
  white-space: nowrap;
}
.zXStdPopupTabContainer.left.collapsed .zXStdPopupTabButton .zXTabLabel::before {
  display: block;
  content: attr(abbr);
  text-align: center;
  margin-left: -0.5rem;
}
.zXStdPopupTabContainer.left.collapsed .zXStdPopupTabButton.zXIconButton .zXTabLabel {
  display: none;
}
.zXStdPopupTabContainer.left.expanded .zXVersion {
  visibility: unset;
}
.zXStdPopupTabContainer.left.expanded .zXMinimizeIcon:before {
  content: "\f100";
  font-family: "Font Awesome 6 Pro";
}
.zXStdPopupTabContainer.left.expanded .zXStdPopupTabButton {
  width: unset;
}
.zXStdPopupTabContainer.right.collapsed .zXVersion {
  visibility: hidden;
}
.zXStdPopupTabContainer.right.collapsed .zXMinimizeIcon:before {
  content: "\f100";
  font-family: "Font Awesome 6 Pro";
}
.zXStdPopupTabContainer.right.expanded .zXVersion {
  visibility: unset;
}
.zXStdPopupTabContainer.right.expanded .zXMinimizeIcon:before {
  content: "\f101";
  font-family: "Font Awesome 6 Pro";
}
.zXStdPopupTabContainer.left, .zXStdPopupTabContainer.right {
  box-shadow: inset 0px 0px 40px 40px #F7F7F7;
  height: 100vh;
}
.zXStdPopupTabContainer.top, .zXStdPopupTabContainer.bottom {
  height: 100vh;
}
.zXStdPopupTabContainer.top .zXTabIcon, .zXStdPopupTabContainer.bottom .zXTabIcon {
  margin-right: 0.5rem;
}
.zXStdPopupTabContainer.top {
  margin-top: 6px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px -1px 0px inset;
  height: calc(100vh - 6px);
}

.zXStdPopupTabButtonsMinimizeButton .zXMinimizeButton {
  margin-top: 0.5rem;
}
.zXStdPopupTabButtonsMinimizeButton .zXVersion {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
  font-size: 0.85rem;
  color: #c0bfbf;
  position: absolute;
  left: 0.6rem;
  margin-top: 1px;
}
.zXStdPopupTabButtonsMinimizeButton.left .zXMinimizeIcon {
  margin-left: calc(100% - 1.5rem);
}
.zXStdPopupTabButtonsMinimizeButton.right .zXMinimizeIcon {
  margin-left: 1.5rem;
}
.zXStdPopupTabButtonsMinimizeButton .zXMinimizeIcon {
  font-weight: 900;
  font-style: normal;
  color: var(--color-text-lighter);
}
.zXStdPopupTabButtonsMinimizeButton .zXMinimizeIcon:hover {
  cursor: pointer;
  color: var(--color-primary);
}

.zXStdPopupTabButtonsBackground {
  background-color: var(--color-light);
}

.zXStdPopupTabButtonsContainer.left, .zXStdPopupTabButtonsContainer.right {
  margin-left: 5px;
  height: calc(100% - 3rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.zXStdPopupTabButtonsContainer.left .zXStdPopupTabButtonsContainerSection, .zXStdPopupTabButtonsContainer.right .zXStdPopupTabButtonsContainerSection {
  display: flex;
  flex-wrap: unset;
  flex-direction: column;
  justify-content: flex-start;
  align-content: stretch;
}
.zXStdPopupTabButtonsContainer.top, .zXStdPopupTabButtonsContainer.bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: #000;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  height: 100%;
}
.zXStdPopupTabButtonsContainer.top .zXStdPopupTabButtonsContainerSection, .zXStdPopupTabButtonsContainer.bottom .zXStdPopupTabButtonsContainerSection {
  display: flex;
  flex-wrap: unset;
  justify-content: flex-start;
  align-items: center;
}
.zXStdPopupTabButtonsContainer.top .zXStdPopupTabButton {
  margin: -4px 5px;
  padding: 0px 20px;
  user-select: none;
  font-weight: bolder;
  border-radius: 5px 5px 0px 0px;
  background: #e5e5e5;
  color: black;
  opacity: 0.65;
  font-size: 0.9rem;
  outline: none;
  cursor: pointer;
  border: 1px solid #ced4da;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 100%;
  white-space: nowrap;
}
.zXStdPopupTabButtonsContainer.top .zXStdPopupTabButton.active {
  color: #3c4043;
  opacity: 1;
  background: var(--color-background);
  border-bottom: none;
  padding-bottom: 1px;
}
.zXStdPopupTabButtonsContainer.top .zXStdPopupTabButton:hover:not(.active) {
  background-color: rgba(0, 0, 0, 0.04);
  opacity: 0.85;
}
.zXStdPopupTabButtonsContainer.left .zXStdPopupTabButton {
  margin: 3px 5px 5px 0px;
  font-size: 0.9rem;
  display: flex;
  padding-right: 20px;
  justify-content: space-between;
  border-radius: 5px;
  color: black;
  opacity: 0.65;
  background: rgba(255, 255, 255, 0.26);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.zXStdPopupTabButtonsContainer.left .zXStdPopupTabButton.active {
  box-shadow: inset -12px 0 0px -7px var(--color-primary), rgba(10, 37, 64, 0.25) 0px 0px 3px 0px inset;
  opacity: 1;
}
.zXStdPopupTabButtonsContainer.left .zXStdPopupTabButton:hover:not(.active) {
  box-shadow: inset -12px 0 0px -7px rgba(0, 0, 0, 0.5), rgba(10, 37, 64, 0.25) 0px 0px 3px 0px inset;
  opacity: 0.85;
}

section.layout {
  overflow: hidden;
}

.tabButtonsNew .zXStdPopupTabContainer.left, .tabButtonsNew .zXStdPopupTabContainer.right {
  height: 100%;
}
.tabButtonsNew .zXStdPopupTabContainer.top, .tabButtonsNew .zXStdPopupTabContainer.bottom {
  height: calc(100% - 6px);
}

.zXTabIcon {
  line-height: unset !important;
}

.zXStdPopupTabButton {
  font-size: 0.9rem;
  box-sizing: border-box;
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  min-width: 100px;
  height: 32px;
}
.zXStdPopupTabButton.active {
  font-weight: bolder;
  opacity: 1;
}
.zXStdPopupTabButton.inactive {
  opacity: 0.7;
  font-weight: 600;
  color: #000;
}

.fraSplitGutter {
  user-select: none;
  background-color: #f9f9f9;
  background-repeat: no-repeat;
  background-position: 50%;
}
.fraSplitVertical .fraSplitGutter {
  min-width: calc(var(--split-gutter-size) - 2px);
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==");
  cursor: col-resize;
  border-right: 1px solid #dee2e6;
  border-left: 1px solid #dee2e6;
  border-bottom: 0px;
  border-top: 0px;
}
.fraSplitHorizontal .fraSplitGutter {
  min-height: calc(var(--split-gutter-size) - 2px);
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=");
  cursor: row-resize;
  border-right: 0px;
  border-left: 0px;
  border-bottom: 1px solid #dee2e6;
  border-top: 1px solid #dee2e6;
}
.fraSplitGutter.fraSplitGutter_noresize {
  cursor: default;
  background-image: unset;
}

.zXStdPopupTreeContainer {
  margin: 0;
  overflow: auto;
  width: 100%;
  padding-left: 1rem;
}
.zXStdPopupTreeContainer .tree-content {
  width: 100%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  position: relative;
  font-size: 0.9em;
}

.tree-container {
  list-style: none;
  margin: 0;
  padding: 0 0 0 8px;
}
.tree-container .tree-item .tree-container {
  padding-left: var(--tree-spacing);
}
.tree-container .tree-item .tree-item-content {
  cursor: pointer;
  background-color: initial;
  text-decoration: none;
  position: relative;
  -webkit-user-select: none; /* Safari */
  user-select: none;
  color: #222;
}
.tree-container .tree-item .tree-item-content .tree-item-icon {
  display: inline-block;
  width: 1rem;
  margin-right: 0.2rem;
}
.tree-container .tree-item .tree-item-content .tree-item-icon.tree-item-icon-empty {
  display: none;
}
.tree-container .tree-item .tree-item-content .tree-item-text {
  font-weight: 400;
}
.tree-container .tree-item .tree-item-state {
  cursor: pointer;
  background-color: initial;
  text-decoration: none;
  position: relative;
  padding-right: 0.2rem;
  width: 1rem;
}
.tree-container .tree-item .tree-item-select {
  cursor: pointer;
  height: 1.8rem;
  left: 0;
  margin: -0.2rem 0 0;
  position: absolute;
  width: 100%;
}
.tree-container .tree-item .tree-item-wrap {
  display: flex;
  height: var(--tree-item-height);
  line-height: var(--tree-item-height);
  padding: 0.2rem 0.2rem;
  white-space: nowrap;
}
.tree-container .tree-item .tree-item-wrap.tree-item-row-active .tree-item-select {
  background-color: rgba(0, 0, 0, 0.09);
  box-shadow: inset 12px 0 0px -7px var(--color-primary);
  border-radius: 3px;
}
.tree-container .tree-item .tree-item-wrap:hover.tree-item-row-active .tree-item-select {
  background-color: rgba(0, 0, 0, 0.12);
  box-shadow: inset 12px 0 0px -7px var(--color-primary);
  /*background-color: hsla(calc(var(--system-cl-h)),var(--system-cl-s),calc(var(--system-cl-l) + -7.5%),var(--system-cl-a,1)) !important;*/
}
.tree-container .tree-item .tree-item-wrap:hover .tree-item-select {
  background-color: rgba(0, 0, 0, 0.09);
  box-shadow: inset 12px 0 0px -7px #787878;
  border-radius: 3px;
}
.tree-container .tree-item.tree-item-has-children.tree-item-collapsed > .tree-item-wrap .tree-item-state::before {
  content: "\f0da";
  font-family: "Font Awesome 6 Pro";
  font-size: 1.1rem;
  font-weight: 300;
}
.tree-container .tree-item.tree-item-has-children.tree-item-collapsed > ul.tree-container {
  display: none;
}
.tree-container .tree-item.tree-item-has-children.tree-item-expanded > .tree-item-wrap .tree-item-state::before {
  content: "\f0d7";
  font-family: "Font Awesome 6 Pro";
  font-size: 1.1rem;
  font-weight: 300;
}
.tree-container .tree-item.tree-item-has-children.tree-item-expanded > ul.tree-container {
  display: block;
}

/* Title of form */
.zXFormTitle {
  font-size: 1.2rem;
  font-weight: 600;
  padding-bottom: 0.4rem;
  padding-top: 0.4rem;
}

/* Subtitle on form */
.zXFormSubTitle {
  padding-top: 0.1rem;
  font-size: 1.2rem;
}

.zXSubTitle {
  font-size: 0.9rem;
  color: var(--color-text-lighter);
  font-style: italic;
}

.zXFormRow {
  margin-bottom: 5px;
  display: block;
}

.zXFormRowContent {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
}
.zXFormRowContent .zXFormEntry {
  margin-top: auto;
}

.zXFormEntry {
  margin-right: 7px;
}
.zXFormEntry .zXFormEntryInputBlock {
  display: flex;
  flex-wrap: wrap;
}
.zXFormEntry .zXFormEntryInputBlock.zXFormEntryHidden {
  min-height: unset;
}
.zXFormEntry .zXFormEntryInputBlock .zXFormEntryInput {
  display: flex;
  flex-wrap: nowrap;
  align-items: end;
}
.zXFormEntry .zXFormEntryInputBlock .zXRefButtons .zXButton:last-of-type {
  margin-right: 0px;
}

.zXFormRowSubLabel {
  font-size: 0.9rem;
  color: var(--color-text-lighter);
}

.zXFormEntryInputBlock {
  display: flex;
  flex-wrap: nowrap;
}

.zXFormEntrySubLabel {
  display: block;
  font-size: 0.9rem;
  color: var(--color-text-lighter);
}

.zXPostLabel {
  font-size: 0.9rem;
  color: var(--color-text-lighter);
  margin-left: 15px;
}

.zXPostInputButton {
  font-size: 0.7rem;
}

.zXInlineInputButton {
  padding: 0.5rem;
  text-align: center;
  font-size: 0.7rem;
  cursor: pointer;
  appearance: none;
  box-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0px inset;
  color: black;
  border-width: 0px;
  border-style: initial;
  border-color: initial;
  background: rgb(var(--color-button-background));
  transition: all 0.15s ease 0s;
  border-image: linear-gradient(transparent 20%, rgba(0, 0, 0, 0.3) 20% 80%, transparent 20%) 0 0 0 10/1px;
  width: 1rem;
  height: 1rem;
}
.zXInlineInputButton:last-of-type {
  border-radius: 0px 5px 5px 0px;
}
.zXInlineInputButton:not(.zXInActive):hover, .zXInlineInputButton:not(.zXDisabled):hover {
  filter: brightness(102%);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.7);
}
.zXInlineInputButton.zXDisabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.zXInlineInputButton.zXInActive {
  opacity: 0.5;
  cursor: initial;
}
.zXInlineInputButton .zXInlineInputButton__icon {
  text-align: center;
  width: 0.8rem;
}

.zxDropdown__search {
  width: calc(100% - 1.5rem) !important;
  border-radius: 0px !important;
  padding: 0rem 0.75rem !important;
}
.zxDropdown__field {
  display: flex;
  appearance: none;
  border: 0;
  background: rgb(var(--color-input-background));
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  color: black;
  transition: all 0.15s ease;
  padding: 0 4px;
  font-size: 0.9rem;
  border-radius: 5px;
  height: 2rem;
  box-sizing: content-box;
  font-family: var(--font-family-standard);
  text-align: left;
  text-decoration: none;
  overflow: hidden;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
  /*background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="6 9 12 15 18 9"%3E%3C/polyline%3E%3C/svg%3E') !important;
  background-size: 1.3rem !important;
  background-repeat: no-repeat !important;
  background-position: right 0.25rem center !important;

  &.zxDropdown__open {
      background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="matrix(1,0,0,-1,0,0)"%3E%3Cpolyline points="6 9 12 15 18 9"%3E%3C/polyline%3E%3C/svg%3E') !important;
  }

  &::selection {
      background: transparent;
  }

  &::-moz-selection {
      background: transparent;
  }
       */
}
.zxDropdown__field:not(:disabled):hover, .zxDropdown__field:not(:disabled):focus {
  filter: brightness(102%);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.7);
  outline: none;
}
.zxDropdown__field.is-invalid {
  box-shadow: inset 0 -2px 0 var(--color-error);
  background: var(--color-error-background) !important;
}
.zxDropdown__field.zXRequired {
  background-color: #ffffcc;
  filter: hue-rotate(0deg) saturate(0.45) brightness(0.94);
}
.zxDropdown__field.zXRequired:not(:disabled):hover, .zxDropdown__field.zXRequired:not(:disabled):focus {
  filter: hue-rotate(0deg) saturate(0.45) brightness(0.98);
}
.zxDropdown__field:disabled {
  color: rgba(0, 0, 0, 0.5);
}
.zxDropdown__field-text {
  align-items: center;
  -moz-column-gap: 0;
  column-gap: 0;
  display: flex;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zxDropdown__field-icon {
  background-color: currentColor;
  width: 1.4rem;
  height: 1.4rem;
  display: inline-block;
  flex-shrink: 0;
  padding: 0.6rem 0 0;
}
.zxDropdown__field-icon.caret-icon {
  --caret-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"/%3E%3C/svg%3E');
  -webkit-mask: var(--caret-icon-svg) no-repeat;
  mask: var(--caret-icon-svg) no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.zxDropdown__field-icon.caret-icon.open {
  transform: scaleY(-1);
}
.zxDropdown__option_list {
  overflow-y: auto;
  max-height: 16rem;
}

.zxDropdown__option {
  padding: 0.25rem 0.75rem 0.5rem;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  font-size: 0.9rem;
  height: 1.25rem;
  flex-direction: row;
}
.zxDropdown__option:hover {
  background-color: rgba(0, 0, 0, 0.09);
}
.zxDropdown__option:last-of-type {
  padding-bottom: 0.75rem;
}
.zxDropdown__option-text {
  vertical-align: middle;
  display: inline-block;
  flex: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zxDropdown__option-item:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.03);
}
.zxDropdown__option-item:nth-child(odd) {
  background-color: var(--color-background);
}
.zxDropdown__option-item.zxOption-focused {
  background-color: rgba(0, 0, 0, 0.09);
}
.zxDropdown__option-check {
  display: inline-block;
  cursor: pointer;
  margin-right: 0.2rem;
  vertical-align: middle;
  flex-shrink: 0;
}
.zxDropdown__option-check.hasFocus {
  color: var(--color-background);
  background-color: var(--color-background);
  border-color: var(--color-border);
  border-radius: 3px;
  outline: 0;
}
.zxDropdown__option-check:focus {
  filter: brightness(102%);
  outline: none;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.7);
}
.zxDropdown__option-check:hover::before {
  filter: brightness(102%);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.7);
}
.zxDropdown__option-check::before {
  content: "";
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  border: 1px solid var(--color-header-border);
  background: rgb(var(--color-input-background));
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  color: black;
  transition: all 0.15s ease;
  font-size: 0.9rem;
  border-radius: 5px;
  vertical-align: sub;
}
.zxDropdown__option-check::after {
  display: block;
  font-size: 0.9rem;
  color: rgb(0, 0, 0);
  transform: translate(1px, 1px);
  margin-left: 0.2rem;
  margin-top: -1.4rem;
  font-weight: 600;
}
.zxDropdown__option.zxDropdown__option-selected .zxDropdown__option-check::after {
  font-family: "Font Awesome 6 Pro";
  content: "\f00c";
}
.zxDropdown__option.zxDropdown__option-selected-indeterminate .zxDropdown__option-check::after {
  font-family: "Font Awesome 6 Pro";
  content: "\f068";
}
.zxDropdown__option-select-all {
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.zxDropdown__option-select-all.zxOption-focused {
  background-color: rgba(0, 0, 0, 0.09);
}
.zxDropdown__option-no-results {
  display: none;
}

/* General dropdowns */
.zxDropdownContent {
  display: none;
  position: absolute;
  font-size: 1.1rem;
  color: var(--color-input-text);
  box-sizing: border-box;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  border-top: 0px;
  min-width: 15rem;
  border-collapse: collapse;
  border-radius: 0px 0px 5px 5px;
  background-color: var(--color-background);
  overflow: hidden;
  z-index: 12;
}

/* FK Search */
.zXFKOptions {
  display: none;
  position: absolute;
  font-size: 1.1rem;
  color: var(--color-input-text);
  box-sizing: border-box;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  border-top: 0px;
  min-width: 15rem;
  border-collapse: collapse;
  border-radius: 0px 0px 10px 10px;
  background-color: var(--color-background);
  overflow: auto;
  z-index: 12;
}

.zXFKOption {
  padding: 0.5rem 0.75rem 0.5rem;
  border-collapse: collapse;
  cursor: pointer;
}
.zXFKOption.zXFKSuggestOption::after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 4px;
  height: 98%;
  content: "";
  filter: saturate(1);
  border-radius: 1px 0px 0px 1px;
  background: #A1E8CD;
}

.zXFKOptionSelected {
  background-color: var(--color-secondary-light) !important;
}

.zXFKOptionMoreRecords {
  width: 100%;
  text-align: center;
  display: block;
}

.zXFKLoading {
  cursor: wait;
}

.zXSearchOperators {
  width: 150px !important;
  margin-right: 25px;
}

.zXSearchOrderBySection {
  display: block;
}

.zXSearchOrderBy {
  display: block;
}

select.zXFormInput,
input[type=text].zXFormInput,
input[type=email].zXFormInput,
input[type=number].zXFormInput,
input[type=date].zXFormInput,
input[type=time].zXFormInput,
input[type=datetime-local].zXFormInput,
input[type=password].zXFormInput,
textarea.zXFormInput {
  appearance: none;
  border: 0;
  background: rgb(var(--color-input-background));
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  color: black;
  transition: all 0.15s ease;
  padding: 0 4px;
  font-size: 0.9rem;
  border-radius: 5px;
  height: 2rem;
  box-sizing: content-box;
  font-family: var(--font-family-standard);
}
select.zXFormInput:not(:disabled):hover, select.zXFormInput:not(:disabled):focus,
input[type=text].zXFormInput:not(:disabled):hover,
input[type=text].zXFormInput:not(:disabled):focus,
input[type=email].zXFormInput:not(:disabled):hover,
input[type=email].zXFormInput:not(:disabled):focus,
input[type=number].zXFormInput:not(:disabled):hover,
input[type=number].zXFormInput:not(:disabled):focus,
input[type=date].zXFormInput:not(:disabled):hover,
input[type=date].zXFormInput:not(:disabled):focus,
input[type=time].zXFormInput:not(:disabled):hover,
input[type=time].zXFormInput:not(:disabled):focus,
input[type=datetime-local].zXFormInput:not(:disabled):hover,
input[type=datetime-local].zXFormInput:not(:disabled):focus,
input[type=password].zXFormInput:not(:disabled):hover,
input[type=password].zXFormInput:not(:disabled):focus,
textarea.zXFormInput:not(:disabled):hover,
textarea.zXFormInput:not(:disabled):focus {
  filter: brightness(102%);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.7);
  outline: none;
}
select.zXFormInput.is-invalid,
input[type=text].zXFormInput.is-invalid,
input[type=email].zXFormInput.is-invalid,
input[type=number].zXFormInput.is-invalid,
input[type=date].zXFormInput.is-invalid,
input[type=time].zXFormInput.is-invalid,
input[type=datetime-local].zXFormInput.is-invalid,
input[type=password].zXFormInput.is-invalid,
textarea.zXFormInput.is-invalid {
  box-shadow: inset 0 -2px 0 var(--color-error);
  background: var(--color-error-background) !important;
}
select.zXFormInput.zXRequired,
input[type=text].zXFormInput.zXRequired,
input[type=email].zXFormInput.zXRequired,
input[type=number].zXFormInput.zXRequired,
input[type=date].zXFormInput.zXRequired,
input[type=time].zXFormInput.zXRequired,
input[type=datetime-local].zXFormInput.zXRequired,
input[type=password].zXFormInput.zXRequired,
textarea.zXFormInput.zXRequired {
  background-color: #ffffcc;
  filter: hue-rotate(0deg) saturate(0.45) brightness(0.94);
}
select.zXFormInput.zXRequired:not(:disabled):hover, select.zXFormInput.zXRequired:not(:disabled):focus,
input[type=text].zXFormInput.zXRequired:not(:disabled):hover,
input[type=text].zXFormInput.zXRequired:not(:disabled):focus,
input[type=email].zXFormInput.zXRequired:not(:disabled):hover,
input[type=email].zXFormInput.zXRequired:not(:disabled):focus,
input[type=number].zXFormInput.zXRequired:not(:disabled):hover,
input[type=number].zXFormInput.zXRequired:not(:disabled):focus,
input[type=date].zXFormInput.zXRequired:not(:disabled):hover,
input[type=date].zXFormInput.zXRequired:not(:disabled):focus,
input[type=time].zXFormInput.zXRequired:not(:disabled):hover,
input[type=time].zXFormInput.zXRequired:not(:disabled):focus,
input[type=datetime-local].zXFormInput.zXRequired:not(:disabled):hover,
input[type=datetime-local].zXFormInput.zXRequired:not(:disabled):focus,
input[type=password].zXFormInput.zXRequired:not(:disabled):hover,
input[type=password].zXFormInput.zXRequired:not(:disabled):focus,
textarea.zXFormInput.zXRequired:not(:disabled):hover,
textarea.zXFormInput.zXRequired:not(:disabled):focus {
  filter: hue-rotate(0deg) saturate(0.45) brightness(0.98);
}
select.zXFormInput:disabled,
input[type=text].zXFormInput:disabled,
input[type=email].zXFormInput:disabled,
input[type=number].zXFormInput:disabled,
input[type=date].zXFormInput:disabled,
input[type=time].zXFormInput:disabled,
input[type=datetime-local].zXFormInput:disabled,
input[type=password].zXFormInput:disabled,
textarea.zXFormInput:disabled {
  color: rgba(0, 0, 0, 0.5);
}
select.zXInlineButton, select.zXFormFKInput, select.zXFileUpload,
input[type=text].zXInlineButton,
input[type=text].zXFormFKInput,
input[type=text].zXFileUpload,
input[type=email].zXInlineButton,
input[type=email].zXFormFKInput,
input[type=email].zXFileUpload,
input[type=number].zXInlineButton,
input[type=number].zXFormFKInput,
input[type=number].zXFileUpload,
input[type=date].zXInlineButton,
input[type=date].zXFormFKInput,
input[type=date].zXFileUpload,
input[type=time].zXInlineButton,
input[type=time].zXFormFKInput,
input[type=time].zXFileUpload,
input[type=datetime-local].zXInlineButton,
input[type=datetime-local].zXFormFKInput,
input[type=datetime-local].zXFileUpload,
input[type=password].zXInlineButton,
input[type=password].zXFormFKInput,
input[type=password].zXFileUpload,
textarea.zXInlineButton,
textarea.zXFormFKInput,
textarea.zXFileUpload {
  border-radius: 5px 0px 0px 5px;
}

.zXFormInputNumeric {
  text-align: right;
}
.zXFormInputNumeric__buttons {
  border-radius: 5px 0px 0px 5px !important;
}
.zXFormInputNumeric__button-holder {
  display: inline-flex;
  flex-direction: column;
  padding: 0rem 0.5rem;
  text-align: center;
  appearance: none;
  box-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0px inset;
  color: black;
  border-width: 0px;
  border-style: initial;
  border-color: initial;
  background: rgb(var(--color-button-background));
  transition: all 0.15s ease 0s;
  border-image: linear-gradient(transparent 20%, rgba(0, 0, 0, 0.3) 20% 80%, transparent 20%) 0 0 0 10/1px;
  width: 1rem;
  height: 2rem;
  border-radius: 0px 5px 5px 0px;
}
.zXFormInputNumeric__button-holder:hover {
  filter: brightness(102%);
}
.zXFormInputNumeric__button {
  font-size: 0.8rem;
  line-height: 1rem;
  color: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.zXFormInputNumeric__button:hover {
  color: black;
}
.zXFormInputNumeric__button-up::before {
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  content: "\f0d8";
  line-height: 1rem;
  margin-top: 0.2rem;
  display: block;
}
.zXFormInputNumeric__button-down::before {
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  content: "\f0d7";
  line-height: 1rem;
  margin-top: -0.4rem;
  display: block;
}

textarea.zXFormInput {
  height: unset;
}
textarea.zXFormExpressionInput {
  min-height: 100%;
  border-radius: 5px 0px 0px 5px;
  font-family: monospace;
}

.zXFormSelectInput {
  /*
  &:focus-within::before {
      transform: rotateX(0.5turn) translateY(-12px);
  }
  */
  appearance: none;
  position: relative;
}
.zXFormSelectInput::after {
  content: "\f078";
  width: 0.8em;
  height: 0.45em;
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  translate: -200% 50%;
  position: absolute;
  pointer-events: none;
}

.zXFormInput.zXFormInputSize1 {
  width: calc(150px * 0.25 + 0px);
}
.zXFormInput.zXFormInputSize1.zXFormFKInput {
  width: calc(150px * 0.25 - 2rem * 2 + 0px);
}
.zXFormInput.zXFormInputSize1.zXFileUpload {
  width: calc(150px * 0.25 - 2rem * 3 + 0px);
}
.zXFormInput.zXFormInputSize1.zXFormInputNumeric__buttons {
  width: calc(150px * 0.25 - 2rem * 1 + 0px);
}
.zXFormInput.zXFormInputSize2 {
  width: calc(150px * 0.5 + 0px);
}
.zXFormInput.zXFormInputSize2.zXFormFKInput {
  width: calc(150px * 0.5 - 2rem * 2 + 0px);
}
.zXFormInput.zXFormInputSize2.zXFileUpload {
  width: calc(150px * 0.5 - 2rem * 3 + 0px);
}
.zXFormInput.zXFormInputSize2.zXFormInputNumeric__buttons {
  width: calc(150px * 0.5 - 2rem * 1 + 0px);
}
.zXFormInput.zXFormInputSize2_5 {
  width: calc(150px * 0.75 + 0px);
}
.zXFormInput.zXFormInputSize2_5.zXFormFKInput {
  width: calc(150px * 0.75 - 2rem * 2 + 0px);
}
.zXFormInput.zXFormInputSize2_5.zXFileUpload {
  width: calc(150px * 0.75 - 2rem * 3 + 0px);
}
.zXFormInput.zXFormInputSize2_5.zXFormInputNumeric__buttons {
  width: calc(150px * 0.75 - 2rem * 1 + 0px);
}
.zXFormInput.zXFormInputSize3 {
  width: calc(150px * 1 + 0px);
}
.zXFormInput.zXFormInputSize3.zXFormFKInput {
  width: calc(150px * 1 - 2rem * 2 + 0px);
}
.zXFormInput.zXFormInputSize3.zXFileUpload {
  width: calc(150px * 1 - 2rem * 3 + 0px);
}
.zXFormInput.zXFormInputSize3.zXFormInputNumeric__buttons {
  width: calc(150px * 1 - 2rem * 1 + 0px);
}
.zXFormInput.zXFormInputSize4 {
  width: calc(150px * 2 + 15px);
}
.zXFormInput.zXFormInputSize4.zXFormFKInput {
  width: calc(150px * 2 - 2rem * 2 + 15px);
}
.zXFormInput.zXFormInputSize4.zXFileUpload {
  width: calc(150px * 2 - 2rem * 3 + 15px);
}
.zXFormInput.zXFormInputSize4.zXFormInputNumeric__buttons {
  width: calc(150px * 2 - 2rem * 1 + 15px);
}
.zXFormInput.zXFormInputSize5 {
  width: calc(150px * 3 + 30px);
}
.zXFormInput.zXFormInputSize5.zXFormFKInput {
  width: calc(150px * 3 - 2rem * 2 + 30px);
}
.zXFormInput.zXFormInputSize5.zXFileUpload {
  width: calc(150px * 3 - 2rem * 3 + 30px);
}
.zXFormInput.zXFormInputSize5.zXFormInputNumeric__buttons {
  width: calc(150px * 3 - 2rem * 1 + 30px);
}
.zXFormInput.zXFormInputSize6 {
  width: calc(150px * 4 + 45px);
}
.zXFormInput.zXFormInputSize6.zXFormFKInput {
  width: calc(150px * 4 - 2rem * 2 + 45px);
}
.zXFormInput.zXFormInputSize6.zXFileUpload {
  width: calc(150px * 4 - 2rem * 3 + 45px);
}
.zXFormInput.zXFormInputSize6.zXFormInputNumeric__buttons {
  width: calc(150px * 4 - 2rem * 1 + 45px);
}
.zXFormInput.zXFormInputSize7 {
  width: calc(150px * 5 + 60px);
}
.zXFormInput.zXFormInputSize7.zXFormFKInput {
  width: calc(150px * 5 - 2rem * 2 + 60px);
}
.zXFormInput.zXFormInputSize7.zXFileUpload {
  width: calc(150px * 5 - 2rem * 3 + 60px);
}
.zXFormInput.zXFormInputSize7.zXFormInputNumeric__buttons {
  width: calc(150px * 5 - 2rem * 1 + 60px);
}

.zxDownloadLink::before {
  content: "\f019";
  font-family: "Font Awesome 6 Pro";
  padding: 0 0.5rem 0rem 0rem;
  font-size: 1rem;
}

.zXFormLockedInput {
  font-size: 0.9rem;
  color: var(--color-text-lighter);
  padding: 0 0.2rem;
  white-space: break-spaces;
}
.zXFormLockedInput .zXFormLockedInput__value {
  line-height: 2rem;
}

.zXFileUpload {
  display: none;
}
.zXFileUpload.zXFormInput {
  display: block;
}
.zXFileUpload.zXFileSet, .zXFileUpload.zXFileLine {
  display: inherit;
}
.zXFileUpload.zXFileSet {
  flex-direction: column;
}
.zXFileUpload.zXFileLine {
  margin-bottom: 3px;
  position: relative;
}
.zXFileUpload.zXFileLine.zXTemp .zXInlineInputButton {
  box-shadow: inset 0 -2px 0 rgba(255, 156, 7, 0.5);
}
.zXFileUpload.zXFileLine.zXTemp .zXInlineInputButton:hover {
  box-shadow: inset 0 -2px 0 rgb(255, 156, 7);
}
.zXFileUpload.zXFileLine.zXTemp .zXFormInput {
  box-shadow: inset 0 -2px 0 rgba(255, 156, 7, 0.5);
}
.zXFileUpload.zXFileLine .zXFormInput {
  display: block;
}
.zXFileUpload.zXFileLine .zXUploadProgress {
  width: 100%;
  appearance: none;
  border: 0;
  background: var(--color-input-button-background);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  color: black;
  transition: all 0.15s ease;
  font-size: 0.9rem;
  border-radius: 5px;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}
.zXFileUpload.zXFileLine .zXUploadProgress .zXUploadProgressBar {
  width: 1%;
  height: 5px;
  background-color: var(--color-primary-light);
  border-radius: 5px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.zXFileUpload.zXFileLine:last-of-type {
  margin-bottom: 0px;
}

.zXRequired {
  background-color: var(--color-input-mandatory);
}

.zXFormLabel {
  color: var(--color-text-lighter);
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0px;
  padding: 0.2rem;
}
.zXFormLabel.zXRequiredLabel::after {
  color: var(--color-error);
  content: " *";
  display: inline;
}

.zXFormExpressionButtons {
  align-self: baseline;
  display: grid;
}
.zXFormExpressionButtons .zXInlineInputButton {
  width: unset;
  height: unset;
}

.zXCheckBox {
  padding-left: 0rem;
  height: 1.5rem;
  margin-top: auto;
  font-size: 0.9rem;
  display: flex;
  align-items: end;
}
.zXCheckBox label {
  display: block;
  cursor: pointer;
  height: 1.5rem;
}
.zXCheckBox label.hasFocus {
  color: var(--color-background);
  background-color: var(--color-background);
  border-color: var(--color-border);
  border-radius: 3px;
  outline: 0;
}
.zXCheckBox label:focus {
  filter: brightness(102%);
  outline: none;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.7);
}
.zXCheckBox label:hover::before {
  filter: brightness(102%);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.7);
}
.zXCheckBox label::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  background: rgb(var(--color-input-background));
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  color: black;
  transition: all 0.15s ease;
  font-size: 0.9rem;
  border-radius: 5px;
  vertical-align: sub;
}
.zXCheckBox label::after {
  display: block;
  font-size: 0.9rem;
  color: rgb(0, 0, 0);
  margin-left: 0.3rem;
  margin-top: -1.4rem;
  transform: translate(1px, 1px);
}
.zXCheckBox input[type=checkbox] {
  opacity: 0;
  cursor: pointer;
  position: absolute;
  margin-top: 0.3rem;
  margin-left: -1.25rem;
  width: 0px !important;
}
.zXCheckBox input[type=checkbox]:focus + label::before {
  filter: brightness(102%);
  outline: none;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.7);
}
.zXCheckBox input[type=checkbox]:checked + label::after {
  font-family: "Font Awesome 6 Pro";
  content: "\f00c";
}
.zXCheckBox input[type=checkbox]:indeterminate + label::after {
  font-family: "Font Awesome 6 Pro";
  content: "\f068";
}
.zXCheckBox input[type=checkbox]:disabled {
  cursor: not-allowed;
}
.zXCheckBox input[type=checkbox]:disabled + label {
  cursor: not-allowed;
}
.zXCheckBox input[type=checkbox]:disabled + label::after, .zXCheckBox input[type=checkbox]:disabled + label::before {
  cursor: not-allowed;
  opacity: 0.5;
}
.zXCheckBox.checkbox-circle label::before {
  border-radius: 50%;
}
.zXCheckBox.checkbox-inline {
  margin-top: 0;
}

.checkListSelect .zXCheckBox, .checkListCheck .zXCheckBox, .zXMatrixCheckCell .zXCheckBox, .zXMatrixHeaderCheck .zXCheckBox {
  height: 1.2rem;
  position: relative;
  display: block;
}
.checkListSelect .zXCheckBox label, .checkListCheck .zXCheckBox label, .zXMatrixCheckCell .zXCheckBox label, .zXMatrixHeaderCheck .zXCheckBox label {
  display: block;
}
.checkListSelect .zXCheckBox label::before, .checkListCheck .zXCheckBox label::before, .zXMatrixCheckCell .zXCheckBox label::before, .zXMatrixHeaderCheck .zXCheckBox label::before {
  width: 1.2rem;
  height: 1.2rem;
  border: 1px solid var(--color-header-border);
}
.checkListSelect .zXCheckBox label::after, .checkListCheck .zXCheckBox label::after, .zXMatrixCheckCell .zXCheckBox label::after, .zXMatrixHeaderCheck .zXCheckBox label::after {
  margin-left: 0.2rem;
  margin-top: -1.3rem;
  font-weight: 600;
}
.checkListSelect .zXCheckBox label:focus, .checkListCheck .zXCheckBox label:focus, .zXMatrixCheckCell .zXCheckBox label:focus, .zXMatrixHeaderCheck .zXCheckBox label:focus {
  filter: brightness(102%);
  outline: none;
}
.checkListSelect .zXCheckBox label:hover::before, .checkListCheck .zXCheckBox label:hover::before, .zXMatrixCheckCell .zXCheckBox label:hover::before, .zXMatrixHeaderCheck .zXCheckBox label:hover::before {
  filter: brightness(102%);
}

.zXRadioButtonContainer {
  margin-top: auto;
}
.zXRadioButtonContainer.vertical {
  display: flex;
  flex-direction: column;
}
.zXRadioButtonContainer.vertical .zXRadioButton {
  height: 2rem;
  margin-bottom: 0.5rem;
}
.zXRadioButtonContainer.horizontal {
  display: flex;
  flex-direction: row;
}
.zXRadioButtonContainer.horizontal .zXRadioButton {
  margin-right: 1.4rem;
}
.zXRadioButtonContainer .zXRadioButton {
  padding-left: 0rem;
  height: 2rem;
  display: block;
  font-size: 0.9rem;
  display: flex;
  align-items: end;
}
.zXRadioButtonContainer .zXRadioButton label {
  display: inline-block;
  cursor: pointer;
  white-space: nowrap;
  height: 1.5rem;
}
.zXRadioButtonContainer .zXRadioButton label:focus {
  filter: brightness(102%);
  outline: none;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.7);
}
.zXRadioButtonContainer .zXRadioButton label:hover::before {
  filter: brightness(102%);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.7);
}
.zXRadioButtonContainer .zXRadioButton label::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  background: rgb(var(--color-input-background));
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.15s ease;
  border-radius: 50%;
  vertical-align: sub;
  margin-right: 4px;
}
.zXRadioButtonContainer .zXRadioButton label::after {
  display: block;
  content: " ";
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background-color: #5a5a5a;
  transform: scale(0, 0);
}
.zXRadioButtonContainer .zXRadioButton input[type=radio] {
  opacity: 0;
  cursor: pointer;
  position: absolute;
  margin-top: 0.3rem;
  margin-left: -1.25rem;
  width: 0px !important;
  display: none;
}
.zXRadioButtonContainer .zXRadioButton input[type=radio]:focus + label::before {
  filter: brightness(102%);
  outline: none;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.7);
}
.zXRadioButtonContainer .zXRadioButton input[type=radio]:checked + label::after {
  transform: translate(50%, -160%) scale(1, 1);
}
.zXRadioButtonContainer .zXRadioButton input[type=radio]:disabled {
  cursor: not-allowed;
}
.zXRadioButtonContainer .zXRadioButton input[type=radio]:disabled + label {
  cursor: not-allowed;
}
.zXRadioButtonContainer .zXRadioButton input[type=radio]:disabled + label::after, .zXRadioButtonContainer .zXRadioButton input[type=radio]:disabled + label::before {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Alert box classes */
.zXAlert {
  position: relative;
  padding: 0.5rem 0.5rem;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  width: 70%;
}

.zXAlertMessage {
  color: var(--color-warning);
  background-color: var(--color-background);
  border-color: var(--color-warning);
}

.zXErrorMessage {
  color: var(--color-error);
  font-weight: 450;
  background-color: var(--color-background);
  border-color: var(--color-error);
}

.zXInfoMessage {
  color: var(--color-ok);
  font-weight: 450;
  background-color: var(--color-background);
  border-color: var(--color-ok);
}

.zXNarrative {
  color: var(--color-secondary);
  font-weight: 450;
  background-color: var(--color-background);
  border-color: var(--color-secondary);
}

.zXIgnoreWarning {
  color: var(--color-secondary);
  font-weight: 450;
  background-color: var(--color-background);
  border-color: var(--color-secondary);
  display: flex;
  padding-top: 1rem;
}
.zXIgnoreWarning .zXCheckBox {
  height: 1.5rem;
}
.zXIgnoreWarning .zXIgnoreLabel {
  padding-top: 0.1rem;
  padding-left: 0.5rem;
}

/* Matrix related classes */
.zXMatrixTable .zXMatrixRowHeader {
  background-color: var(--color-header-background);
  color: var(--color-text);
  box-sizing: border-box;
  padding: 0.2rem 0.5rem;
  font-weight: 600;
  border-bottom: solid 1px var(--color-header-border);
  font-size: 0.9rem;
}
.zXMatrixTable .zXMatrixRowHeader.zXMatrixRowHeaderLast {
  border-right: solid 1px var(--color-header-border);
}
.zXMatrixTable .zXMatrixRowLabel {
  color: var(--color-text);
  box-sizing: border-box;
  padding: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: left;
}
.zXMatrixTable .zxMatrixColumnLabel {
  color: var(--color-text);
  box-sizing: border-box;
  padding: 0.5rem;
  font-weight: 400;
  font-size: 0.9rem;
  text-align: left;
}
.zXMatrixTable .zXMatrixCell.zXMatrixCellInvalid select.zXFormInput,
.zXMatrixTable .zXMatrixCell.zXMatrixCellInvalid input[type=text].zXFormInput,
.zXMatrixTable .zXMatrixCell.zXMatrixCellInvalid input[type=email].zXFormInput,
.zXMatrixTable .zXMatrixCell.zXMatrixCellInvalid input[type=number].zXFormInput,
.zXMatrixTable .zXMatrixCell.zXMatrixCellInvalid input[type=date].zXFormInput,
.zXMatrixTable .zXMatrixCell.zXMatrixCellInvalid input[type=time].zXFormInput,
.zXMatrixTable .zXMatrixCell.zXMatrixCellInvalid input[type=datetime-local].zXFormInput,
.zXMatrixTable .zXMatrixCell.zXMatrixCellInvalid input[type=password].zXFormInput,
.zXMatrixTable .zXMatrixCell.zXMatrixCellInvalid textarea.zXFormInput {
  box-shadow: inset 0 -2px 0 var(--color-error);
}
.zXMatrixTable .zXMatrixCell.zXMatrixHiddenCell {
  display: none;
  width: 0px;
}
.zXMatrixTable .zXMatrixCell.zxMatrixEven {
  background-color: rgba(0, 0, 0, 0.04);
}
.zXMatrixTable .zXMatrixCheckCell .zXCheckBox, .zXMatrixTable .zXMatrixHeaderCheck .zXCheckBox {
  width: 1.2rem;
}
.zXMatrixTable .zXMatrixHeaderCheck {
  width: 1.8rem;
  padding-right: 0;
}
.zXMatrixTable .zxMatrixColumnLabelRow th {
  border-top: 0px;
  font-weight: 400;
}

/* Grid  related classes */
.zxGridColumnAction, .zxGridColumnLink {
  width: 86px;
  white-space: nowrap;
}

.zxGridButton {
  padding: 0.5rem;
  text-align: center;
  font-size: 0.7rem;
  cursor: pointer;
  appearance: none;
  box-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0px inset;
  color: rgba(0, 0, 0, 0.2);
  border-width: 0px;
  border-style: initial;
  border-color: initial;
  background: rgb(var(--color-button-background));
  transition: all 0.15s ease 0s;
  border-image: linear-gradient(transparent 20%, rgba(0, 0, 0, 0.3) 20% 80%, transparent 20%) 0 0 0 10/1px;
  width: 1rem;
  height: 1rem;
}
.zxGridButton:first-of-type {
  border-image: none;
  border-radius: 5px 0px 0px 5px;
}
.zxGridButton:last-of-type {
  border-radius: 0px 5px 5px 0px;
}
.zxGridButton:first-of-type:last-of-type {
  border-image: none;
  border-radius: 5px 5px 5px 5px;
}
.zxGridButton:focus {
  background: rgba(var(--color-button-background), 0.03);
  outline: none;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.7);
}
.zxGridButton:hover {
  color: black;
  filter: brightness(102%);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.7);
}
.zxGridButton.zxGridActionActive {
  color: black;
  filter: brightness(102%);
  outline: none;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.7);
}
.zxGridButton .zxGridButton__icon {
  text-align: center;
  width: 0.8rem;
}

.zXGridTableSections {
  display: flex;
  flex-wrap: wrap;
  justify-content: stretch;
}

.zXGridTableSection {
  flex-grow: 1;
}

.zxGridRow.zxGridRowActionActive .zXFormInput.zXRequired {
  background-image: linear-gradient(45deg, transparent, transparent 50%, red 50%, red 100%);
  background-position: top right;
  background-size: 0.5em 0.5em;
  background-repeat: no-repeat;
}
.zxGridRow.zxGridRowActionActive input[type=color] {
  padding: unset;
}
.zxGridRow.zxGridRowActionActive input[type=radio].zXRequired + label::before {
  background-image: linear-gradient(45deg, transparent, transparent 50%, red 50%, red 100%);
  background-position: top right;
  background-size: 0.5em 0.5em;
  background-repeat: no-repeat;
}
.zxGridRow::after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 4px;
  height: 98%;
  content: "";
  transform: translate(-100%, 1%);
  border-radius: 5px 0px 0px 5px;
  filter: saturate(1);
}
.zxGridRow::after {
  background: #A1E8CD;
}
.zxGridRow.zxGridRowNew::after {
  background: rgb(228, 232, 236);
}
.zxGridRow.zxGridRowNew.zxGridRowEdit::after {
  background: rgb(108, 122, 137);
}
.zxGridRow.zxGridRowEdit::after {
  background: #16C784;
}
.zxGridRow.zxGridRowRemove::after {
  background: #EA3943;
}
.zxGridRow.zxGridRowInvalid {
  box-shadow: inset 0 0 0 9999px rgba(255, 185, 185, 0.5);
}
.zxGridRow.zxGridRowInvalid:nth-child(even):not(.zxListGrandTotalRow):not(.zxListRowOdd):not(.zxListRowEven):not(.zxListGroupRowOpen):not(.zxListGroupRowClose), .zxGridRow.zxGridRowInvalid.zxListRowEven {
  background-color: rgba(0, 0, 0, 0.1);
}
.zxGridRow.zxGridRowInvalid:hover:not(.zxListGrandTotalRow):not(.zxListRowOdd):not(.zxListRowEven):not(.zxListGroupRowOpen):not(.zxListGroupRowClose) {
  background-color: rgba(0, 0, 0, 0.17) !important;
}
.zxGridRow.zxGridRowInvalid .zXFormLockedInput {
  color: var(--color-text);
}
.zxGridRow input[type=date].zXFormInput {
  width: calc(150px * 0.55 + 0px);
}
.zxGridRow input[type=date].zXFormInput.zXFormFKInput {
  width: calc(150px * 0.55 - 2rem * 2 + 0px);
}
.zxGridRow input[type=date].zXFormInput.zXFileUpload {
  width: calc(150px * 0.55 - 2rem * 3 + 0px);
}
.zxGridRow input[type=date].zXFormInput.zXFormInputNumeric__buttons {
  width: calc(150px * 0.55 - 2rem * 1 + 0px);
}

.zXGridTableHiddenColumn {
  display: none;
  width: 0px;
}

.zXGridTablePagingContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: stretch;
  margin-bottom: 15px;
  font-size: 0.8rem;
  vertical-align: middle;
  width: 100%;
}

.zXGridTableRowCount {
  color: var(--color-text-lighter);
  padding: 8px 16px;
  width: 50%;
}

.zXGridTablePaging {
  display: flex;
  justify-content: flex-end;
  text-align: right;
  width: 40%;
}
.zXGridTablePaging span {
  color: var(--color-text-lighter);
  float: left;
  font-size: 1.2rem;
  padding: 3px 9px;
  text-decoration: none;
  font-weight: bold;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  margin-left: 5px;
}
.zXGridTablePaging span.current {
  color: var(--color-text-lighter);
  float: left;
  text-decoration: none;
  font-size: 0.8rem;
  padding: 9px 9px;
  font-weight: normal;
  border: none;
  margin-left: 5px;
}
.zXGridTablePaging span.current:hover {
  background-color: var(--color-background);
  color: var(--color-text);
  cursor: default;
}
.zXGridTablePaging span.inactive:hover {
  background-color: var(--color-text-light);
  color: var(--color-text);
  border-radius: 5px;
  cursor: default;
}
.zXGridTablePaging span:hover {
  background-color: var(--color-ok);
  color: var(--color-text-light);
  border-radius: 5px;
  cursor: pointer;
}

/* List table related classes */
.zXListTableSections {
  display: flex;
  flex-wrap: wrap;
  justify-content: stretch;
}

.zXListTableSection {
  flex-grow: 1;
}

.zXListTable, .zXGridTable, .zXMatrixTable {
  width: 100%;
  position: relative;
  border-collapse: separate;
  /* Don't collapse because of sticky th */
  margin-top: 0px;
  margin-bottom: 0px;
}
.zXListTable thead, .zXGridTable thead, .zXMatrixTable thead {
  font-size: 1rem;
  vertical-align: middle;
  text-align: left;
}
.zXListTable thead th, .zXGridTable thead th, .zXMatrixTable thead th {
  background-color: var(--color-header-background);
  color: var(--color-text);
  box-sizing: border-box;
  padding: 0.2rem 0.5rem;
  font-weight: 600;
  border-top: solid 1px var(--color-header-border);
  border-bottom: solid 1px var(--color-header-border);
  font-size: 0.9rem;
}
.zXListTable thead th .zxTableHead, .zXGridTable thead th .zxTableHead, .zXMatrixTable thead th .zxTableHead {
  display: flex;
}
.zXListTable thead th .zxTableHead .zxTableHeadSort, .zXGridTable thead th .zxTableHead .zxTableHeadSort, .zXMatrixTable thead th .zxTableHead .zxTableHeadSort {
  flex-grow: 0;
  flex-shrink: 0;
  margin-left: 0.5rem;
}
.zXListTable thead th .zxTableHead .zxTableHeadText, .zXGridTable thead th .zxTableHead .zxTableHeadText, .zXMatrixTable thead th .zxTableHead .zxTableHeadText {
  flex: auto;
}
.zXListTable thead th.checkListSelect, .zXGridTable thead th.checkListSelect, .zXMatrixTable thead th.checkListSelect {
  width: 25px;
}
.zXListTable thead th.checkListSelect.checkListSelectAll, .zXGridTable thead th.checkListSelect.checkListSelectAll, .zXMatrixTable thead th.checkListSelect.checkListSelectAll {
  cursor: pointer;
}
.zXListTable thead th.zXSortable, .zXGridTable thead th.zXSortable, .zXMatrixTable thead th.zXSortable {
  cursor: pointer;
}
.zXListTable thead th.zxListGroupHeader, .zXGridTable thead th.zxListGroupHeader, .zXMatrixTable thead th.zxListGroupHeader {
  width: 30px;
}
.zXListTable thead th.zxListHeaderLeftAlign, .zXGridTable thead th.zxListHeaderLeftAlign, .zXMatrixTable thead th.zxListHeaderLeftAlign {
  text-align: left;
}
.zXListTable thead th.zxListHeaderRightAlign, .zXGridTable thead th.zxListHeaderRightAlign, .zXMatrixTable thead th.zxListHeaderRightAlign {
  text-align: right;
}
.zXListTable thead th.zxListHeaderRightAlign .zXSortIcon, .zXGridTable thead th.zxListHeaderRightAlign .zXSortIcon, .zXMatrixTable thead th.zxListHeaderRightAlign .zXSortIcon {
  padding-left: 0.4rem;
}
.zXListTable thead th.zxListHeaderMergedTitle, .zXGridTable thead th.zxListHeaderMergedTitle, .zXMatrixTable thead th.zxListHeaderMergedTitle {
  border: 0;
  border-top: 1px solid var(--color-header-border);
  text-align: center;
}
.zXListTable thead th.zxListHeaderEmptyMergedTitle, .zXGridTable thead th.zxListHeaderEmptyMergedTitle, .zXMatrixTable thead th.zxListHeaderEmptyMergedTitle {
  border: 0;
}
.zXListTable thead th .zXSortIconPosition, .zXGridTable thead th .zXSortIconPosition, .zXMatrixTable thead th .zXSortIconPosition {
  color: var(--color-secondary-light);
}
.zXListTable thead th .zXSortIcon.On, .zXGridTable thead th .zXSortIcon.On, .zXMatrixTable thead th .zXSortIcon.On {
  color: var(--color-secondary);
}
.zXListTable thead th .zXSortIcon.Off, .zXGridTable thead th .zXSortIcon.Off, .zXMatrixTable thead th .zXSortIcon.Off {
  color: var(--color-secondary-light);
}
.zXListTable tbody tr, .zXGridTable tbody tr, .zXMatrixTable tbody tr {
  font-size: 0.9rem;
  vertical-align: baseline;
}
.zXListTable tbody tr:not(.zXListTable tbody tr.zxStickyContent, .zXGridTable tbody tr.zxStickyContent, .zXMatrixTable tbody tr.zxStickyContent), .zXGridTable tbody tr:not(.zXListTable tbody tr.zxStickyContent, .zXGridTable tbody tr.zxStickyContent, .zXMatrixTable tbody tr.zxStickyContent), .zXMatrixTable tbody tr:not(.zXListTable tbody tr.zxStickyContent, .zXGridTable tbody tr.zxStickyContent, .zXMatrixTable tbody tr.zxStickyContent) {
  position: relative;
}
.zXListTable tbody tr:nth-child(even):not(.zxListGrandTotalRow):not(.zxListRowOdd):not(.zxListGroupRowOpen):not(.zxListGroupRowClose), .zXListTable tbody tr.zxListRowEven, .zXGridTable tbody tr:nth-child(even):not(.zxListGrandTotalRow):not(.zxListRowOdd):not(.zxListGroupRowOpen):not(.zxListGroupRowClose), .zXGridTable tbody tr.zxListRowEven, .zXMatrixTable tbody tr:nth-child(even):not(.zxListGrandTotalRow):not(.zxListRowOdd):not(.zxListGroupRowOpen):not(.zxListGroupRowClose), .zXMatrixTable tbody tr.zxListRowEven {
  background-color: rgba(0, 0, 0, 0.03);
}
.zXListTable tbody tr:nth-child(even):not(.zxListGrandTotalRow):not(.zxListRowOdd):not(.zxListGroupRowOpen):not(.zxListGroupRowClose):hover:not(.zxListGrandTotalRow):not(.zxListRowOdd):not(.zxListGroupRowOpen):not(.zxListGroupRowClose), .zXListTable tbody tr.zxListRowEven:hover:not(.zxListGrandTotalRow):not(.zxListRowOdd):not(.zxListGroupRowOpen):not(.zxListGroupRowClose), .zXGridTable tbody tr:nth-child(even):not(.zxListGrandTotalRow):not(.zxListRowOdd):not(.zxListGroupRowOpen):not(.zxListGroupRowClose):hover:not(.zxListGrandTotalRow):not(.zxListRowOdd):not(.zxListGroupRowOpen):not(.zxListGroupRowClose), .zXGridTable tbody tr.zxListRowEven:hover:not(.zxListGrandTotalRow):not(.zxListRowOdd):not(.zxListGroupRowOpen):not(.zxListGroupRowClose), .zXMatrixTable tbody tr:nth-child(even):not(.zxListGrandTotalRow):not(.zxListRowOdd):not(.zxListGroupRowOpen):not(.zxListGroupRowClose):hover:not(.zxListGrandTotalRow):not(.zxListRowOdd):not(.zxListGroupRowOpen):not(.zxListGroupRowClose), .zXMatrixTable tbody tr.zxListRowEven:hover:not(.zxListGrandTotalRow):not(.zxListRowOdd):not(.zxListGroupRowOpen):not(.zxListGroupRowClose) {
  background-color: rgba(0, 0, 0, 0.09);
}
.zXListTable tbody tr:nth-child(odd):not(.zxListGrandTotalRow):not(.zxListRowEven):not(.zxListGroupRowOpen):not(.zxListGroupRowClose), .zXListTable tbody tr.zxListRowOdd, .zXGridTable tbody tr:nth-child(odd):not(.zxListGrandTotalRow):not(.zxListRowEven):not(.zxListGroupRowOpen):not(.zxListGroupRowClose), .zXGridTable tbody tr.zxListRowOdd, .zXMatrixTable tbody tr:nth-child(odd):not(.zxListGrandTotalRow):not(.zxListRowEven):not(.zxListGroupRowOpen):not(.zxListGroupRowClose), .zXMatrixTable tbody tr.zxListRowOdd {
  background-color: var(--color-background);
}
.zXListTable tbody tr:nth-child(odd):not(.zxListGrandTotalRow):not(.zxListRowEven):not(.zxListGroupRowOpen):not(.zxListGroupRowClose):hover:not(.zxListGrandTotalRow):not(.zxListRowEven):not(.zxListGroupRowOpen):not(.zxListGroupRowClose), .zXListTable tbody tr.zxListRowOdd:hover:not(.zxListGrandTotalRow):not(.zxListRowEven):not(.zxListGroupRowOpen):not(.zxListGroupRowClose), .zXGridTable tbody tr:nth-child(odd):not(.zxListGrandTotalRow):not(.zxListRowEven):not(.zxListGroupRowOpen):not(.zxListGroupRowClose):hover:not(.zxListGrandTotalRow):not(.zxListRowEven):not(.zxListGroupRowOpen):not(.zxListGroupRowClose), .zXGridTable tbody tr.zxListRowOdd:hover:not(.zxListGrandTotalRow):not(.zxListRowEven):not(.zxListGroupRowOpen):not(.zxListGroupRowClose), .zXMatrixTable tbody tr:nth-child(odd):not(.zxListGrandTotalRow):not(.zxListRowEven):not(.zxListGroupRowOpen):not(.zxListGroupRowClose):hover:not(.zxListGrandTotalRow):not(.zxListRowEven):not(.zxListGroupRowOpen):not(.zxListGroupRowClose), .zXMatrixTable tbody tr.zxListRowOdd:hover:not(.zxListGrandTotalRow):not(.zxListRowEven):not(.zxListGroupRowOpen):not(.zxListGroupRowClose) {
  background-color: rgba(0, 0, 0, 0.09);
}
.zXListTable tbody tr.clickable, .zXGridTable tbody tr.clickable, .zXMatrixTable tbody tr.clickable {
  cursor: pointer;
}
.zXListTable tbody tr td, .zXGridTable tbody tr td, .zXMatrixTable tbody tr td {
  box-sizing: border-box;
  padding: 0.5rem;
  vertical-align: baseline;
}
.zXListTable tbody tr td.leftAlign, .zXGridTable tbody tr td.leftAlign, .zXMatrixTable tbody tr td.leftAlign {
  text-align: left;
}
.zXListTable tbody tr td.rightAlign, .zXGridTable tbody tr td.rightAlign, .zXMatrixTable tbody tr td.rightAlign {
  text-align: right;
}
.zXListTable tbody tr.zxListGroupRowOpen, .zXListTable tbody tr.zxListGroupRowClose, .zXGridTable tbody tr.zxListGroupRowOpen, .zXGridTable tbody tr.zxListGroupRowClose, .zXMatrixTable tbody tr.zxListGroupRowOpen, .zXMatrixTable tbody tr.zxListGroupRowClose {
  color: var(--color-text);
  box-sizing: border-box;
  font-weight: 600;
  font-size: 0.9rem;
}
.zXListTable tbody tr.zxListGroupRowOpen td, .zXListTable tbody tr.zxListGroupRowClose td, .zXGridTable tbody tr.zxListGroupRowOpen td, .zXGridTable tbody tr.zxListGroupRowClose td, .zXMatrixTable tbody tr.zxListGroupRowOpen td, .zXMatrixTable tbody tr.zxListGroupRowClose td {
  padding: 0.2rem 0.5rem;
}
.zXListTable tbody tr.zxListGroupRowOpen, .zXGridTable tbody tr.zxListGroupRowOpen, .zXMatrixTable tbody tr.zxListGroupRowOpen {
  background: #f1f1f1;
}
.zXListTable tbody tr.zxListGroupRowOpen td, .zXGridTable tbody tr.zxListGroupRowOpen td, .zXMatrixTable tbody tr.zxListGroupRowOpen td {
  border-bottom: solid 1px var(--color-header-border);
}
.zXListTable tbody tr.zxListGroupRowOpen ~ .zxListGroupRowOpen td, .zXGridTable tbody tr.zxListGroupRowOpen ~ .zxListGroupRowOpen td, .zXMatrixTable tbody tr.zxListGroupRowOpen ~ .zxListGroupRowOpen td {
  border-top: solid 1px var(--color-header-border);
}
.zXListTable tbody tr.zxListGroupRowOpen ~ .zxListGroupRowOpen.zxStickyContentStuck td, .zXGridTable tbody tr.zxListGroupRowOpen ~ .zxListGroupRowOpen.zxStickyContentStuck td, .zXMatrixTable tbody tr.zxListGroupRowOpen ~ .zxListGroupRowOpen.zxStickyContentStuck td {
  border-top: 0px;
}
.zXListTable tbody tr.zxListGroupRowOpen + .zxListGroupRowOpen td, .zXGridTable tbody tr.zxListGroupRowOpen + .zxListGroupRowOpen td, .zXMatrixTable tbody tr.zxListGroupRowOpen + .zxListGroupRowOpen td {
  border-top: 0px;
}
.zXListTable tbody tr.zxListGroupRowClose, .zXGridTable tbody tr.zxListGroupRowClose, .zXMatrixTable tbody tr.zxListGroupRowClose {
  background: #f1f1f1;
}
.zXListTable tbody tr.zxListGroupRowClose td, .zXGridTable tbody tr.zxListGroupRowClose td, .zXMatrixTable tbody tr.zxListGroupRowClose td {
  border-top: solid 1px var(--color-header-border);
}
.zXListTable tbody tr.zxListGrandTotalRow, .zXGridTable tbody tr.zxListGrandTotalRow, .zXMatrixTable tbody tr.zxListGrandTotalRow {
  background-color: var(--color-background);
}
.zXListTable tbody tr.zxListGrandTotalRow td, .zXGridTable tbody tr.zxListGrandTotalRow td, .zXMatrixTable tbody tr.zxListGrandTotalRow td {
  border-top: 2px solid var(--color-text);
  font-weight: 600;
  color: var(--color-text);
  line-height: 2rem;
}
.zXListTable.zXListTableSmall td, .zXListTable.zXListTableSmall th, .zXGridTable.zXListTableSmall td, .zXGridTable.zXListTableSmall th, .zXMatrixTable.zXListTableSmall td, .zXMatrixTable.zXListTableSmall th {
  font-size: 0.75rem !important;
  padding: 0.25rem 0.45rem;
}
.zXListTable .zXListTableHeaderPrimary th, .zXGridTable .zXListTableHeaderPrimary th, .zXMatrixTable .zXListTableHeaderPrimary th {
  background-color: var(--color-primary-light) !important;
}
.zXListTable .zXListTableHeaderSecondary th, .zXGridTable .zXListTableHeaderSecondary th, .zXMatrixTable .zXListTableHeaderSecondary th {
  background-color: var(--color-secondary-light) !important;
}
.zXListTable.clickable tbody tr, .zXGridTable.clickable tbody tr, .zXMatrixTable.clickable tbody tr {
  cursor: pointer;
}

.zXListTablePagingContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: stretch;
  margin-bottom: 15px;
  font-size: 0.9rem;
  vertical-align: middle;
  width: 100%;
  margin-top: 5px;
  flex-direction: row;
}

.zXListTableRowCount {
  color: var(--color-text-lighter);
  padding: 0.5rem 0.3rem;
  flex-grow: 1;
}

.zXListTablePaging {
  display: flex;
  justify-content: flex-end;
  text-align: right;
  margin-right: 0.3rem;
}
.zXListTablePaging .zXListPagingInfo {
  appearance: none;
  border: 0;
  background: rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  color: black;
  transition: all 0.15s ease;
  padding: 10px;
  font-size: 0.9rem;
  min-width: 40px;
  text-align: center;
  user-select: none;
}
.zXListTablePaging .zXListPagingButton {
  padding: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.7rem;
  cursor: pointer;
  appearance: none;
  box-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0px inset;
  color: black;
  border-width: 0px;
  border-style: initial;
  border-color: initial;
  border-image: initial;
  background: rgba(0, 0, 0, 0.05);
  transition: all 0.15s ease 0s;
  width: 24px;
}
.zXListTablePaging .zXListPagingButton:first-child {
  border-radius: 5px 0px 0px 5px;
}
.zXListTablePaging .zXListPagingButton:last-child {
  border-radius: 0px 5px 5px 0px;
}
.zXListTablePaging .zXListPagingButton.zXPageNext {
  border-image: linear-gradient(transparent 20%, rgba(0, 0, 0, 0.3) 20% 80%, transparent 20%) 0 0 0 10/1px;
}
.zXListTablePaging .zXListPagingButton.zXPagePrev {
  border-image: linear-gradient(transparent 20%, rgba(0, 0, 0, 0.3) 20% 80%, transparent 20%) 0 10 0 0/1px;
}
.zXListTablePaging .zXListPagingButton:hover {
  background: rgba(0, 0, 0, 0.04);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.7);
}
.zXListTablePaging .zXListPagingButton.zXPageInActive {
  color: rgba(0, 0, 0, 0.2);
  cursor: initial;
  background: rgba(0, 0, 0, 0.04);
}
.zXListTablePaging .zXListPagingButton .zXPageIconNext {
  margin-left: -10px;
}
.zXListTablePaging .zXListPagingButton .zXPageIconNext::after {
  content: "\f105";
  font-family: "Font Awesome 6 Pro";
}
.zXListTablePaging .zXListPagingButton .zXPageIconNext:first-of-type {
  margin-left: 0px;
}
.zXListTablePaging .zXListPagingButton .zXPageIconNext.zXPageIconEnd {
  margin-left: -3px;
  transform: rotate(90deg);
}
.zXListTablePaging .zXListPagingButton .zXPageIconNext.zXPageIconEnd::after {
  content: "\f068";
  font-family: "Font Awesome 6 Pro";
}
.zXListTablePaging .zXListPagingButton .zXPageIconPrev {
  margin-left: -2px;
}
.zXListTablePaging .zXListPagingButton .zXPageIconPrev::after {
  content: "\f104";
  font-family: "Font Awesome 6 Pro";
}
.zXListTablePaging .zXListPagingButton .zXPageIconPrev:first-of-type {
  margin-left: 0px;
}
.zXListTablePaging .zXListPagingButton .zXPageIconPrev.zXPageIconEnd {
  margin-left: 0px;
  transform: rotate(90deg);
}
.zXListTablePaging .zXListPagingButton .zXPageIconPrev.zXPageIconEnd::after {
  content: "\f068";
  font-family: "Font Awesome 6 Pro";
}
.zXListTablePaging.zxGridRowInvalid .zXListPagingButton {
  color: rgba(0, 0, 0, 0.2);
  cursor: initial;
  background: rgba(0, 0, 0, 0.04);
}

/* Patience */
.zXPatienceOverlay {
  display: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background: #222;
  opacity: 0.8;
}

.zXPatienceOverlayInner {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.zXPatienceOverlaySpinnerHolder {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.zXPatienceOverlaySpinner {
  width: 100px;
  height: 100px;
  display: inline-block;
  border-width: 10px;
  border-color: rgba(255, 255, 255, 0.05);
  border-top-color: #fff;
  border-radius: 100%;
  border-style: solid;
  animation: zXSpin 1s infinite linear;
}

@keyframes zXSpin {
  100% {
    transform: rotate(360deg);
  }
}
/* Modal stuff */
.zXModal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  outline: 0;
  transition: opacity 0.15s linear;
}
.zXModal.show {
  opacity: 1;
  display: block;
}

.zXPatience {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.zXPatience .zXPatienceSpinner {
  width: 100px;
  height: 100px;
  display: inline-block;
  border-width: 10px;
  border-color: rgba(255, 255, 255, 0.05);
  border-top-color: #fff;
  border-radius: 100%;
  border-style: solid;
  animation: zXSpin 1s infinite linear;
}
.zXPatience .zXPatienceInfo {
  font-size: 3em;
  color: #fff;
}

@keyframes zXSpin {
  100% {
    transform: rotate(360deg);
  }
}
.zXModalDialog {
  width: 80%;
  max-width: 650px;
  background-color: #fff;
  border-radius: 0.3rem;
  position: absolute;
  left: 50vw;
  top: 15%;
  transform: translate(-50%, -50%);
}
.zXModalDialog.zXModalAlert {
  max-width: 400px;
}
.zXModalDialog.zXModalAlert .zXModalTitleIcon {
  font-size: 1.4rem;
  line-height: 1.5;
  margin-right: 0.5rem;
}
.zXModalDialog.zXModalAlert .zXModalBody {
  min-height: 40px;
}
.zXModalDialog.zXModalAlert .zXModalFooter {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.zXModalDialog.zXModalAlert.zXModalAlert-info .zXModalTitleIcon {
  color: var(--color-primary);
}
.zXModalDialog.zXModalAlert.zXModalAlert-info .zXButtonConfirm {
  border: solid 1px var(--color-primary);
  color: var(--color-primary);
}
.zXModalDialog.zXModalAlert.zXModalAlert-danger .zXModalTitleIcon {
  color: var(--color-error);
}
.zXModalDialog.zXModalAlert.zXModalAlert-danger .zXButtonConfirm {
  border: solid 1px var(--color-error);
  color: var(--color-error);
}
.zXModalDialog.zXModalAlert.zXModalAlert-warning .zXModalTitleIcon {
  color: var(--color-warning);
}
.zXModalDialog.zXModalAlert.zXModalAlert-warning .zXButtonConfirm {
  border: solid 1px var(--color-warning);
  color: var(--color-warning);
}
.zXModalDialog.zXModalAlert.zXModalAlert-success .zXModalTitleIcon {
  color: var(--color-ok);
}
.zXModalDialog.zXModalAlert.zXModalAlert-success .zXButtonConfirm {
  border: solid 1px var(--color-ok);
  color: var(--color-ok);
}

.zXModalUriDialog {
  width: 80%;
  left: 50vw;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}
.zXModalUriDialog.zXModalCustomUriDialog {
  width: unset;
  left: unset;
  top: unset;
  position: unset;
  transform: unset;
}
.zXModalUriDialog .zXModalUriBody {
  position: relative;
  height: 100%;
  padding: 0rem 0.5rem 0rem 0.5rem;
}
.zXModalUriDialog .zXModalUriBody #modalIFrame {
  width: 100%;
  height: 100%;
  overflow: scroll;
}
.zXModalUriDialog.zXFloatModal {
  position: relative;
  top: 15%;
  margin: unset;
  transform: unset;
}
.zXModalUriDialog.zXFloatModal .zXModalUriBody {
  padding: 0.1rem;
}

.zXModalContent {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  outline: 0;
  height: 100%;
}
.zXModalContent.zXModalContent__scrollable .zXModelCloseSingle {
  margin: 0.2rem 1rem -2rem auto;
}

.zXModalHeader {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.6rem;
  /*border-bottom: 1px solid #e9ecef; */
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}

.zXModalTitle {
  margin-bottom: 0;
  line-height: 1.5;
  font-size: 1.25rem;
}

.zXModalClose {
  text-transform: none;
  padding: 0.5rem 1rem;
  margin: -1rem -1rem -1rem auto;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.5;
  line-height: 1.5;
  z-index: 2000;
}
.zXModalClose:not(:disabled):not(.disabled) {
  cursor: pointer;
}
.zXModalClose:focus, .zXModalClose:hover {
  color: #000;
  text-decoration: none;
  opacity: 0.75;
}
.zXModalClose.zXModelCloseSingle {
  padding: 0rem 0.6rem;
  margin: 0.2rem 0rem -2rem auto;
}

.zXModalBody {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.5rem 1rem 1rem;
  min-height: 60px;
}

.zXModalFooter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 0.6rem 0.2rem;
  border-top: 1px solid #e9ecef;
}

.zXModalDialogButton {
  color: var(--color-text);
  background-color: #F3F3F3;
  font-size: 0.9rem;
  box-sizing: border-box;
  padding: 0.3rem 0.75rem;
  border: solid 1px var(--color-text);
  border-radius: 4px;
  cursor: pointer;
  margin-right: 5px;
  font-weight: 550;
  min-width: 120px;
}
.zXModalDialogButton:not(:disabled):not(.disabled) {
  cursor: pointer;
}
.zXModalDialogButton:not(:last-child) {
  margin-right: 0.25rem;
}
.zXModalDialogButton:hover {
  box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.5);
}
.zXModalDialogButton.zXButtonOk {
  border: solid 1px var(--color-ok);
  color: var(--color-ok);
}
.zXModalDialogButton.zXButtonCancel {
  border: solid 1px var(--color-error);
  color: var(--color-error);
}

.zXModalBackDrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
  opacity: 0;
  transition: opacity 0.15s linear;
}
.zXModalBackDrop.show {
  opacity: 0.5;
}

.zXModalDropdownContainer {
  z-index: 9999;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.zXModalDropdownMenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.zXModalDropdownMenu li {
  padding: 8px 12px;
  cursor: pointer;
}

.zXModalDropdownMenu li:hover {
  background-color: #f0f0f0;
}

.zXModalDropdownMenu a {
  text-decoration: none;
  color: #333;
}

.zXModalDropdownMenu a:hover {
  color: #555;
}

.zXToast {
  position: fixed;
  bottom: 10px;
  right: 0;
  --toast-color: #000;
  --toast-bg-color: #fff;
  --toast-border-color: rgba(0,0,0,.2);
}
.zXToast .zXToast__message {
  position: relative;
  width: 300px;
  min-height: 50px;
  margin-top: 10px;
  margin-right: 10px;
  font-size: 0.9rem;
  font-family: Roboto, Arial, sans-serif;
  line-height: 1.25;
  box-shadow: 1px 1px 4px gray;
  transition: all 0.3s ease;
  background-clip: padding-box;
  border: 1px solid var(--toast-border-color);
  border-radius: 0.3rem;
  outline: 0;
  background-color: var(--toast-bg-color);
  color: var(--toast-color);
}
.zXToast .zXToast__message .zXToast__message-content {
  display: flex !important;
}
.zXToast .zXToast__message .zXToast__message-content .zXToast__message-content-body {
  padding: 0.75rem;
  word-wrap: break-word;
}
.zXToast .zXToast__message .zXToast__message-content .zXToast__message-close {
  top: 0;
  position: absolute;
  right: 0;
}
.zXToast .zXToast__message .zXToast__message-header {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.4em;
  padding: 0.5rem 0.75rem;
  background-clip: padding-box;
  border-bottom: 1px solid var(--toast-border-color);
  border-top-left-radius: calc(0.5rem - 1px);
  border-top-right-radius: calc(0.5rem - 1px);
}
.zXToast .zXToast__message .zXToast__message-header .zXToast__message-header-text {
  margin-right: auto !important;
}
.zXToast .zXToast__message .zXToast__message-header .zXToast__message-close {
  padding: 0.5rem 1rem;
  margin: -1rem -1rem -1rem auto;
}
.zXToast .zXToast__message .zXToast__message-close {
  text-transform: none;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  float: right;
  font-size: 1.3rem;
  font-weight: 700;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.5;
  line-height: 1.5;
  color: var(--toast-color);
}
.zXToast .zXToast__message .zXToast__message-close:not(:disabled):not(.disabled) {
  cursor: pointer;
}
.zXToast .zXToast__message .zXToast__message-close:focus, .zXToast .zXToast__message .zXToast__message-close:hover {
  color: var(--toast-color);
  text-decoration: none;
  opacity: 0.75;
}
.zXToast .zXToast__message.zXToast__message-hidden {
  transform: translateX(50%);
  opacity: 0;
}
.zXToast .zXToast__message.zXToast__message-success {
  --toast-color: #0a3622;
  --toast-bg-color: #d1e7dd;
  --toast-border-color: #a3cfbb;
}
.zXToast .zXToast__message.zXToast__message-warning {
  --toast-color: #664d03;
  --toast-bg-color: #fff3cd;
  --toast-border-color: #ffe69c;
}
.zXToast .zXToast__message.zXToast__message-info {
  --toast-color: #055160;
  --toast-bg-color: #cff4fc;
  --toast-border-color: #9eeaf9;
}
.zXToast .zXToast__message.zXToast__message-danger {
  --toast-color: #58151c;
  --toast-bg-color: #f8d7da;
  --toast-border-color: #f1aeb5;
}

/* Modal dialog stuff */
.zXModalDialogBackground {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #222;
  opacity: 0.8;
  padding-top: 50px;
}

.zXModalDialogContent {
  background-color: #fefefe;
  margin: 5% auto 15% auto;
  border: 1px solid #888;
  width: 80%;
  max-width: 650px;
}

.zXModalDialogMessage {
  position: relative;
  padding-left: 15px;
  padding-right: 15px;
  top: -25px;
  font-size: 1.2rem;
  text-align: center;
  color: #292c33;
}

.zXModalDialogButtons {
  text-align: right;
}

.zXModalDialogButton_old {
  padding: 14px 20px;
  margin: 8px 5px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  opacity: 0.9;
}
.zXModalDialogButton_old.Ok {
  background-color: var(--color-ok);
  color: var(--color-background);
}
.zXModalDialogButton_old.Cancel {
  background-color: var(--color-error);
  color: var(--color-background);
}

/* Classes for hierarchical menu */
.zXMenu {
  font-family: var(--font-family-standard);
  max-width: 80%;
  border: 1px solid var(--color-secondary-light);
}
.zXMenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--color-background);
  --border: 1px solid var(--color-secondary-light);
}
.zXMenu ul li {
  --border-bottom: 1px solid #d2d2d2;
  padding: 10px 10px;
}
.zXMenu ul li:last-child {
  --border: 0;
}
.zXMenu ul li:hover {
  cursor: pointer;
}

.zXMenuTitle {
  font-size: 1.3rem;
  background-color: var(--color-primary-light);
  color: var(--color-light);
  font-weight: bolder;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: 10px;
  text-align: center;
}

.zXItem {
  border-bottom: 1px solid var(--color-secondary-light);
  font-weight: 300;
}
.zXItem:hover {
  cursor: pointer;
  background: var(--color-secondary-light);
}

.zXSubMenu {
  position: relative;
  padding-left: 35px !important;
  padding-top: 10px !important;
  padding-bottom: 5px !important;
  font-weight: 400;
}
.zXSubMenu ul {
  display: none;
  margin-top: 10px;
}
.zXSubMenu input[type=checkbox] {
  display: none;
}
.zXSubMenu input:checked ~ ul {
  display: block;
}
.zXSubMenu input:checked ~ label:after {
  transform: rotate(90deg);
}
.zXSubMenu label:after {
  content: "▷";
  position: absolute;
  color: var(--color-primary-light);
  top: -5px;
  left: 0;
  padding: 10px;
  text-align: center;
  font-size: 1.5rem;
  transition: all 0.5s;
}

/* Button classes */
.zXButton,
.zXButtonMnml,
.zXButtonBack {
  color: var(--color-button-color);
  background-color: rgb(var(--color-button-background));
  font-size: 0.9rem;
  box-sizing: border-box;
  border: solid 1px var(--color-text-lighter);
  border-radius: 4px;
  cursor: pointer;
  padding: 0.3rem 0.75rem;
  margin-right: 5px;
  margin-top: auto;
  font-weight: 550;
  min-width: 35px;
  text-align: left;
}
.zXButton:hover,
.zXButtonMnml:hover,
.zXButtonBack:hover {
  background-color: rgb(var(--color-button-background-hover));
}
.zXButton .zXButtonIcon,
.zXButtonMnml .zXButtonIcon,
.zXButtonBack .zXButtonIcon {
  margin-right: 0.5rem;
}
.zXButton.zXIconButton,
.zXButtonMnml.zXIconButton,
.zXButtonBack.zXIconButton {
  min-width: 30px;
}
.zXButton.zXIconButton .zXButtonIcon,
.zXButtonMnml.zXIconButton .zXButtonIcon,
.zXButtonBack.zXIconButton .zXButtonIcon {
  margin-right: 0rem;
}
.zXButton.zXPopupButton,
.zXButtonMnml.zXPopupButton,
.zXButtonBack.zXPopupButton {
  position: relative;
}

.zXDropDownToggle::after {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.5rem;
  vertical-align: 0.2rem;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}
.zXDropDownToggle.zXDropUp::after {
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-bottom: 0.3em solid;
  border-left: 0.3em solid transparent;
}
.zXDropDownToggle.zXDropUp .zXDropDownMenu {
  margin-top: 0;
  margin-bottom: 0.125rem;
}
.zXDropDownToggle .zXDropDownMenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  min-width: 10rem;
  padding: 0.2rem 0;
  margin: 0.125rem 0 0;
  text-align: left;
  display: none;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
}
.zXDropDownToggle .zXDropDownMenu.show {
  display: block;
}
.zXDropDownToggle .zXDropDownMenu .zXDropDownItem {
  color: var(--color-text);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.3rem 0.75rem;
  margin-bottom: 5px;
  margin-top: auto;
  font-weight: 400;
  min-width: 35px;
  text-align: left;
  display: block;
  white-space: nowrap;
}
.zXDropDownToggle .zXDropDownMenu .zXDropDownItem.open {
  background-color: #ebebeb;
}
.zXDropDownToggle .zXDropDownMenu .zXDropDownItem:hover {
  background-color: #F3F3F3;
  text-decoration: none;
}
.zXDropDownToggle .zXDropDownMenu .zXDropDownItem .zXDropDownItemIcon {
  margin-right: 0.5rem;
}
.zXDropDownToggle .zXDropDownMenu .zXDropDownItem.zXDropDownIconItem .zXDropDownItemIcon {
  margin-right: 0rem;
}

.zXDropdownSubmenu {
  position: relative;
}
.zXDropdownSubmenu .zXDropDownMenu {
  top: 0;
  left: 100%;
  margin-left: 0.1rem;
  margin-right: 0.1rem;
}
.zXDropdownSubmenu .zXDropDownToggle::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: 0.8em;
}
.zXDropdownSubmenu .zXDropDownToggle.zXDropStart::after {
  transform: rotate(-270deg);
  position: absolute;
  right: 6px;
  top: 0.8em;
}

.zXButtonBack {
  color: var(--color-button-back-color);
  background-color: var(--color-button-back-background);
}
.zXButtonBack:hover {
  background-color: var(--color-button-back-background-hover);
}

.zXButtonMnml {
  border: 0;
  background-color: unset;
  min-width: unset;
  color: var(--color-text-lighter);
}
.zXButtonMnml:hover {
  border: 0;
  background-color: var(--color-text-light);
  color: var(--color-text);
}

.zxRefButtons {
  width: 100%;
  clear: both;
}
.zxRefButtons:not(.zxRefButtonsEmpty) {
  display: inline-block;
}
.zxRefButtons:not(.zxRefButtonsEmpty).zxRefTopButtons {
  margin-bottom: 5px;
}
.zxRefButtons:not(.zxRefButtonsEmpty).zxRefBottomButtons {
  margin-top: 5px;
}
.zxRefButtons .zXButtonBottomRight, .zxRefButtons .zXButtonTopRight {
  float: right;
}

.zxFormRefButtons {
  display: inline-flex;
  flex-wrap: nowrap;
}
.zxFormRefButtons.zxRefPostButtons {
  margin-left: 5px;
}
.zxFormRefButtons.zxRefPreButtons {
  margin-right: 5px;
}
.zxFormRefButtons .zxRefButtonLeft {
  float: left;
}
.zxFormRefButtons .zxRefButtonRight {
  float: right;
}

.zXButtonLink {
  color: var(--color-text);
  background: none !important;
  font-size: 1rem;
  text-decoration: underline;
  cursor: pointer;
  border: none;
  padding: 0 !important;
}

.zXButtonSmall {
  font-size: 0.9rem;
  padding: 0.3rem 0.5rem;
}

.zXButtonPrimary {
  color: var(--color-button-primary);
  border: solid 1px var(--color-button-primary);
}
.zXButtonPrimary.zXSolid {
  background-color: var(--color-primary);
  color: var(--color-text-light);
}

.zXButtonSecondary {
  color: var(--color-button-secondary);
  border: solid 1px var(--color-button-secondary);
}
.zXButtonSecondary.zXSolid {
  background-color: var(--color-button-secondary);
  color: var(--color-text-light);
}

.zXButtonOk {
  color: var(--color-button-ok);
  border: solid 1px var(--color-button-ok);
}
.zXButtonOk.zXSolid {
  background-color: var(--color-button-ok);
  color: var(--color-text-light);
}

.zXButtonWarning {
  color: var(--color-button-warning);
  border: solid 1px var(--color-button-warning);
}
.zXButtonWarning.zXSolid {
  background-color: var(--color-button-warning);
  color: var(--color-text-light);
}

.zXButtonError {
  color: var(--color-button-error);
  border: solid 1px var(--color-button-error);
}
.zXButtonError.zXSolid {
  background-color: var(--color-button-error);
  color: var(--color-text-light);
}

.zXTabLayout {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  border-bottom: 1px solid #ced4da;
}
.zXTabLayout .zXTabLink {
  padding: 4px 8px 8px;
  color: #000;
  display: block;
  cursor: pointer;
  color: black;
  opacity: 0.65;
}
.zXTabLayout .zXTabLink.zXTabHorizontal {
  min-width: 140px;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  border: 1px solid #ced4da;
  border-bottom: none;
  border-top: 4px solid var(--color-tab-inactive);
  border-right: none;
}
.zXTabLayout .zXTabLink.zXTabHorizontal.zXFlexInline:nth-last-child(1 of .zXFlexInline) {
  border-right: 1px solid var(--color-tab-inactive);
}
.zXTabLayout .zXTabLink.zXTabHorizontal.zXFlexWrap:nth-last-child(1 of .zXFlexWrap) {
  border-right: 1px solid var(--color-tab-inactive);
}
.zXTabLayout .zXTabLink.zXTabHorizontal:hover:not(.active) {
  background-color: rgba(0, 0, 0, 0.04);
  opacity: 0.85;
}
.zXTabLayout .zXTabLink.zXTabHorizontal.active {
  background-color: var(--color-background);
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  border-top: 4px solid var(--color-tab-active);
  border-bottom: none;
  margin-bottom: -1px;
  opacity: 1;
  font-weight: bolder;
}
.zXTabLayout .zXTabLink.zXTabVertical {
  writing-mode: vertical-rl;
  min-width: unset;
  min-height: 140px;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  border: 1px solid var(--color-tab-inactive);
  border-top: none;
  border-right: 4px solid var(--color-tab-inactive);
  transform: scale(-1);
  text-align: end;
}
.zXTabLayout .zXTabLink.zXTabVertical.zXFlexInline:nth-last-child(1 of .zXFlexInline) {
  border-top: 1px solid var(--color-tab-inactive);
}
.zXTabLayout .zXTabLink.zXTabVertical.zXFlexWrap:nth-last-child(1 of .zXFlexWrap) {
  border-top: 1px solid var(--color-tab-inactive);
}
.zXTabLayout .zXTabLink.zXTabVertical:hover:not(.active) {
  background-color: rgba(0, 0, 0, 0.04);
  opacity: 0.85;
}
.zXTabLayout .zXTabLink.zXTabVertical.active {
  background-color: var(--color-background);
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  border-right: 4px solid var(--color-primary);
  margin-bottom: -1px;
  border-top: none;
  opacity: 1;
  font-weight: bolder;
}

.zXTabLayoutContent {
  position: relative;
  width: 100%;
}
.zXTabLayoutContent .zXTabPane {
  display: none;
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
  padding: 0.4rem;
  overflow-y: auto;
}
.zXTabLayoutContent .zXTabPane.active {
  opacity: 1;
  display: block;
}

.zXAccordeonLayout {
  border: 1px solid #ced4da;
  display: block;
  cursor: pointer;
  padding: 4px 8px;
  color: #000;
  margin: 0 0.5rem 0.5rem 0;
  background-color: var(--color-background);
  opacity: 0.8;
  border-top: 4px solid var(--color-tab-inactive);
}
.zXAccordeonLayout:hover:not(.active) {
  background-color: rgba(0, 0, 0, 0.04);
  opacity: 0.85;
}
.zXAccordeonLayout.active {
  opacity: 1;
  border-top: 4px solid var(--color-tab-active);
  font-weight: bolder;
}
.zXAccordeonLayout.active .zXAccordeonIcon:before {
  content: "\f077";
  font-family: "Font Awesome 6 Pro";
}
.zXAccordeonLayout .zXAccordeonIcon {
  font-size: 0.95rem;
  display: inline-block;
}
.zXAccordeonLayout .zXAccordeonIcon:before {
  content: "\f078";
  font-family: "Font Awesome 6 Pro";
}
.zXAccordeonLayout .zXEditFormAccordeonLabel {
  margin-left: 2px;
}

.zXAccordeonLayoutContent {
  display: none;
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
  padding: 0 0.2rem;
  overflow-y: auto;
}
.zXAccordeonLayoutContent.active {
  opacity: 1;
  display: block;
}

.zXColumnLayout {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  gap: 4px;
}
.zXColumnLayout .zXColumnLayoutColumn {
  flex: 1 auto;
}
.zXColumnLayout .zXColumnLayoutColumn .zXColumnLayoutLabel {
  margin-top: 0.1rem;
  font-size: 1.2rem;
}
.zXLayout .zXLayoutGridCell {
  display: flex;
  overflow: auto;
}
.zXLayout .zXLayoutGridCell .zXLayoutCellContent {
  height: 100%;
  width: 100%;
}
.zXLayout .zXLayoutGridCell .zXLayoutCellContent .zXPageAction {
  padding-left: 0vw;
}
.zXLayout.zXLayoutTab {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-areas: "tapstrip" "content";
}
.zXLayout.zXLayoutTab.zXLayoutVerticalTab {
  grid-template-rows: unset;
  grid-template-columns: 40px auto;
  grid-template-areas: "tapstrip content";
}
.zXLayout.zXLayoutTab .zXTabLayout {
  grid-area: tapstrip;
}
.zXLayout.zXLayoutTab .zXTabLayoutContent {
  grid-area: content;
}
.zXLayout.zXLayoutTab .zXTabPane {
  padding: 0rem;
}
.zXLayout.zXLayoutTab .zXTabPane .zXLayoutCellContent {
  margin-top: 0.5rem;
  margin-left: 0.5rem;
}
.zXLayout.zXLayoutTab .zXTabPane .zXLayoutCellContent .zXPageAction {
  padding-left: 0vw;
}

.zXPageLayout {
  margin-bottom: -2vw;
}

.zxStickyContent {
  position: sticky;
  z-index: 10;
}
.zxStickyContent::after {
  content: "";
  display: table;
  clear: both;
}