@import url(/pkgs/admin/reset.css);
:root {
  --base-font-family: "ITC Franklin Gothic W01", -apple-system-body, sans-serif;
  --text-color: #333;
  --background-color: #fff;
  --background-color-alt: #eee;
  --main-color: #989798;
  --main-color-alt: #444;
  --selected-color: #cbcbfc;
  --selected-color-alt: #bcbceb;
  --new-record-color: #6ba713;
  --modified-record-color: #734da1;
  --input-focus-background-color: #eee;
  --translucent-background-color: rgba(255,255,255,0.8);
  --ui-borders-color: #989798;
  --iu-error-color: #b60b14;
  --ui-highlight-active-color: #777;
  --link-control-color: #3d8ba5;
  --splash-image-width: calc(25vw - 12px);
  }

@font-face {
  font-family: "ITC Franklin Gothic W01_n4";
  src: url("fonts/25b07660-96a5-4eed-bcfd-fc4f0e97098a.eot?#iefix") format("eot");
}
@font-face {
  font-family: "ITC Franklin Gothic W01";
  src: url("fonts/25b07660-96a5-4eed-bcfd-fc4f0e97098a.eot?#iefix");
  src: url("fonts/25b07660-96a5-4eed-bcfd-fc4f0e97098a.eot?#iefix") format("eot"), url("fonts/bf1d764b-5eaf-4647-b1aa-ea0760c63624.woff2") format("woff2"), url("fonts/de902d7e-9849-4880-b8fe-966b186b110c.woff") format("woff"), url("fonts/fdec17bc-6f6c-4b7c-bbc1-8f2ec6c7931c.ttf") format("truetype"), url("fonts/3b330c74-12e3-423e-9785-d817a41a9a24.svg#3b330c74-12e3-423e-9785-d817a41a9a24") format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "ITC Franklin Gothic W01_i4";
  src: url("fonts/7306de32-c033-4beb-935b-9450a69833ce.eot?#iefix") format("eot");
}
@font-face {
  font-family: "ITC Franklin Gothic W01";
  src: url("fonts/7306de32-c033-4beb-935b-9450a69833ce.eot?#iefix");
  src: url("fonts/7306de32-c033-4beb-935b-9450a69833ce.eot?#iefix") format("eot"), url("fonts/856ee417-4060-4c84-b954-524717c1253d.woff2") format("woff2"), url("fonts/ad3568fc-e8d1-4f2a-991a-73b2c1579d2d.woff") format("woff"), url("fonts/29efa8aa-9c14-47a3-bc87-fefc803189e0.ttf") format("truetype"), url("fonts/8cdd992f-b574-4529-b237-4a0ab066d8f5.svg#8cdd992f-b574-4529-b237-4a0ab066d8f5") format("svg");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "ITC Franklin Gothic W01_n7";
  src: url("fonts/7762c169-a387-4399-b8a3-d43373d60c3e.eot?#iefix") format("eot");
}
@font-face {
  font-family: "ITC Franklin Gothic W01";
  src: url("fonts/7762c169-a387-4399-b8a3-d43373d60c3e.eot?#iefix");
  src: url("fonts/7762c169-a387-4399-b8a3-d43373d60c3e.eot?#iefix") format("eot"), url("fonts/aae7ddaa-d276-4474-8194-84f9bf29eabe.woff2") format("woff2"), url("fonts/060031a3-ab11-4f91-9dd4-6b39458f5109.woff") format("woff"), url("fonts/9920e0c0-07ac-4a1b-befd-fa76960969b8.ttf") format("truetype"), url("fonts/52fb29fb-5147-4a42-b308-e24daf6ec3b6.svg#52fb29fb-5147-4a42-b308-e24daf6ec3b6") format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "ITC Franklin Gothic W01_i7";
  src: url("fonts/d22fab2a-12ce-4fde-a9c4-257dec15b6e6.eot?#iefix") format("eot");
}
@font-face {
  font-family: "ITC Franklin Gothic W01";
  src: url("fonts/d22fab2a-12ce-4fde-a9c4-257dec15b6e6.eot?#iefix");
  src: url("fonts/d22fab2a-12ce-4fde-a9c4-257dec15b6e6.eot?#iefix") format("eot"), url("fonts/678245f5-1eb5-4ca3-82a2-bbb219078f86.woff2") format("woff2"), url("fonts/4464b53d-fa4f-4571-bc60-bf9125b77517.woff") format("woff"), url("fonts/a2f0aafb-c051-4bc8-bcbb-d702f2e0c93d.ttf") format("truetype"), url("fonts/3d855152-df90-4b54-92f2-14070998cba8.svg#3d855152-df90-4b54-92f2-14070998cba8") format("svg");
  font-weight: 700;
  font-style: italic;
}
button:active,
button {
  background-color: var(--background-color);
  color: var(--main-color);
}
strong{
  font-weight: bold;
}
em{
  font-style: italic;
}
div.leftPane, div.rightPane, div.onePane {
  position: absolute;
  bottom: 0px;
  top: 61px;
}

div.leftPane {
  left: 0px;
  width: 200px;
  background-color: var(--background-color);
  z-index: 3;
  overflow: auto;
  border-right: 1px solid var(--ui-borders-color);
  padding-top: 6px;
}

div.leftPane h2 {
  text-align: center;
}

div.rightPane {
  right: 0;
  top: 112px;
  left: 250px;
  background-color: var(--background-color);
  overflow: auto;
  padding: 10px;
}

div.onePane {
  left: 0px;
  right: 0px;
  overflow: auto;
  padding: 10px;
}

table.paneList {
  width: 100%;
}

.paneList th,
.paneList h2 {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  padding-left: 12px;
  border-bottom: 1px solid var(--ui-borders-color);
  vertical-align: bottom;
  text-align: left;
}

.paneList td.cbCell {
  padding-left: 3px;
}

.paneList tr:nth-child(2n),
.paneList li:nth-child(2n) {
  background-color: var(--background-color);
}

.paneList td,
.paneList li {
  padding: 6px 6px 6px 12px;
  font-size: 12px;
}

.paneList tr.selected,
.paneList li.selected {
  color: var(--background-color);
  background-color: var(--main-color);
}

/* @group Misc BBX */
div#stageWarn {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--main-color);
  opacity: 0.3;
  z-index: 10000; /* yeah on top */
  color: var(--background-color);
  text-align: center;
  width: 100%;
  padding: 5px 0 5px 0;
}

input.bbxFVerr,
select.bbxFVerr,
span.bbxFVerr,
textarea.bbxFVerr {
  background-color: var(--iu-error-color) !important;
  color: var(--background-color) !important;
}

.centerContainer {
  text-align: center;
}

.centerBox {
  display: inline-block;
}

/* @end */
/* @group Tags */
body {
  font-size: 14px;
  background-color: var(--background-color);
  font-family: var(--base-font-family);
  color: var(--text-color);
}

pre {
  font-family: "Source Code Pro", monospace;
}

h1, h2, h3, h4 {
  font-weight: bold;
}

h1 {
  font-size: 16px;
  margin-bottom: 8px;
}

h2 {
  text-transform: uppercase;
  font-size: 13px;
}

h3 {
  padding-top: 0.5em;
}

h4 {
  border-bottom: 1px solid var(--ui-borders-color);
}

select, input, textarea {
  font-size: 11px;
  font-family: var(--base-font-family);
  line-height: 1.1em;
  accent-color: var(--link-control-color);
}
.modusHideOnLoad{
	display:none;
}
.modusButton, .bbxButton {
  border: 1px solid var(--main-color);
  background-color: var(--background-color);
  color: var(--main-color);
  font-weight: bold;
  font-size: 11px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding: 4px 6px 4px 6px;
  text-align: center;
  min-width: 55px;
  margin-right: 20px;
  margin-top: 8px;
  display: inline-block;
  font-family: var(--base-font-family);
}
.modusButton.modusDefault{
  background-color: var(--link-control-color);
  color: var(--background-color);
}

.modusControlLink {
  display: inline-block;
  margin-right: 20px;
  margin-top: 8px;
  vertical-align: text-bottom;
}

.modusButton:active,
.bbxButton:active {
  border: 1px solid var(--ui-borders-color);
  background-color: var(--main-color);
  color: var(--background-color);
}

.bbxSubListScroll {
  margin-left: 1.5em;
  max-height: 145px;
  overflow: auto;
  border: 1px solid var(--ui-borders-color);
  padding: 2px;
}

a {
  color: var(--link-control-color);
  cursor: pointer;
}

a.fa, a.fal, a.fas, a.far,
span.fa, span.far, span.fas, span.fal {
  color: var(--link-control-color);
  display: inline-block;
}

a:active,
a:active span.fa,
a:active span.far,
a:active span.fas,
a:active span.fal {
  color: var(--ui-highlight-active-color);
}
a.disabled, button.disabled{
 opacity: 0.5;
}
form table th {
  text-align: right;
  padding-right: 5px;
  vertical-align: top;
  line-height: 1.5;
}

form table td {
  text-align: left;
  line-height: 1.5;
}

p {
  padding-bottom: 1em;
}

/* @end */
/* @group Layout */
#loginForm {
  display: block;
  margin-top: 120px;
  border: 1px solid var(--main-color);
  border-radius: 6px;
  padding: 40px;
}

#login {
  border: 1px solid var(--ui-borders-color);
  padding: 20px;
  margin: auto;
  margin-top: 120px;
  width: 180px;
}

#login button {
  display: block;
}

#login input {
  width: 170px;
  margin-bottom: 6px;
}

.shake {
  animation: shake 0.5s;
  animation-iteration-count: 1;
  animation-delay: 0.5s;
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}
#masthead {
  font-size: 14px;
  height: 60px;
  color: var(--main-color);
  background: var(--background-color);
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 50;
  border-bottom: 2px solid var(--main-color-alt);
}

#masthead > a > img,
#masthead img.modusLogo {
  position: fixed;
  right: 30px;
  top: 10px;
}

@media (max-width: 428px) {
  #masthead > a > img {
    right: 4px;
    top: 0px;
  }
}
#masthead p {
  color: var(--main-color-alt);
  font-size: 18px;
  font-family: var(--base-font-family);
  margin-right: 30px;
  text-align: right;
  padding-top: 12px;
  padding-bottom: 0px;
  height: 62px;
}

#masthead img {
  margin-bottom: 2px;
}

#userInfo {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 16px;
  color: var(--text-color);
}

#userInfo div {
  font-size: 13px;
  margin-top: 6px;
}

#menuBar {
  position: absolute;
  text-transform: uppercase;
  left: 20px;
  font-weight: bold;
  font-size: 14px;
  top: 46px;
}

#menuBar a {
  color: var(--main-color);
  padding-right: 30px;
  padding-top: 2px;
  padding-bottom: 0px;
}

#modusMobileMenu {
  display: none;
}

#content {
  margin-top: 60px;
  padding: 18px 24px 32px 24px;
}

.adminList {
  clear: both;
  float: left;
  margin-right: 80px;
  margin-left: 30px;
  height: 380px;
  overflow: auto;
  margin-top: 12px;
}

.sortable div {
  cursor: move;
}

.closeBox {
  position: absolute;
  top: 5px;
  right: 5px;
}

.dialog a.closeBox {
  color: var(--link-control-color);
  right: 12px;
}

.dialog > h1 {
  margin-right: 30px;
}

div.choiceSelectLists {
  background: var(--background-color);
  border: 1px solid var(--ui-borders-color);
  z-index: 2;
  padding: 0px 0px 5px 5px;
  width: 205px;
}

div.choiceSelectLists div {
  height: 300px;
  padding-right: 5px;
  overflow: auto;
  overflow-x: hidden;
  width: 200px;
  margin-top: 10px;
}

div.choiceSelectLists a.closeBox {
  position: relative;
  float: right;
  font-size: 11px;
  padding: 0;
  margin: 0;
}
h1.carp{
  text-align: center;
  margin-top: 33vh;
}
.err, .error {
  color: var(--iu-error-color) !important;
}

.clickable {
  color: pointer;
}

.menu, .menuInline {
  font-size: 16px;
}

.menu {
  position: absolute;
  border: 1px solid var(--main-color);
  background-color: var(--background-color);
  color: var(--main-color);
  z-index: 100;
  font-family: var(--base-font-family);
  margin-left: 20px;
  top: 60px;
}

.menu a i {
  float: right;
  margin-left: 1em;
}

.submenu {
  z-index: 101;
  margin-left: 0px;
  margin-top: 0px;
}

.submenu a {
  white-space: nowrap;
}

.menu span,
.menu a,
.menuInline a,
.menuInline span {
  display: block;
  padding: 5px 15px;
}

.menu a {
  color: var(--main-color);
}

.menu hr,
.menuInline hr {
  margin: 0;
}

.menu a:hover {
  color: var(--background-color);
  background: var(--main-color);
}

.menuInline a:hover {
  color: var(--background-color);
  background: var(--link-control-color);
}

.doomed, .doomed * {
  background-color: var(--iu-error-color) !important;
  text-decoration: line-through !important;
  color: var(--background-color) !important;
}

.dialog {
  border: 1px solid var(--ui-borders-color);
  padding: 1.25em;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  background: var(--background-color);
}

.dlgInline {
  position: absolute;
  background-color: var(--background-color);
  z-index: 200;
  overflow: auto;
  padding-right: 30px;
  padding-top: 20px;
}

.dialog h2 {
  margin-bottom: 6px;
}

.reportIcon {
  float: left;
  margin-right: 8px;
}

div.modusToolBar {
  position: fixed;
  top: 62px;
  left: 0;
  right: 0;
  padding: 4px 20px;
  background-color: var(--background-color);
  z-index: 49;
  height: 26px;
  text-align: center;
  margin-bottom: 4px;
}

div.modusToolBarShim {
  height: 30px;
}

div.modusToolBar h1 {
  padding-top: 5px;
  display: inline-block;
}

div.modusToolBar div.tools {
  text-align: left;
  position: absolute;
}

.modusSegmentControl {
  border: 1px solid var(--link-control-color);
  border-radius: 3px;
  padding: 0;
  display: inline-flex;
}

.modusSegmentControl label {
  display: inline-block;
  border-left: 1px solid var(--link-control-color);
}

.modusSegmentControl label span {
  display: inline-block;
  padding: 4px 8px;
}

.modusSegmentControl label:first-child {
  border-left: 0px;
}

.modusSegmentControl input[type=radio] {
  display: none;
}

.modusSegmentControl input[type=radio]:checked + span {
  background: var(--link-control-color);
  color: var(--background-color);
}

@media (max-width: 1024px) {
  div.modusToolBar div.modusSegment {
    display: none;
  }
}
@media (max-width: 768px) {
  div.modusToolBar {
    text-align: right;
  }
  div.modusToolBar div.tools {
    max-width: 100vw;
  }
}
div.modusToolBar div.tools > a,
div.modusToolBar div.tools div.modusSegment > a {
  font-size: 20px;
  padding: 4px;
  border-radius: 3px;
}

div.modusToolBar div.tools > a:hover,
div.modusToolBar div.tools div.modusSegment > a:hover {
  color: var(--background-color);
  background-color: var(--link-control-color);
}

div.modusToolBar form.modusFilterBar {
  display: block;
  float: right;
}

div.modusToolBar form.modusFilterBar .modusButton {
  margin-top: 0px;
}

div.modusSegment {
  display: inline-block;
  border: 1px solid var(--link-control-color);
  border-radius: 0.25em;
  padding: 4px 0;
}

div.modusSegment a.on {
  background-color: var(--link-control-color);
  color: var(--background-color);
}

table.sortable th {
  cursor: pointer;
  background-color: var(--background-color);
}

table.list th {
  text-transform: uppercase;
}

table.list th {
  padding: 6px 4px 0 4px;
  font-weight: bold;
}

table.list td {
  padding: 3px 4px;
  font-size: 11px;
}

table.list tr:nth-child(2n+2) {
  background-color: var(--background-color-alt);
}

.modusEditForm textarea {
  vertical-align: top;
}


.modusEditForm input[type=text],
.modusEditForm input[type=url],
.modusEditForm select,
.modusEditForm textarea {
  width: 300px;
}

.modusEditForm input[type=text].jqDatePicker,
table.modusListReport input[type=text].jqDatePicker {
  width: 100px;
}
.modusWidth64{ width: 64px;}
.modusWidth75{ width: 75px;}
.modusWidth100{ width: 100px;}
.modusWidth128{ width: 128px;}
.modusWidth150{ width: 150px;}
.modusWidth256{ width: 256px;}
.modusWidth300{ width: 300px;}

.modusCursorWait{
  cursor: wait
}
.modusEditForm table tr td {
  max-width: 650px;
}

.modusEditForm a span.fa-square-plus {
  display: block;
}

table.modusSubform tr th {
  text-align: left;
  font-weight: bold;
  text-transform: uppercase;
}

table.modusSubform td {
  vertical-align: middle;
}

table.modusSubform tr th,
table.modusSubform tr td {
  padding: 0px 2px;
}

table.recordView table.modusSubform tr th,
table.recordView table.modusSubform tr td,
table.recordView th,
table.recordView td {
  padding: 3px;
}
table.recordView>tbody>tr>td{
  max-width: 40vw;
}
.modusResponsiveForm {
  display: table;
}

.modusResponsiveForm > div {
  display: table-row;
}

.modusResponsiveForm > div > div {
  display: table-cell;
  padding: 2px 4px;
}

.modusResponsiveForm > div > div:first-child {
  text-align: right;
}

.modusResponsiveFormButtons {
  display: block;
  text-align: right;
}

.dialog > form > div.modusResponsiveForm select {
  width: 175px;
}
.modusPrintPositionTool{
  border: 1px solid var(--ui-borders-color)
}
.modusPrintPositionTool label{
  width: 80px;
  height: 60px;
  margin: 0;
  font-weight: bold;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.modusPrintPositionTool input{
  display: none;
}
.modusPrintPositionTool label:has(input:checked){
  background: var(--link-control-color);
  color: var(--background-color);
}
table.recordView th {
  text-align: right;
  text-transform: uppercase;
  font-size: 0.8em;
}

div.autoCompleter {
  background: var(--background-color);
  border: 1px solid var(--ui-borders-color);
  padding: 0px;
  font-size: 10px;
}

div.autoCompleter ul {
  margin: 0;
  padding: 0;
}

div.autoCompleter ul li {
  list-style: none;
  margin: 0;
  padding: 2px 3px;
}

div.autoCompleter li.selected {
  background-color: var(--main-color);
  color: var(--background-color);
}

/* DO we need this? TODO */
.autoCompleter span {
  display: none;
}

th.sorting,
th.sorting_asc,
th.sorting_desc {
  cursor: ns-resize;
}

.modusListReport tr {
  vertical-align: middle !important;
}

.modusListReport tr td,
.modusListReport tr th {
  padding: 3px 12px;
  white-space: nowrap;
  vertical-align: middle !important;
}

table.modusEditInList tbody tr td {
  padding: 0;
}
table.modusEditInList tbody tr>td {
  padding-right: 6px;
}
table.modusListReport > thead > tr th {
  color: var(--text-color);
  text-transform: uppercase;
  font-weight: bold;
  background-color: var(--background-color);
  padding: 2px 12px 0 12px;
  vertical-align: bottom;
  text-align: left;
}

table.modusListReport > tbody > tr:nth-child(2n+1) {
  background-color: var(--background-color-alt);
}

table.modusListReport > tbody > tr.selected {
  background-color: var(--selected-color);
}

table.modusListReport > tbody > tr.selected:nth-child(2n+1) {
  background-color: var(--selected-color-alt);
}

.modusListReport tr td p {
  padding-bottom: 0;
}

table.modusListReport tfoot {
  border-top: 2px solid var(--ui-borders-color);
}

table.modusListReport input[type=text] {
  width: 200px;
}

div.longText {
  white-space: normal;
  width: 450px;
}

.textReport em {
  font-weight: bold;
  font-style: normal;
  text-decoration: underline;
}

td.dNum {
  text-align: right;
}

table tr td.dLongText {
  max-width: 200px;
  min-width: 150px;
  white-space: normal;
}

tr.modRecRow {
  color: var(--modified-record-color);
}

tr.newRecRow {
  color: var(--new-record-color);
}

tr.modRecRow,
tr.modRecRow input,
tr.modRecRow select {
  color: var(--modified-record-color);
}

tr.newRecRow,
tr.newRecRow input,
tr.newRecRow select {
  color: var(--new-record-color);
}

/* @group ReportBuilder */
button.ui-multiselect {
  font-size: 11px;
}

form.modusFilterBar select,
form.modusFilterBar input {
  width: 130px !important;
}

form.modusFilterBar {
  max-height: 29px;
  display: inline-block;
  overflow: hidden;
}

form.modusFilterBar .k-multiselect-wrap .k-button {
  padding: 1px;
  font-size: 9px;
  min-height: 1em;
  margin: 1px;
}

form.modusFilterBar input,
form.modusFilterBar button,
form.modusFilterBar div.k-multiselect {
  vertical-align: top;
}

ul.ui-multiselect-checkboxes li span {
  font-size: 12px !important;
}

.ui-datepicker-week-end {
  opacity: 0.33;
}

#reportForm div.tabControl > div {
  min-width: 600px;
  min-height: 400px;
}

#reportForm h2 {
  margin-top: 1em;
  margin-bottom: 1px;
}

#reportForm div#filters select {
  width: 400px;
}

#reportForm div.tabContent {
  min-width: 525px;
}
#reportForm div#basics > div{
  column-count: 2;
}
#reportForm div#basics > div >div{
  break-inside: avoid-column;
}
div.modusFieldsSelect > div {
  max-height: 50vh;
  height: 300px;
  overflow: auto;
  border: 1px solid var(--ui-borders-color);
  padding: 4px;
  width: 275px;
  max-width: 33vw;
  display: inline-block;
  vertical-align: top;
  margin-right: 18px;
}

div.modusFieldsSelect > div > div {
  padding: 2px 4px;
}

div.modusFieldsAvailable > div {
  cursor: e-resize;
}

div.modusFieldsAvailable > div a {
  display: none;
}

div.modusFieldsSelected > div {
  cursor: move;
}

div.modusFieldsSelected > div a {
  float: right;
}

div.modusFieldsSelect > div > div:hover {
  background-color: var(--selected-color);
}

/* @group Dialogs */
div.dialogContainer {
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--translucent-background-color);
  width: 100%;
  height: 100%;
}

div.dialogContainer > div.dialog {
  position: fixed;
  top: 20px;
  left: 60px;
  background-color: var(--background-color);
  max-height: 90vh;
  max-width: 90vw;
  overflow: auto;
}

/* @group Calendar */
div.calMonth {
  position: absolute;
  z-index: 0;
  text-align: center;
}

div.calTable {
  margin-bottom: 20px;
}

div.calDay {
  border-bottom: 1px solid var(--ui-borders-color);
  border-right: 1px solid var(--ui-borders-color);
  width: 135px;
  height: 109px;
  overflow: hidden;
  font-size: 9px;
  text-align: right;
  padding: 0px;
  float: left;
}

div.calWeek {
  clear: left;
  height: 110px;
  border-left: 1px solid var(--ui-borders-color);
}

div.calTable span {
  text-transform: uppercase;
  padding-bottom: 2px;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  height: 15px;
  display: block;
  float: left;
  height: 10px;
  border-bottom: 1px solid var(--ui-borders-color);
}

div.calTable h2.calMonthTitle {
  font-size: 16px;
  margin-bottom: 2px;
}

div.calBar,
div.calOverFlowBar {
  font-size: 10px;
  background-color: #888;
  color: var(--background-color);
  border-radius: 3px;
  -moz-border-radius: 3px;
  text-align: left;
  margin-top: 20px; /* for table header */
  overflow: hidden;
  padding: 1px 0px;
}

div.calBar {
  position: absolute;
}

div.calOverFlowBar {
  margin-top: 0px;
}

.calBar p {
  padding: 1px 3px;
}

div.legend div.calBar {
  position: static;
  margin-top: 0px;
  width: 90px;
  padding: 1px 4px;
  display: inline-block;
  margin-right: 10px;
}

div.legend {
  min-height: 20px;
}

div.calLegend {
  width: 100px;
  position: absolute;
}

div.timelineLegend {
  position: fixed;
  left: 12px;
  opacity: 0.9;
  bottom: 12px;
}

div.calWarning {
  height: 2px;
  position: absolute;
  width: 135px;
  margin-top: 20px;
  border-top: 2px dashed var(--iu-error-color);
  overflow: hidden;
}

div.calWarning div {
  display: none;
}

div.calOverflowBox {
  border: 2px dashed var(--iu-error-color);
  position: absolute;
  width: 135px;
  margin-top: 20px;
  background-color: var(--background-color);
  border-top-style: none;
  z-index: 1000;
  margin-left: -2px;
  padding: 1px;
}

a.calPrevCtl,
a.calNextCtl {
  position: absolute;
  top: 0px;
  z-index: 10;
  font-weight: bold;
}

a.calPrevCtl {
  left: 0;
}

a.calNextCtl {
  right: 0;
}

div.monthlong {
  position: absolute;
  left: 975px;
  top: 0px;
  width: 200px;
  text-align: left;
}

div.monthlong h2 {
  padding-bottom: 1px;
  padding-top: 4px;
  font-size: 10px;
}

div.monthlong div.calBar {
  width: 200px;
  overflow: hidden;
  position: relative;
  margin-top: 1px;
}

.accordian {
  white-space: nowrap;
}

.accSectionToggle {
  display: inline-block;
  vertical-align: top;
  background: var(--main-color-alt);
  color: var(--background-color);
  height: 700px;
  width: 48px;
  opacity: 0.75;
}

.accSectionToggle.on {
  opacity: 1;
}

.accSectionToggle:hover {
  opacity: 0.9;
}

.accSectionToggle span {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  display: block;
  margin-top: 200px;
  white-space: nowrap;
  text-transform: uppercase;
  font-size: 0.75em;
  letter-spacing: 1px;
}

.accSection {
  padding: 12px 6px 0 6px;
  display: inline-block;
  vertical-align: top;
}

#sampleFieldList div div {
  display: inline-block;
  vertical-align: middle;
}

input.jqDatePicker {
  width: 70px;
}

.inlineImages div {
  display: inline-block;
  vertical-align: middle;
}

tr.batchRowToDelete {
  text-decoration: line-through;
  opacity: 0.3;
}

tr.batchRowToDelete input,
tr.batchRowToDelete select,
tr.batchRowToDelete textarea {
  text-decoration: line-through;
}

/* @group Timline Report View */
.modusTimeline {
  margin-left: 150px;
}

.modusTimeline h2 {
  margin-left: -150px;
  width: 140px;
  font-size: 10px;
  text-align: right;
}

.modusTimeline div.bar {
  height: 12px;
  padding: 2px;
  margin-top: 1px;
  margin-bottom: 0.5em;
  cursor: pointer;
  white-space: nowrap;
}

.modusTimelineHeader {
	position: sticky;
	top: 96px;
	background-color: var(--background-color);
	padding-top: 1em;
}
.modusTimelineHeader span {
  display: inline-block;
  height: 10px;
  overflow: hidden;
  font-size: 10px;
  border-bottom: 1px solid var(--ui-borders-color);
  text-align: center;
}

div.modusTimelineDateLabel {
  position: absolute;
  margin-top: -1.25em;
  display: inline-block;
  white-space: nowrap;
  padding: 2px 4px 0 4px;
  font-size: 0.75em;
  border-radius: 4px;
}

#modusHover {
  background: var(--background-color);
  padding: 0.75em;
  border: 1px solid var(--ui-borders-color);
  border-radius: 6px;
}
table.modusCalendarComparison th,
table.modusCalendarComparison td{
	padding: 4px 8px;
	border-right: 1px solid var(--ui-borders-color);
}
table.modusCalendarComparison th{
	font-weight: bold;
	vertical-align: bottom;
	text-align: center;
}
table.modusCalendarComparison tbody tr:nth-child(2n){
  background-color: var(--background-color-alt);
}

/* @group TabCOntrols */
div.tabControl > a {
  background-color: var(--main-color);
  color: var(--background-color);
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--main-color);
  border-bottom: none;
}

div.tabControl > a.on {
  color: var(--text-color);
  background-color: var(--background-color);
  border: 1px solid var(--main-color-alt);
  border-bottom: none;
}

div.tabControl > div {
  padding: 12px;
  border-top: 1px solid var(--main-color-alt);
  margin-top: -1px;
}

.dlgButtons {
  text-align: right;
}

/* @end */
.modusAttachObjectSearchResults a {
  padding: 5px;
  display: inline-block;
  text-align: center;
  margin: 4px;
  width: 132px;
}

.modusAttachObjectSearchResults a.selected {
  border: 3px solid var(--selected-color);
  padding: 2px;
}

#modusAttachObjectSearchResults a {
  display: inline-block;
  width: 132px;
  text-align: center;
  margin: 4px;
}

/* @group Gallery Reports */
div.modusGalleryItem {
  vertical-align: top;
  display: inline-block;
  margin: 6px;
  padding: 4px;
  border: 1px solid var(--ui-borders-color);
  border-radius: 6px;
  width: 132px;
  overflow: hidden;
}
div.modusGalleryItem:has(img){
  width: 256px;
}
div.modusGalleryItem:has(img.thumb){
  width: 512px;
}
div.modusGalleryItem.selected {
  border: 3px solid var(--selected-color);
  padding: 2px;
}

div.gallery > div {
  display: inline-block;
  margin: 6px;
  max-width: 128px;
  overflow: hidden;
}

.swatch {
  height: 24px;
  width: 24px;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
}

div.swatch {
  height: 128px;
  width: 128px;
}

.imagesList div {
  display: inline-block;
  margin: 5px;
}

.imagesList a {
  display: inline-block;
  font-size: 10px;
  max-width: 120px;
  margin: 5px;
}

/* @end */
/* @group Dashboard Charts */
.dashChart {
  display: inline-block;
  width: 480px;
  height: 320px;
  margin: 12px;
}

div.modusDashContainer,
div.modusPathwayContainer,
a.modusPathwayContainer{
  display: inline-block;
  border: 1px solid var(--ui-borders-color);
  border-radius: 10px;
  padding: 10px;
  width: 256px;
  height: 256px;
  overflow: hidden;
  overflow-y: auto;
  vertical-align: top;
  margin: 0 6px 8px 0;
  background-color: var(--translucent-background-color);
}


/* New pathways features */
a.modusPathwayContainer{
  color: var(--text-color);
  display: inline-block;
  border: 1px solid var(--ui-borders-color);
  border-radius: 10px;
  padding: 10px;
  width: 288px;
  height: 288px;
  overflow: hidden;
  vertical-align: top;
  margin: 4px 4px 8px 0;
  background-color: var(--translucent-background-color);
  text-align: center;
}
div.modusPathwayContainer{
  overflow-y: hidden;
}
div.modusPathwayContainer h2{
  text-align: center;
}
div.modusPathwayContainer:has(div.thumb),
a.modusPathwayContainer:has(div.thumb){ 
  width: 542px;
  height: 542px;
  text-align: center;
}
div.modusPathwayContainer:has(div.modusPathwayReportPreview){ 
  width: 1024px;
  height: 256px;
}


div.modusPathwayReportPreview{
 display: inline-block;
 vertical-align: top;
 text-align: center;
 width: 192px;
 margin: 0 4px;
}
.modusPathwayQuote{
  padding: 1.5em;
  line-height: 1.5;
  font-size: 2em;
  max-width: 1180px;
}
.modusPathwayQuote span{
  display: block;
  text-align: right;
}
.modusSplashImages{
  white-space: nowrap;
}
.modusSplashImages img{
  max-width: var(--splash-image-width);
  height: var(--splash-image-width);
}
.modusSplashImages a{
  display: inline-block;
  width: var(--splash-image-width);
}
.modusSplashImages a b{
  position: absolute;
  color: #fff;
  font-size: 18px;
  display: block;
  margin-top: -2em;
  text-align: center;
  width: var(--splash-image-width);
}

div.modusPathwayIconLinks{
  width: 384px;
  display: inline-block;
  vertical-align: top;
    margin: 0 32px;
    text-align: center;
}
div.modusPathwayIconLinks a{
  display: inline-block;
  margin: 0 16px 16px 16px
}
div.modusPathwayIconLinks a{
  width: 84px;
  border: 1px solid var(--ui-borders-color);
  padding: 10px;
  border-radius: 10px;
  text-align: center;
}
div.modusPathwayIconLinks a i {
  font-size: 64px;
  padding-bottom: 6px;
}


div.modusDashSearchBar {
  text-align: center;
  margin-bottom: 8px;
}
div.dashGallery img{
  max-width: 120px;
}
div.dashGallery>a{
  display: inline-block;
}
.modusLinksList a {
  color: var(--text-color);
  display: block;
  padding: 0.125em;
}
.modusLinksList a:has(i.fa-fw){
  padding-left: 1.5em;
}
.modusLinksList a i.fa-fw{
  margin-left: -1.55em;
}
.modusLinksList h2{
  cursor: pointer;
}
.modusLinksList div{
  margin-left: 1em;
}
.modusLinksList a:hover {
  background-color: var(--selected-color);
}

div.dialog div.modusLinksList a {
  font-size: 1.2em;
}

/* @end */
/* @group Object History Items */
table.modusObjectHistory tbody {
  border-bottom: 1px solid var(--ui-borders-color);
  border-left: 1px solid var(--ui-borders-color);
}

table.modusObjectHistory tr:nth-child(2n) {
  background-color: var(--background-color-alt);
}

table.modusObjectHistory td {
  padding: 3px 6px;
  border-right: 1px solid var(--ui-borders-color);
}

table.modusObjectHistory th {
  text-transform: uppercase;
  text-align: left;
  font-weight: bold;
  border-bottom: 1px solid var(--ui-borders-color);
  padding: 5px 2px 0px 2px;
}

.fineDiffIns {
  color: #73b83d;
  text-decoration: none;
}

.fineDiffDel {
  color: #528aad;
  text-decoration: line-through;
  padding-right: 0.25em;
}

/* @end */
div.modusTwoCol {
  column-count: 2;
  column-gap: 8px;
  margin-bottom: 2em;
}

table.modusFormColumn {
  float: left;
  margin-right: 60px;
}

div.modusTwoCol table tr {
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  -ms-column-break-inside: avoid;
  break-inside: avoid;
}

div.modusFormButtons {
  clear: left;
  text-align: right;
  max-width: 1024px;
}

div.modusViewFormButtons {
  margin-top: 2em;
  padding-left: 36px;
}

h2.modusDisclosureToggle {
  cursor: pointer;
  padding-top: 0.75em;
}

div.modusDisclosureArea {
  border: 0px;
  padding: 12px;
  margin-bottom: 12px;
}

div.modusDisclosureArea h2 {
  padding-left: 40px;
}

div.modusDisclosureArea div.modusDisclosureArea {
  border: 1px solid var(--ui-borders-color);
  min-width: initial;
  margin-left: calc(40px + 1em);
}

div.modusSavedReportList {
  margin-top: 1em;
  min-width: 320px;
  max-height: 480px;
  overflow: auto;
  white-space: nowrap;
}

div.modusSavedReportList a:hover {
  background-color: var(--link-control-color);
  color: var(--background-color);
}

div.modusSavedReportList a.fas:hover {
  background-color: var(--background-color);
  color: var(--link-control-color);
}

div.modusSavedReportList h2 {
  margin: 6px 0;
}

div.modusSavedReportList div {
  padding-left: 12px;
}

div.modusSavedReportList div > div {
  padding-left: 6px;
}

div.bbxFieldObjectContainer {
  display: inline-block;
}

div.bbxFieldSetContainer input,
div.bbxFieldSetContainer textarea,
div.bbxFieldSetContainer select {
  vertical-align: top;
}

div.bbxFieldTinyMCE,
div.bbxFieldKendoEditor {
  border: 1px solid var(--ui-borders-color);
  padding: 2px;
  min-height: 1.5em;
  width: 300px;
  height: 128px;
  white-space: normal;
  overflow: auto;
}

textarea.tinymce {
  width: 300px;
}

/* @group TinyMCE UI Tweaks */
.mce-ico {
  font-size: 12px !important;
  line-height: 12px !important;
  width: 12px !important;
  height: 12px !important;
}

.mce-btn button {
  padding: 2px 5px !important;
  font-size: 12px !important;
}

/* @end */
/* @group Help Page */
div.modusHelpList {
  float: left;
  margin-right: 36px;
}

div.modusHelpList a {
  display: inline-block;
}

.recentlyModified {
  color: var(--modified-record-color);
}

.recentlyNew {
  color: var(--new-record-color);
}

div.modusHelpList h2 {
  margin-top: 0.5em;
}

div.modusHelpList a.fa-square-plus {
  margin-top: 0.5em;
}

div.modusHelpCommentsLink {
  padding-top: 2em;
  clear: both;
  position: absolute;
}

div.modusHelpCommentsLink i.fa {
  color: #a6aaa9;
}

div.modusHelpCommentsLink a {
  font-weight: bold;
  display: block;
}

#modusHelpSendComment {
  float: left;
}

/* @end */
/* @group Inline Help */
a.modusHelpIcon {
  display: inline-block;
}

a.modusHelpIcon:before {
  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "FontAwesome";
  content: "\f059";
  color: var(--text-color);
  opacity: 0.5;
}

div.modusInlineHelp {
  position: absolute;
  margin-left: 20px;
  margin-top: -24px;
  border: 1px solid var(--ui-borders-color);
  padding: 12px;
  border-radius: 3px;
  background: var(--translucent-background-color);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10;
  max-width: 400px;
  line-height: 1.5;
}

div.modusInlineHelp > i.fa-caret-left {
  position: absolute;
  top: 2px;
  left: -9px;
  font-size: 24px;
  color: var(--text-color);
  opacity: 0.5;
}

/* @end */
div.folderAdminReports {
  margin-left: 50px;
  padding: 10px;
  width: 300px;
  border-radius: 6px;
}

div.folderAdminReports.highlight {
  background-color: var(--selected-color);
}

div.folderAdminReports div {
  cursor: move;
  padding: 2px;
}

div.dragPill {
  padding: 2px 4px;
  border-radius: 3px;
  background-color: var(--main-color);
}

div.dragPill,
div.dragPill a {
  color: var(--background-color);
}

div.dragPill a.fa {
  display: none;
}

/* Data cetric times */
.styleDropped {
  text-decoration: line-through;
}

.styleNoBuys {
  opacity: 0.75;
  font-style: italic;
}

#screenWatermark {
  position: fixed;
  left: 4px;
  bottom: 0;
  opacity: 0.85;
  z-index: 100;
}

@media print {
  .hideonprint,
  #menuBar,
  .menu {
    display: none;
  }
  body {
    color: #000;
    background-color: #fff;
  }
}
@media (max-width: 430px) {
  #userInfo {
    display: none;
  }
  #screenWatermark{
    display: none;
  }
  #modusMobileMenu {
    display: block;
    padding: 10px;
    font-size: 40px;
  }
  #menuBar {
    position: fixed;
    left: 0;
    background-color: var(--background-color);
    border: 1px solid var(--ui-borders-color);
    border-bottom: none;
    font-size: 1.5em;
    text-transform: none;
  }
  #menuBar a {
    display: block;
    padding: 0.75em 1.25em;
    border-bottom: 1px solid var(--ui-borders-color);
  }
  .menu {
    margin-top: 0px;
    margin-left: 0px;
    font-size: 20px;
  }
}