:root {
  --core-colour: hsl(219, 77%, 52%);
  --core-colour-rgb: 40, 105, 227;
  --text-on-core-colour: #FFF;

  --text-colour: #505050;
  --text-colour-rgb: 80, 80, 80;
  --disabled-colour: #9a9a9a;
  --disabled-colour-rgb: 154, 154, 154;
  --body-background-colour: #FFF;
  --body-background-colour-rgb: 255,255,255;

  --scroll-bar-thumb-colour: #8f8f8f;

  --light-text-colour: #ADADAD;
  --row-separator-colour: #F2F2F2;
  --light-background-shaded-colour: #f2f2f2;

  --colour-go: #00C400;
  --colour-warning: #EEB600;
  --colour-stop: #E70000;
  --colour-special-action: #0090C4;
  --colour-special-action-rgb: 0, 144, 196;
  --colour-optional-action: #EEB600;

  --colour-text-on-go: #FFF;
  --colour-text-on-warning: #FFF;
  --colour-text-on-stop: #FFF;
  --colour-text-on-special-action: #FFF;
  --colour-text-on-optional-action: #FFF;
}

html {
  height: 100%;
  max-width: 100%;
}

body {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 16px;
  background-color: var(--body-background-colour);
  color: var(--text-colour);
  position: relative;
  min-height: 100%;
  max-width: 100%;
}

html ::-webkit-scrollbar {
  width: 10px;
}

html ::-webkit-scrollbar-track {
  background-color: rgba(var(--core-colour-rgb), 0.20);
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 5px;
  z-index: 999;
}

html ::-webkit-scrollbar-thumb {
  background-color: var(--scroll-bar-thumb-colour);
  box-shadow: -2px 2px 4px 0px rgba(0,0,0,0.25);
  border-radius: 5px;
  cursor: pointer;
}

::placeholder {
  color: var(--light-text-colour);
  opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12 -18 */
  color: var(--light-text-colour);
}

::selection {
  color: var(--text-on-core-colour);
  background: rgba(var(--core-colour-rgb), 0.8);
}

.pageDecorationHolder {
  position: absolute;
  z-index: -1;
  top: 0px;
  left: 0px;
  right: 0px;
  min-height: 100%;
  height: 100%;
  overflow: hidden;
}

h1, h2, h3 {
  font-weight: normal;
  font-size: 30px;
  margin-bottom: 1em;
  margin-top: 0em;
}

h2 {
  font-size: 20px;
  font-weight: bold;
}

h3 {
  font-size: 18px;
}

.hidden {
  display: none;
}

table h1, table h2, table h3 {
  margin-bottom: 0px;
}

table {
  border: none;
  border-collapse: collapse;
}

table.fields {
  line-height: 2.1em;
}

table.fields div.html,
table.fields span.data,
table.fields.smaller {
  line-height: 1.4em;
}

table.fields span.data {
  font-weight: bold;
}

table.fields thead {
  background-color: var(--row-separator-colour);  
}

.centerAlign table.fields {
  width: 100%;
}

table.fields tr > * {
  padding: 5px;
}

table.fields.smaller tr > * {
  padding: 2px;
}

table.fields.smaller td {
  font-weight: 300;
}

table.fields.padded tr > * {
  padding-left: 8px;
  padding-right: 8px;
}

table.fields.padded tr > *:first-child {
  padding-left: 16px;
}

table.fields.padded tr > *:last-child {
  padding-right: 16px;
}

table.fields th {
  font-weight: normal;
}

table.fields th:not([align]) {
  text-align: right;
}

table.fields tbody th label::after {
  content: ':';
}

table.fields td data {
  color: var(--core-colour);
}

table.fields tbody th[data-field-mandatory="yes"] {
  position: relative;
}

table.fields tbody th[data-field-mandatory="yes"]::after {
  display: block;
  position: absolute;
  content: '*';
  top: 0px;
  right: 0px;
  color: var(--core-colour);
}

table.fields tbody td:not([align]) {
  text-align: left;
}

table.fields tr.sectionHeading > * {
  padding-bottom: 1em;
}

table.fields td.spacer {
  width: 2em;
}

table.fields tr.spacer > * {
  height: 1.5em;
}

table.fields.withSections tr:not(.sectionHeading):not(.fileWrapper) > :first-child {
  padding-left: 2em;
}

.text-core-colour,
.text-coreColour {
  color: var(--core-colour);
}

.text-disabled {
  color: var(--disabled-colour);
}

.text-light {
  color: var(--light-text-colour);
}

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

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

button {
  background-color: var(--core-colour);
  color: var(--text-on-core-colour);
  padding: 8px 12px;
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.4);
  border: none;
  border-radius: 6px;
  outline-color: var(--text-colour);
  transition: all 0.3s ease-out;
  margin: 0px;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;  
}

button.hoverButton:not(:hover) {
  background-color: transparent;
  color: inherit;
  box-shadow: none;
  outline-color: transparent;
}

button.flatButton:not(:hover) {
  box-shadow: none;
}

button:not(:disabled) {
  cursor: pointer;
}

button:not(:disabled):hover {
  transition: all 0.1s ease-out;
  filter: brightness(1.1);
}

button:disabled {
  background-color: rgba(var(--disabled-colour-rgb), 0.8) !important;
}

button.withMargins {
  margin: 5px;
}

button.search {
  padding-left: 36px;
  background-image: url(../image/icon_magnifier.svg);
  background-position: 8px center;
  background-repeat: no-repeat;
  min-height: 2.1em;
}

button.search.iconOnly {
  padding-left: 12px;
  min-width: 38px;
}

button.export {
  padding-left: 36px;
  background-image: url(../image/icon_export.svg);
  background-position: 8px center;
  background-repeat: no-repeat;
  background-color: var(--colour-special-action);
  min-height: 2.1em;  
}

button.refresh {
  padding-left: 36px;
  background-image: url(../image/icon_refresh.svg);
  background-position: center;
  background-repeat: no-repeat;
  min-height: 2.1em;  
}

button.refresh:not(:disabled):hover {
  rotate: 90deg;
}

button.export.iconOnly, button.lock.iconOnly, button.refresh.iconOnly {
  padding-left: 12px;
  min-width: 36px;
  min-height: 34px;
}

button.copy.iconOnly {
  background-image: url(../image/icon_copy.svg);;
  background-position: center;
  width: 30px;
  min-height: 30px;
  background-size: 22px;
  background-repeat: no-repeat;
}

button.fileQuickView {
  background-image: url(../image/icon_eye.svg);
  background-position: 6px;
  /* width: 30px; */
  /* min-height: 30px; */
  background-size: 22px;
  padding-left: 34px;
  background-repeat: no-repeat;
}

button.fileQuickView.iconOnly {
  background-position: center;
  padding-left: 26px;
  min-height: 2.1em;
}

button.download + button.fileQuickView.iconOnly {
  margin-left: -12px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  background-color: var(--colour-special-action);
}

button.flag {
  padding-left: 36px;
  background-image: url(../image/icon_flag_white.svg);
  background-position: 8px center;
  background-repeat: no-repeat;
  min-height: 2.1em;  
}

button.transparent:not(:hover) {
  background-color: transparent;  
  color: var(--core-colour);
  box-shadow: none;
}

button.lock {
  background-image: url(../image/icon_lock.svg);
  background-position: 4px center;
  background-repeat: no-repeat;
  background-color: var(--colour-stop);
  background-size: 28px;
}

.smaller {
  font-size: smaller;
}

.light {
  opacity: 0.5;
  font-weight: 300;
}

.heavy {
  font-weight: bold;
}

.fieldWrapper.search + button.search {
  margin-left: 10px;
}

.fieldWrapper.search + button.search.iconOnly {
  margin-left: 2px;
}

.stickToBottom {
  position: sticky;
  bottom: 0px;
  background-color: var(--body-background-colour);
}

.stickToLeft {
  position: sticky;
  left: 0px;
  background-color: var(--body-background-colour);
}

button.pickerChoose {
  padding-left: 8px;
  padding-right: 8px;
}

a:link, a:visited {
  color: var(--core-colour);
  outline-color: var(--core-colour);
  transition: 0.3s ease-out;
}

a:link:hover:not(:disabled) {
  transition: all 0.1s ease-out;
  filter: brightness(1.2);
}

a.noDecoration:link:not(:hover) {
  text-decoration: none;
}

.centered {
  text-align: center;
}

table.centered {
  margin-left: auto;
  margin-right: auto;
}

div.organisationLogo {
  display: inline-block;
  vertical-align: middle;
  background-image: url(../image/Red\ Group\ Solutions\ 2012\ Logo\ -\ Big.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 500px;
  max-width: 100%;
  height: 200px;
}

input,
select,
textarea {
  color: var(--core-colour);
}

input:disabled,
select:disabled,
textarea:disabled {
  color: var(--disabled-colour);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="number"],
input[type="radio"],
figure.signatureField,
textarea,
select {
  border: solid 1px var(--text-colour);
  border-radius: 3px;  
  padding: 8px;
  outline-color: var(--core-colour);
  max-width: 90vw;
}

input[type="datetime-local"] {
  width: 13em;
}

input[type="radio"] {
  display:inline-block;
  appearance: none;
  background-color: transparent;
  border-radius: 50%;
  padding: 4px;
  vertical-align: middle;
  margin: 3px;
  margin-top: -2px;
}

input[type="radio"].select {
  margin-bottom: -2px;
}

input[type="radio"]::before {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--core-colour);
}

input[type="radio"]:checked::before {
  transform: scale(1);
  background-color: var(--core-colour);
}

.text-colourGo input[type="radio"]:checked::before {
  background-color: var(--colour-go);
  box-shadow: var(--colour-go);
}

.text-colourStop input[type="radio"]:checked::before {
  background-color: var(--colour-stop);
  box-shadow: var(--colour-stop);
}

input[type="radio"]:disabled:checked::before {
  background-color: var(--disabled-colour);
  box-shadow: inset 1em 1em var(--disabled-colour);
}

input[type="radio"]:not(:disabled,[readonly]) {
  cursor: pointer;
}

input[type="radio"] + label:after {
  content: "";
  margin-right: 1em;
}

input[type="radio"]:disabled {
  border-color: var(--light-text-colour);
}

input[type="radio"]:disabled + label {
  color: var(--light-text-colour);
  cursor: inherit;
}

div.radioSet {
  display: inline-block;
}

div.radioSet > div.radioButton {
  margin: 2px;
}

div.radioSet > div.radioButton + div.radioButton {
  margin-left: 0px;
}

input.cardExpiry {
  width: 2.5em;
}

input.cardCVN {
  width: 4em;
}

.longField {
  width: 320px;
  max-width: 100%;
}

.extraLongField {
  width: 500px;
  max-width: 100%;
}

@media screen and (max-width: 420px) {
  .longField,
  .extraLongField {
    width: 240px;
  }  
}

.shortField {
  width: 164px;
  max-width: 100%;
}

.veryShortField {
  width: 80px;
  max-width: 100%;
}

span.emailField,
span.telField {
  position: relative;
  display: inline-block;
}

span.emailField input[type="email"],
span.telField input[type="tel"] {
  padding-right: 40px;
}

span.emailField button.icon,
span.telField button.icon {
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  width: 40px;
  border-radius: 0px 3px 3px 0px;
}

hr.invisible {
  visibility: hidden;
  margin: 0px;
  padding: 0.25em 0em;
}

ul.picker {
  padding: 0px;
  margin: 0px;
  list-style: none;
  display: inline-block;
  vertical-align: middle;
  max-width: 640px;  
}

ul.picker li {
  display: inline-block;
  border: solid 1px var(--core-colour);
  border-radius: 3px;  
  padding: 7px 8px;
  outline-color: var(--core-colour);  
  color: var(--core-colour);
  line-height: normal;
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.4);
  margin-top: 4px;
  margin-bottom: 4px;
}

ul.picker li[onclick] {
  cursor: pointer;
  transition: all 0.3s ease-out;
}

ul.picker li[onclick]:hover {
  background-color: rgba(var(--core-colour-rgb), 0.3);
  transition: all 0.1s ease-out;
}

ul.picker li + li,
ul.picker + button.pickerChoose {
  margin-left: 3px;
  margin-top: 4px;
  margin-bottom: 4px;  
}

ul.picker li span.extraInfo,
ul.pickerOptions li span.extraInfo {
  color: var(--light-text-colour);
}

ul.pickerOptions li span.extraInfo {
  font-size: smaller;
}

ul.picker li span.extraInfo::before,
ul.pickerOptions li span.extraInfo::before {
  content: '(';
}

ul.picker li span.extraInfo::after,
ul.pickerOptions li span.extraInfo::after {
  content: ')';
}

ul.pickerOptions {
  padding: 0px;
  margin: 0px;
  list-style: none;
  display: block;
}

ul.pickerOptions li {
  border: solid 1px var(--core-colour);
  border-radius: 3px;  
  padding: 7px 8px;
  outline-color: var(--core-colour);  
  color: var(--core-colour);
  line-height: normal;
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.4);
  margin: 4px 0px;
  cursor: pointer;
}

ul.pickerOptions li.selected {
  border-color: transparent; /*var(--colour-go);*/
  background-color: var(--colour-go);
  color: var(--colour-text-on-go);
}

ul.pickerOptions li.selected span.extraInfo {
  color: var(--colour-text-on-go);
}

ul.pickerOptions li span.label {
  white-space: nowrap;
}

div.pickerOptions button.showMore {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

button.email.icon {
  background-image: url(../image/icon_email.svg);
}

button.phone.icon {
  background-image: url(../image/icon_phone.svg);
}

.colourBody {
  background-color: var(--body-background-colour);
  color: var(--text-colour);
}

.colourGo,
.colourMainAction,
button.addRecord,
button.search {
  background-color: var(--colour-go);
  color: var(--colour-text-on-go);
}

.text-colourGo,
a.text-colourGo,
table.dataTable a.text-colourGo:link,
.tabBar .tab.colourGo:not(.selected) {
  color: var(--colour-go);
}

.colourStop,
button.delete {
  background-color: var(--colour-stop);
  color: var(--colour-text-on-stop);
}

.text-colourStop,
a.text-colourStop,
table.dataTable a.text-colourStop:link,
.tabBar .tab.colourStop:not(.selected) {
  color: var(--colour-stop);
}

.colourWarning {
  background-color: var(--colour-warning);
  color: var(--colour-text-on-warning);  
}

.text-colourWarning,
a.text-colourWarning,
table.dataTable a.text-colourWarning:link,
.tabBar .tab.colourWarning:not(.selected) {
  color: var(--colour-text-on-warning);
}

.colourSpecialAction,
button.undelete {
  background-color: var(--colour-special-action);
  color: var(--colour-text-on-special-action);
}

.text-colourSpecialAction,
a.text-colourSpecialAction,
table.dataTable a.text-colourSpecialAction:link,
.tabBar .tab.colourSpecialAction:not(.selected) {
  color: var(--colour-special-action);
}

.colourClear,
.colourOptionalAction {
  background-color: var(--colour-optional-action);
  color: var(--colour-text-on-optional-action);
}

.text-colourOptionalAction,
a.text-colourOptionalAction,
table.dataTable a.text-colourOptionalAction:link,
.tabBar .tab.colourOptionalAction:not(.selected) {
  color: var(--colour-optional-action);
}

.busy, .busy * {
  cursor: wait !important;
}

.loading {
  cursor: wait !important;
  position: relative;  
}

.loading::before {
  content: '';
  position: absolute;
  z-index: 99;
  background-color: rgba(var(--body-background-colour-rgb),0.8);
  background-image: url(/image/anim_wait_circles.svg);
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-position: top center;
  background-repeat: space;
  background-size: 48vw 100px;  
}

p.loading::before {
  background-size: 48vw 200%;
  background-position: center;
}

.doneAnimation {
  position: relative;
}

.doneAnimation::before {
  content: '';
  position: absolute;
  z-index: 98;
  /* background-color: rgba(var(--body-background-colour-rgb),0.8); */
  background-image: url(/image/anim_done.gif);
  top: 50%;  
  left: 50%;
  width: 50px;
  height: 50px;
  background-position: center;
  background-repeat: space;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translate(-50%, -50%);
}

.pageHeaderBar {
  padding: 20px;
  border-bottom: solid 2px var(--core-colour);
  /*margin-bottom: 20px;*/
}

.pageHeaderBar .organisationLogo {
  width: 250px;
  height: 50px;
  display: inline-block;
  margin-right: 30px;
  background-position: left center;
  max-width: 45vw;
}

@media screen and (max-width: 420px) {
  .pageHeaderBar .organisationLogo {
    width: 180px;
  }
}

.pageHeaderBar .controlButtons {
  float: right;
  line-height: 50px;
  vertical-align: middle;
}

.pageHeaderBar .subTitle {
  float: right;
  font-size: 22px;
  color: var(--light-text-colour);
  /* line-height: 50px; */
  vertical-align: middle;
  /*white-space: nowrap;*/
  margin-right: 15px;
}

.pageHeaderBar h1 {
  display: inline-block;
  vertical-align: middle;
  margin: 0px;
}

table.headerLayout {
  width: 100%;
}

button.menu {
  background-color: var(--body-background-colour);
  position: relative;
  height: 34px;
  width: 34px;
  vertical-align: middle;
  border: none;
  box-shadow: none;
  padding: 2px 0px;
  z-index: 101;
}

/* menu.systemMenu button.menu {
  opacity: 0;
}

menu.systemMenu.open button.menu {
  opacity: 1;
  transition: opacity 0.3s ease-out 0.3s;
} */

button.menu .menuline {
  position: absolute;
  height: 3px;
  background-color: var(--core-colour);
  border-radius: 3px;
  left: 6px;
  right: 6px;
  /* transition: all .3s ease-out; */
  transition: all .3s ease-out .2s;
}

button.menu.closed .menuline.top {
  top: 8px;
}

button.menu.closed .menuline.middle {
  top: 50%;
  margin-top: -1.5px;
  opacity: 1;
}

button.menu.closed .menuline.bottom {
  bottom: 8px;
}

button.menu.open {
  z-index: 101;
}

button.menu.open .menuline.top {
  top: 50%;
  margin-top: -1.5px;  
  rotate: 45deg;
}

button.menu.open .menuline.middle {
  top: 50%;
  margin-top: -1.5px;
  opacity: 0;
}

button.menu.open .menuline.bottom {
  top: 50%;
  margin-top: -1.5px;  
  rotate: -45deg;
  bottom: auto;
}

main {
  padding: 30px 20px;
}

menu.systemMenu {
  position: fixed;
  margin: 0px;
  top: 0px;
  bottom: 0px;
  width: 470px;
  max-width: 100vw;
  max-height: 100vh;
  right: 0px;
  border: solid 1px var(--text-colour);
  background-color: inherit;
  z-index: 100;  
  transition: all .3s ease-out;
  box-shadow: -3px 3px 6px 0px rgba(0,0,0,0.16);
  padding: 0px 0px 76px;
}

menu.systemMenu.closed {
  margin-right: -470px;
}

.systemMenuHeader {
  padding: 20px;
}

.systemMenuHeader .organisationLogo {
  width: 250px;
  height: 50px;
  display: inline-block;
  margin-right: 30px;
  background-position: left center;
}

menu.systemMenu div.menuItems {
  overflow: auto;
  max-height: calc(100% - 90px); /* Account for header space above */
}

li.menuItem {
  margin: 0px;
  padding: 0px;
  display: block;
  position: relative;
  /* border-bottom: solid 1px var(--row-separator-colour); */
}

li.menuItem a {
  display: block;
  text-decoration: none;
  padding: 20px;
  font-size: 18px;
  font-weight: bold;
  color: var(--text-colour);
  transition: all .3s linear;
  filter: brightness(1) !important;
}

li.menuItem::after {
  content: '';
  display: block;
  height: 1px;
  margin-left: 20px;
  margin-right: 20px;
  background-color: var(--row-separator-colour);
}

li.menuItem.on a,
li.menuItem a.on {
  color: var(--core-colour);
}

li.menuItem:not(.on) a:not(.on):hover {
  background-color: var(--core-colour);
  color: var(--text-on-core-colour);
  transition-duration: 0.1s;
}

li.menuItem a.subMenuItem {
  font-size: 15px;
  padding: 10px 20px 10px 40px;
}

li.menuItem .subMenuItems {
  height: 0px;
  overflow: hidden;
  transition: all 0.3s all;
}

li.menuItem.expanded .subMenuItems {
  height: auto;
  transition: all 0.1s all;
}

li.menuItem .expander {
  display: none;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 34px;
  margin-top: -10px;
  right: 30px;
}

li.menuItem.subMenu .expander {
  display: block;
}

li.menuItem .expander::before,
li.menuItem .expander::after {
  content: '';
  position: absolute;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background-color: var(--text-colour);
  left: 0px;
  width: 60%;
  rotate: 45deg;
  border-radius: 2px;
  transition: all 0.3s ease-out;
}

li.menuItem .expander::after {
  left: auto;
  right: 0.5px;
  rotate: -45deg;
}

li.menuItem:not(.on) a:not(.on):hover .expander::before,
li.menuItem:not(.on) a:not(.on):hover .expander::after {
  background-color: var(--text-on-core-colour);
}

li.menuItem.expanded .expander::before,
li.menuItem.expanded .expander::after {
  transition: all 0.1s ease-out;
  rotate: -45deg;
}

li.menuItem.expanded .expander::after {
  rotate: 45deg;
}

li.menuItem a.subMenuItem {
  position: relative;
}

/* li.menuItem a.subMenuItem::before {
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 23px;
  height: 0.5em;
  width: 0.5em;
  border-left: solid 2px var(--core-colour);
  border-bottom: solid 2px var(--core-colour);
  opacity: 0.3;
} */

.systemMenuFooter {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  padding: 20px;
  background-color: inherit;
}

table.dataTable > * > tr > * {
  vertical-align: middle;
  padding: 20px;
}


section.tableSection > header {
  padding-bottom: 18px;
}

table.dataTable > thead {
  background-color: #F2F2F2;
  border-top: solid 1px #ADADAD;
  border-bottom: solid 1px #ADADAD;
  box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.16);
  position: relative;
  z-index: 1;
}

table.dataTable > thead > tr > th {
  font-weight: normal;
  white-space: nowrap;
  background-color: #F2F2F2;
}

table.dataTable > tbody > tr > * {
  background-color: var(--body-background-colour);
  border-bottom: solid 1px #E6E6E6;
  transition: all 0.3s ease-out;
}

table.dataTable > tbody > tr[onclick]:hover > * {
  cursor: pointer;
  background-color: rgba(var(--core-colour-rgb), 0.3);
  transition: all 0.1s ease-out;
}

table.dataTable > tbody > tr:not([onclick]):hover > * {
  background-color: rgba(var(--disabled-colour-rgb), 0.1);
  transition: all 0.1s ease-out;
}

table.dataTable > tbody > tr.selected > * {
  background-color: rgba(var(--core-colour-rgb), 0.15);
}

table.dataTable > tbody > tr.selected {
  outline: solid 3px var(--core-colour);
  outline-offset: -2px;
  border-radius: 60px;
}

table.dataTable.actionSelection > tbody > tr.selected {
  outline: solid 3px var(--colour-special-action);
}

table.dataTable.actionSelection > tbody > tr.selected > * {
  background-color: rgba(var(--colour-special-action-rgb), 0.15);
}

table.dataTable > tbody > tr[data-row-num="Grand Total"][data-record-id="Grand Total"] > * {
  background-color: rgba(206, 206, 206, 1);
}

table.dataTable > tbody > tr[data-row-num="Grand Total"][data-record-id="Grand Total"]:not([onclick]):hover > * {
  background-color: rgba(206, 206, 206, 0.5);
} 

table.dataTable.withSelection > tbody > tr > *:first-child {
  border-top-left-radius: 60px;
  border-bottom-left-radius: 60px;
}

table.dataTable.withSelection > tbody > tr > *:last-child {
  border-top-right-radius: 60px;
  border-bottom-right-radius: 60px;
}

/* table.dataTable.withSelection > tbody > tr > * {
  border-bottom: none;
} */

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

label[for] {
  cursor: pointer;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] + label {
  display: inline-block;
  vertical-align: middle;
  min-height: 26px;
  line-height: 26px;
  padding-left: 32px;
  position: relative;
}

input[type="checkbox"].strong:not(:disabled) + label::before {
  border-color: var(--core-colour);
  border-width: 2px;
  box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.4);
}

input[type="checkbox"]:not(:disabled) + label {
  cursor: pointer;
}

input[type="checkbox"]:not(:disabled) + label:not(.allowWrap) {
  white-space: nowrap;
}

input[type="checkbox"] + label::before {
  content: '';
  color: var(--core-colour);
  background-color: var(--body-background-colour);
  font-size: 20px;
  position: absolute;
  top: 0em;
  left: 0px;
  height: 26px;
  display: inline-block;
  width: 26px;
  text-align: center;  
  vertical-align: bottom;
  margin-right: 0.3em;
  border: solid 1px var(--text-colour);
  border-radius: 4px;  
}

input[type="checkbox"]:checked + label::before {
  content: '✔ ';  
}

input[type="checkbox"].rowSelector:not(:disabled) + label::before {
  color: var(--colour-special-action);
  border-color: var(--colour-special-action);
}

input[type="checkbox"].rowSelector:not(:disabled):not(:checked) + label::before {
  box-shadow: none;
}

input[type="checkbox"]:disabled + label {
  border-color: var(--light-text-colour);
  cursor: inherit;
}

input[type="checkbox"]:disabled + label::before {
  /* color: rgba(var(--core-colour-rgb),0.4); */
  color: var(--light-text-colour);
}

.greenTickBox input[type="checkbox"]:checked + label::before {
  color: var(--colour-text-on-go);
  background-color: var(--colour-go);
  border-color: var(--colour-go);
}

.fieldWrapper {
  display: inline-block;
  position: relative;
  vertical-align: middle;
}

.fieldWrapper > input.search:not(.noClear) {
  padding-right: 30px;
}

button.clearField {
  background-color: var(--light-text-colour);
  height: 18px;
  width: 18px;
  background-image: url(/image/icon_cross_small.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  border-radius: 50%;
  padding: 0px;
  box-shadow: none;
}

input.search + button.clearField {  
  opacity: 0;
  position: absolute;
  top: 50%;
  margin-top: -8px;
  right: 8px;
  transition: all 0.3s ease-out;
}

input.search:not(.empty),
select.search:not(.empty),
ul.picker.searchPicker li {
  outline: solid 3px var(--colour-go);
  border-color: var(--colour-go);
  border-radius: 6px;
  color: var(--colour-go);
}

input.search:not(.empty) + button.clearField {
  opacity: 1;
  transition: all 0.1s ease-out;
}

.dialogBox .content > .sticky:first-child > .search:first-child {
  margin-top: 3px;
}

button.selectAll {
  padding: 8px 6px;
}

article.notification {
  display: table;
  padding: 10px;
  background-color: var(--core-colour);
  color: var(--text-on-core-colour);
  border-radius: 12px;
  margin-bottom: 10px;
}

article.notification:not([data-notification-group=""]) {
  background-color: var(--colour-special-action);
  color: var(--colour-text-on-special-action);
}

article.notification[data-notification-group="SYSTEM"] {
  background-color: var(--colour-stop);
  color: var(--colour-text-on-stop);
}

article.notification a:link,
article.notification a:visited {
  color: var(--text-on-core-colour);
}

article.notification header,
article.notification footer {
  /*font-weight: bold;*/
  text-align: right;
  font-size: 12px;
  /* font-style: italic; */
}

article.notification footer {
  margin-top: 10px;
}

section.tableSection div.showMore {
  padding: 20px;
  text-align: center;
}

button.sortButton {
  padding: 3px;
  background: none;
  box-shadow: none;
  color: var(--text-colour);
  width: 1.2em;
  vertical-align: middle;
}

button.sortButton[data-sort=""] {
  opacity: 0.5;
}

button.largeIcon {
  height: 48px;
  width: 48px;
  padding: 10px;
  background-position: center;
  background-repeat: no-repeat;
}

button.systemMenu {
  margin-left: 10px;
}

button.addRecord.largeIcon {
  background-image: url(/image/icon_add_large.svg);
}

button.information.largeIcon {
  background-image: url(/image/icon_information_white.svg);
  background-size: 75%;
}

button.listRecords.largeIcon {
  background-image: url(/image/icon_search_large.svg);
}

button.listRecordsAdvanced.largeIcon{
  background-image: url(/image/icon_advanced_search.svg);
  background-size: 90%;
}

button + button {
  margin-left: 0.5em;
}

.wrappingElementsContainer button + button {
  margin-left: 0px;
}

footer.pageControls {
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 50;
  padding: 10px 15px;
  border-top: solid 2px var(--core-colour);
  background-color: var(--body-background-colour);
}

footer.pageControls div.status {
  vertical-align: middle;
  display: inline-block;
  margin-right: 1em;
  font-size: smaller;
}

footer.pageControls div.status button {
  vertical-align: baseline;
  margin-left: 1em;
}

body.withPageControlsFooter {
  padding-bottom: 64px;
}

.alertWrapper, 
.dialogWrapper {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(var(--body-background-colour-rgb),0.4);
  z-index: 150;
}

.alertWrapper > .alertBox,
.dialogWrapper > .dialogBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.4);
}

.alertBox,
.dialogBox {
  border: solid 4px var(--core-colour);
  border-radius: 14px;
  background-color: var(--body-background-colour);
  padding: 4px;
  padding-bottom: 10px;
  text-align: center;  
  max-width: 90vw;
}

.dialogBox {
  padding-bottom: 0px;
}

.alertBox > title,
.dialogBox > title {
  display: block;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  background-color: var(--core-colour);
  color: var(--text-on-core-colour);
}

.alertBox > .content,
.dialogBox > .content {
  padding: 10px;
  max-height: 75vh;
  overflow: auto;
  position: relative;
  background-color: var(--body-background-colour);
  border-radius: 7px;
}

.dialogBox > .content {
  padding-top: 0px;
  padding-bottom: 0px;
  border-top: solid 10px var(--body-background-colour);
  border-bottom: solid 10px var(--body-background-colour);
}

.dialogBox > .content > button:last-child,
.dialogBox > .content > p:last-child {
  margin-bottom: 7px;
}

.dialogBox > .content > .stickToBottom {
  padding-bottom: 7px;
}

.alertBox .sticky,
.dialogBox .sticky {
  position: sticky;
  top: 0px;
  background-color: var(--body-background-colour);
  margin-left: -10px;
  margin-right: -10px;
  padding-left: 10px;
  padding-right: 10px;
}

.alertBox .sticky.bottom,
.dialogBox .sticky.bottom {
  top: auto;
  bottom: -1px;
  padding-bottom: 5px;
}

.lastUpdated[title]:not([title=""]) {
  cursor: help;
}

a.lastUpdated {
  cursor: pointer !important;
}

td[data-column-uid="MembershipStatus"],
td[data-column-uid="MembershipDisplayStatus"],
td[data-column-uid="OrganisationMembershipDisplayStatus"],
td[data-column-uid="DistributionMembershipDisplayStatus"],
td[data-column-uid="FormattedTimestamp"] {
  white-space: nowrap;
}

header.pageHeaderBar {
  position: sticky;
  top: -15px;
  background-color: var(--body-background-colour);
  z-index: 3;
}

section.tableSection > header {
  position: sticky;
  top: 79px;
  background-color: var(--body-background-colour);
  z-index: 1;
}

.dialogBox section.tableSection > header {
  top: 0px;
}

section.tableSection > .tableWrapper > table.dataTable > thead {
  position: sticky;
  top: 136px;
  z-index: 1;
}

section.tableSection > .tableWrapper > table.dataTable.noSearch > thead {
  top: 115px;
}

.dialogBox section.tableSection > .tableWrapper > table.dataTable > thead {
  position: sticky;
  top: 57px;
  z-index: 1;
}

.dialogBox section.tableSection > .tableWrapper > table.dataTable.noSearch > thead {
  top: 42px;
}

.dialogBox section.tableSection > .tableWrapper > table.dataTable.noHeader > thead {
  top: 0px;
}

td[data-column-uid="conStatus"][data-value="Active"],
td[data-column-uid="MembershipDisplayStatus"][data-value="Active"],
td[data-column-uid="OrganisationMembershipDisplayStatus"][data-value="Active"],
td[data-column-uid="DistributionMembershipDisplayStatus"][data-value="Active"],
td[data-column-uid="MembershipDisplayStatus"][data-value="Financial"],
td[data-column-uid="OrganisationMembershipDisplayStatus"][data-value="Financial"],
td[data-column-uid="DistributionMembershipDisplayStatus"][data-value="Financial"],
td[data-column-uid="PaymentStatus"][data-value="Scheduled"],
td[data-column-uid="PaymentStatus"][data-value="Upcoming"],
td[data-column-uid="scrStatus"][data-value="Approved"],
td[data-column-uid="col_dis_adjType"][data-value="Addition"],
.additionDeduction[data-value="Addition"],
.membershipStatus[data-value="Active"] {
  color: var(--colour-go);
}

td[data-column-uid="MembershipDisplayStatus"][data-value="EXPIRED"],
td[data-column-uid="MembershipDisplayStatus"][data-value="NOT PAID"],
td[data-column-uid="OrganisationMembershipDisplayStatus"][data-value="EXPIRED"],
td[data-column-uid="OrganisationMembershipDisplayStatus"][data-value="NOT PAID"],
td[data-column-uid="DistributionMembershipDisplayStatus"][data-value="EXPIRED"],
td[data-column-uid="DistributionMembershipDisplayStatus"][data-value="NOT PAID"],
td[data-column-uid="PaymentStatus"][data-value="Due"],
td[data-column-uid="PaymentStatus"][data-value="PAUSED"],
td[data-column-uid="scrStatus"][data-value="Submitted"],
.membershipStatus[data-value="EXPIRED"],
.membershipStatus[data-value="NOT PAID"] {
  color: var(--colour-warning);
}

td[data-column-uid="conStatus"][data-value="DECEASED"],
td[data-column-uid="conStatus"][data-value="DELETED"],
td[data-column-uid="conStatus"][data-value="RETIRED"],
td[data-column-uid="conStatus"][data-value="DO NOT CONTACT"],
td[data-column-uid="MembershipDisplayStatus"][data-value="DECEASED"], 
td[data-column-uid="MembershipDisplayStatus"][data-value="CANCELLED"],
td[data-column-uid="MembershipDisplayStatus"][data-value="NOT PAID"][data-extra-value="yes"],
td[data-column-uid="MembershipDisplayStatus"][data-value="NOT PAID (RESTRICTED)"],
td[data-column-uid="MembershipDisplayStatus"][data-value="NOT PAID<br>(RESTRICTED)"],
td[data-column-uid="MembershipDisplayStatus"][data-value="NOT PAID<br>(NO ACCESS)"],
td[data-column-uid="OrganisationMembershipDisplayStatus"][data-value="DECEASED"],
td[data-column-uid="OrganisationMembershipDisplayStatus"][data-value="CANCELLED"],
td[data-column-uid="OrganisationMembershipDisplayStatus"][data-value="NOT PAID"][data-extra-value="yes"],
td[data-column-uid="DistributionMembershipDisplayStatus"][data-value="DECEASED"], 
td[data-column-uid="DistributionMembershipDisplayStatus"][data-value="CANCELLED"],
td[data-column-uid="DistributionMembershipDisplayStatus"][data-value="NOT PAID"][data-extra-value="yes"],
td[data-column-uid="PaymentStatus"][data-value="FAILED"],
td[data-column-uid="PaymentStatus"][data-value="OVERDUE"],
td[data-column-uid="CurrencyPayAmount"][data-extra-value="REFUND"],
td[data-column-uid="scrStatus"][data-value="Invalid"],
td[data-column-uid="col_dis_adjType"][data-value="Deduction"],
.additionDeduction[data-value="Deduction"],
.membershipStatus[data-value="DECEASED"],
.membershipStatus[data-value="CANCELLED"] {
  color: var(--colour-stop);
}

td[data-column-uid="MembershipDisplayStatus"][data-value="EXPIRED"][data-extra-value="yes"],
td[data-column-uid="OrganisationMembershipDisplayStatus"][data-value="EXPIRED"][data-extra-value="yes"],
td[data-column-uid="DistributionMembershipDisplayStatus"][data-value="EXPIRED"][data-extra-value="yes"],
td[data-column-uid="couSalesTaxPerc"][data-value="0.00"], 
td[data-column-uid="couForeignTaxPerc"][data-value="0.00"] {
  color: var(--disabled-colour);
}

table.dataTable a:link {
  color: var(--text-colour);
}

.multiColumnLayout {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: max-content max-content auto;
  /* grid-template-columns: auto auto auto; */
}

.multiColumnLayout.biggerGrid {
  grid-gap: 3em;
}

.multiColumnLayout.twoCols {
  grid-template-columns: max-content max-content;
}

.multiColumnLayout.twoCols.wideFirst {
  grid-template-columns: auto max-content;
}

.multiColumnLayout .layoutColumn {
  max-width: 100vw;
}

.leftAlign {
  text-align: left;
}

.rightAlign {
  text-align: right;
}

.centerAlign {
  text-align: center;
}

@media screen and (max-width: 1640px) {
  .multiColumnLayout {
    grid-template-columns: max-content auto;
  }   

  .multiColumnLayout .layoutColumn.column2 {
    grid-row: 2;
  }

  .multiColumnLayout table.fields > tbody > tr > th:first-child {
    width: 140px;
  }
}

@media screen and (max-width: 840px) {
  .multiColumnLayout,
  .multiColumnLayout.twoCols,
   .multiColumnLayout.twoCols.wideFirst {
    grid-template-columns: max-content;
    /* grid-template-columns: auto; */
  }   

  .multiColumnLayout .layoutColumn.column2 {
    grid-row: auto;
  }

  .multiColumnLayout .layoutColumn.column3 {
    margin-top: 0px !important;
  }

  .hideOnSmallScreen {
    display: none;
  }
}

.dialogBox > button.closeDialog {
  min-width: 2em;
  background-image: url(/image/icon_cross_small.svg);
  height: 1.5em;
  float: right;
  border-radius: 0px;
  border-top-right-radius: 7px;
  box-shadow: none;
  border-left: solid 3px var(--body-background-colour);
}

div.photoWrapper {
  text-align: right;
}

body.pageUser div.photoWrapper {
  float: right;
}

figure.photo {
  display: inline-block;
  height: 278px;
  width: 278px;
  max-width: 100%;
  max-height: 278px;
  border: solid 20px var(--core-colour);
  background-color: var(--body-background-colour);
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 0px;
  text-align: center;
  position: relative;
}

figure.imageField,
figure.signatureField {
  max-width: 100%;
  margin: 0px;
}

div.photoField figcaption {
  display: inline-block;
  width: 278px;
  text-align: center;
  margin-top: 1.2em;
}

div.photoField figcaption h1 {
  margin-bottom: 0.3em;
}

figure.photo button.change {
  position: absolute;
  top: -20px;
  right: -20px;
}

figure.photo button.remove {
  position: absolute;
  bottom: -20px;
  right: -20px;
  /* background-color: var(--colour-stop); */
}

figure.thumbnail {
  display: inline-block;
  height: 50px;
  width: 50px;
  max-width: 100%;
  /*border: solid 3px var(--core-colour);*/
  background-color: var(--body-background-colour);
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 0px;
  text-align: center;
  position: relative;  
  margin-top: -10px;
  margin-bottom: -10px;
}

td.fileUpload input:not(#UploadedFileSize){
  display: none;  
}

div.photoWrapper input {
  display: none;
}

figure.signatureField {
  background-color: var(--body-background-colour);
  padding: 0px;
  width: 380px;
  max-width: 100%;
  height: 100px;
  max-height: 100%;
  overflow: hidden;
}
figure.signatureField .signature {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: var(--body-background-colour);
  padding: 0px;
}

figure.signatureField .signature button {
  right: 3px;
  bottom: 3px;
  position: absolute;
}

/* table.dataTable[data-table-name="Contacts"] [data-column-uid="conFullName"] {
  position: sticky;
  left: 0px;
}

table.dataTable[data-table-name="Contacts"] thead [data-column-uid="conFullName"] {
  z-index: 1;
} */

header.TableViewHeader .searchFieldCell {
  position: sticky;
  left: 0px;
}

.photoColumnGrid {
  display: grid;
  grid-template-columns: auto max-content;
  gap: 2em;
}

@media screen and (max-width: 680px) {
  .photoColumnGrid {
    gap: 0px;
  }
}

.photoColumnGrid > * {
  min-width: 0px;
}

.photoColumnGrid .photoColumn {
  padding-right: 20px;
}

p + p {
  margin-top: 1em;
}

img.alertIcon {
  width: 100px;
  max-width: 100%;
}

div.alertBox img.alertIcon {
  width: 50px;
  min-width: 30px;
}

.centered table {
  margin-left: auto;
  margin-right: auto;
}

table.alertText td.alertMessage {
  padding-left: 1em;
  line-height: 1.5em;
}

.sideNote {
  color: var(--text-colour) !important;
  font-size: small;
  font-weight: normal;
}

.TableViewHeader .extraTableControls {
  white-space: nowrap;
}

button.upload {
  background-image: url(/image/icon_upload.svg); 
  background-repeat: no-repeat;
  background-position: 5px 6px;
  background-size: 20px;
  width: auto;
  margin-top: 2px;
  margin-bottom: 2px;  
}

button.download {
  background-image: url(/image/icon_document.svg); 
  background-repeat: no-repeat; 
  background-position: 8px 7px;
  background-size: 14px;
  width: auto;
  margin-top: 2px;
  margin-bottom: 2px;
}

button.downloadFile[data-file-name=""],
button.downloadFile[data-file-size="0"],
button.downloadFile[data-file-size="0 bytes"],
button.downloadFile[data-file-name=""] + button.clearField {
  display: none;
}

button.downloadFile span[name="UploadedFileSize"]::before {
  content: '(';
}

button.downloadFile span[name="UploadedFileSize"]::after {
  content: ')';
}

button.downloadFile:disabled {
  background-color: rgba(var(--core-colour-rgb),0.7) !important;
  box-shadow: none;
}

a.info::before {
  content: '';
  display:inline-block;
  height: 1em;
  width: 1em;
  margin-right: 0.5em;
  background-image: url(/image/icon_information.svg);
  background-size: contain;
  vertical-align: text-bottom;
}

table.fields.autoCentered {
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

textarea[name="con_notNote"] {
  background-color: LemonChiffon;
}

.tabBar {
  position: relative;
  text-align: center;
  margin-bottom: 2em;
}

.tabBar hr {
  border: none;
  height: 3px;
  width: 100%;
  background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(var(--core-colour-rgb),255) 15%, rgba(var(--core-colour-rgb),255) 85%, rgba(255,255,255,0));
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin-bottom: -3px;
  /* box-shadow: 0px -3px 5px 0px rgba(0,0,0,0.4); */
}

.tabBar .tabs {
  text-align: center;
  position: relative;
  white-space: nowrap;
}

.tabBar .tab {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  box-shadow: none;
}

.tabBar .tab.selected {
  box-shadow: 0px -3px 6px 0px rgba(0,0,0,0.4);
  font-weight: bold;
}

.tabBar .tab:not(.selected) {
  background-color: var(--body-background-colour);
  color: var(--core-colour);
  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4);
}

.tabBar .tab .subText {
  font-size: smaller;
  float: right;
  margin-top: 0.1em;
  margin-left: 0.3em;
}

.tabContainer:not(.selected) {
  display: none;
}

.tabContainer .tabBar .tabs {
  text-align: left;  
}

.tabContainer .tabBar hr {
  background-image: linear-gradient(to right, rgba(var(--text-colour-rgb), 0.4), rgba(var(--text-colour-rgb), 0.4) 50%, rgba(var(--text-colour-rgb), 0)); 
}

section.padded {
  padding: 5px 5vw;
}

article.MembershipCard {
  margin: 10px;
  border-radius: 12px;
  box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.4);
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 0px;
  align-items: stretch;
  justify-content: center;
  width: 500px;
  max-width: 100%;
  overflow: hidden;
}

article.MembershipCard .logoStrip {
  background-color: var(--core-colour);
  color: var(--text-on-core-colour);
  font-size: small;
  text-transform: uppercase;
  padding: 20px;
  line-height: 1em;
  align-content: center;
}

article.MembershipCard .logoStrip img.logo {
  width: 130px;
}

article.MembershipCard .membershipDetails {
  padding: 20px;
  align-content: center;
}

article.MembershipCard .membershipDetails table tr > * {
  padding: 3px 0px;
}

article.MembershipCard .membershipDetails table tr > td {
  padding-bottom: 14px;
  font-size: larger;
}

article.MembershipCard .membershipDetails table th {
  text-align: left;
}

article.MembershipCard .membershipDetails table label {
  font-weight: normal;
  font-size: smaller;
  text-transform: uppercase;
}

article.MembershipCard .membershipDetails table label::after {
  content: ':';
}

.wrappingElementsContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 0.5em;
}

.tableSection .recordCount::before {
  content: '(';
}

.tableSection .recordCount::after {
  content: ')';
}

article.form {
  margin: 20px auto;
  /* box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25); */
  padding: 30px;
  border: solid 1px rgba(0,0,0,0.25);
  border-radius: 20px;
  max-width: 1250px;
}

article.form .formElement:not(:first-child):not(:last-child) {
  margin: 7px 0px;
}

article.form .formElement {
  padding: 10px;
  transition: all 0.1s ease-out;
  position: relative;
  /* overflow: hidden; */
}

article.form .formElement .formElementContentsWrapper {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 10px;
}

article.form.builder .formElement {
  border: dashed 3px transparent;
}

article.form.builder .formElement[data-judge-visible="yes"] {
  background-color: rgb(var(--colour-special-action-rgb), 0.05); /*rgba(153, 0, 0, 0.05);*/
  border-radius: 14px;    
}

article.form.builder .formElement:hover {
  cursor: pointer;
  background-color: rgba(0,0,0,0.03);
  border: dashed 3px rgba(0,0,0,0.4);
  border-radius: 14px;  
  transition: all 0.1s ease-out;
}

article.form .formElementContent {
  grid-column: 1 / span 2;
}

article.form .formElementLabel {
  text-align: right;
  align-self: center;
}

article.form .formElementContent .imageField {
  text-align: center;
}

article.form .formElementLabel:not(:empty)::after {
  content: ':';
}

article.form.builder .formElement .fieldName {
  position: absolute;
  z-index: 2;
  top: 0px;
  left: 0px;
  padding: 4px;
  background-color: var(--body-background-colour);
  font-weight: bold;
  color: var(--core-colour);
  opacity: 0;
  border-radius: 10px;
  transition: display 0s linear 0.3s, opacity 0.3s ease-out;
}

article.form.builder .formElement .judgeVisible {
  position: absolute;
  z-index: 1;
  bottom: 0px;
  right: 0px;
  padding: 4px;
  background-color: rgb(var(--colour-special-action-rgb), 0.05);
  font-weight: normal;
  color: var(--colour-special-action);
  font-style: italic;
  font-size: small;
  /* opacity: 0; */
  border-radius: 10px;
  transition: display 0s linear 0.3s, opacity 0.3s ease-out;  
}

article.form.builder .formElement .judgeVisible::before {
  content: '*Judge Visible*';
}

article.form.builder .formElement .controls {
  position: absolute;
  top: 0px;
  right: 0px;  
  padding: 4px;
  opacity: 0;  
  border-radius: 10px;
  transition: display 0s linear 0.3s, opacity 0.3s ease-out;
  z-index: 10;
}

article.form.builder .formElement .insert {
  position: absolute;
  top: 0px;
  left: 50%;  
  margin-left: -1.5em;
  padding: 4px;
  opacity: 0;  
  border-radius: 4px;
  transition: display 0s linear 0.3s, opacity 0.3s ease-out;
  transform: translate(50%, -50%);
}

article.form.builder .formElement:hover .fieldName,
article.form.builder .formElement:hover .judgeVisible,
article.form.builder .formElement:hover .controls,
article.form.builder .formElement:hover .insert {
  display: block;
  opacity: 1;
  transition: display 0s linear 0s, opacity 0.1s ease-out;
}

article.form.builder .formElement.draggedOver::before {
  content: '';
  display: block;
  position: absolute;
  top: -3px;
  left: 20px;
  right: 20px;
  height: 2px;
  border-top: dashed 2px rgba(var(--core-colour-rgb),0.6);
}

article.form.builder .formElement[data-hidden-element="yes"] {
  opacity: 0.4;
}

article.form .formElement[data-field-mandatory="yes"] .formElementLabel {
  position: relative;
}

article.form .formElement[data-field-mandatory="yes"] .formElementLabel[data-label=" "] {
  align-self: self-start;
}

article.form .formElement.mandatoryFieldText .formElementLabel {
  align-self: self-start; 
}

article.form .formElement[data-field-mandatory="yes"] .formElementLabel::before,
article.form .formElement[data-field-mandatory="yes"] .formElementContent::before {
  display: block;
  position: absolute;
  content: '*';
  top: -4px;
  right: -4px;
  color: var(--core-colour);
}

article.form .formElement[data-field-mandatory="yes"] .formElementContent::before {
  right: auto;
  left: 0px;
  top: 10px;
}

table#Member__MembershipsTable tr[data-row-attribute="Active"] {
  font-weight: 500;
}

table#Member__MembershipsTable tr[data-row-attribute="Active"]:not(:hover) > * {
  background-color: rgba(var(--core-colour-rgb), 0.05);
}

table.dataTable img.flagIcon {
  height: 17px;
}

table.dataTable img.lockIcon {
  height: 30px;
}

header.flagStatus {
  padding: 10px 20px;
}

header.flagStatus img {
  height: 2em;
  vertical-align: middle;
  margin-right: 1em;
}

.flagSelectionGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 120px);
  width: 540px;
  max-width: 80vw;
  gap: 20px;
  /* row-gap: 30px; */
  margin: 20px auto;
  justify-content: center;
}

.flagSelectionGrid .flagSelection {
  width: 100%;
  text-align: center;
  cursor: pointer;
  padding: 20px;
  transition: all 0.3s ease-out;
  border-radius: 20px;  
}

.flagSelectionGrid .flagSelection.selected {
  outline: solid 3px var(--core-colour);
  outline-offset: -2px;
  background-color: rgba(var(--core-colour-rgb), 0.15);
}

.flagSelectionGrid .flagSelection:hover {
  background-color: rgba(var(--core-colour-rgb), 0.3);
  transition: all 0.3s ease-out;
}

.flagSelectionGrid .flagSelection .flagSelectionIcon {
  height: 2em;
  width: 2em;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0px;
  margin-bottom: 0.5em;
  display: inline-block;
  position: relative;
}

.flagSelectionGrid .flagSelection[data-flag="NONE"] .flagSelectionIcon:before {
  content: '';
  position: absolute;
  top: 50%;
  left: -10px;
  right: -10px;
  height: 2px;
  background-color: rgba(0,0,0,0.1);
  rotate: 45deg;
}

.extraEpisodeOptionsHeader{
  width: 100%;
  position: relative;
  z-index: 2;
  top: 23px;
}

.extraEpisodeOptionsHeader #btnNewEpisode{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.extraEpisodeOptionsHeader .newEpisodeButton.seasonSelect{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}

form#frmCollectionImportAssign table.fields td {
    white-space: nowrap;
}

div.controls.stickToBottom {
  z-index: 100;
}

div.controls.stickToBottom::before {
  content: '';
  position: absolute;
  top: 0px;
  height: 20px;
  margin-top: -20px;
  left: 0px;
  right: 0px;
  background-image: linear-gradient(rgba(var(--body-background-colour-rgb),0), rgba(var(--body-background-colour-rgb),1));
}

ul.processStepIndicator {
  display: flex;
  justify-content: center;  
  flex-wrap: wrap;
  list-style: none;
  text-align: center;
  padding: 0px;
  margin: 0px;
}

ul.processStepIndicator li.processStep {
  display: inline-block;
  margin: 4px 0px;
  padding: 0px;
  min-width: 10em;
  position: relative;  
  word-spacing: normal;  
}

ul.processStepIndicator li.processStep:not(:first-child)::before,
ul.processStepIndicator li.processStep:not(:last-child)::after {
  content: '';
  display: block;
  position: absolute;
  left: 0px;
  top: 2em;
  margin-top: -4px;
  height: 4px;
  width: 3.5em;
  background-color: var(--core-colour);
}

ul.processStepIndicator li.processStep:not(:last-child)::after {
  left: auto;
  right: 0px;
}

li.processStep .stepNumber {
  display: inline-block;
  box-sizing: content-box;
  min-width: 1.5em;
  font-size: larger;
  padding: 0.5em;
  border-radius: 50%;
  border: solid 4px var(--core-colour);
}

li.processStep.selected .stepNumber {
  background-color: var(--core-colour);
  color: var(--text-on-core-colour);
  border: solid 4px var(--core-colour);
}

li.processStep .stepLabel {
  display: inline-block;
  margin-top: 0.25em;
}

li.processStep.selected .stepLabel {
  color: var(--core-colour);
}

@media screen and (max-width: 1750px) {  
  /* NOTE: These rules must be replicated immediately below for max-width:1480px but without the body.smallerSooner prefix! */

  body.smallerSooner table.dataTable,
  body.smallerSooner table.fields,
  body.smallerSooner .extraTableControls,
  body.smallerSooner ul,
  body.smallerSooner article.form,
  body.smallerSooner .flagSelectionGrid {
    font-size: smaller;
  }

  body.smallerSooner button.iconOnly,
  body.smallerSooner button.download,
  body.smallerSooner button.upload {
    zoom: 0.91;
  }

  body.smallerSooner table.dataTable > * > tr > * {
    padding: 10px;
  }  

  body.smallerSooner table.dataTable > tbody > tr.selected {
    outline-width: 3px;
    border-radius: 20px;
  }
  
  body.smallerSooner table.dataTable.withSelection > tbody > tr > *:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  
  body.smallerSooner table.dataTable.withSelection > tbody > tr > *:last-child {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
  }  

  body.smallerSooner .flagSelectionGrid {
    width: 470px;
    grid-template-columns: repeat(auto-fill, 100px);
  }

  body.smallerSooner .flagSelectionGrid .flagSelection {
    padding: 10px;
  }

  body.smallerSooner .extraEpisodeOptionsHeader {
    width: 60%;
    top: -22px;
    margin-left: auto;
  }
}

@media screen and (max-width: 1480px) {  
  /* NOTE: These rules must be replicated immediately above for max-width:1750px but with the body.smallerSooner prefix! */

  table.dataTable,
  table.fields,
  .extraTableControls,
  ul,
  article.form,
  .flagSelectionGrid {
    font-size: smaller;
  }

  button.iconOnly,
  button.download,
  button.upload {
    zoom: 0.91;
  }

  table.dataTable > * > tr > * {
    padding: 10px;
  }  

  table.dataTable > tbody > tr.selected {
    outline-width: 3px;
    border-radius: 20px;
  }
  
  table.dataTable.withSelection > tbody > tr > *:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  
  table.dataTable.withSelection > tbody > tr > *:last-child {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
  }  

  .flagSelectionGrid {
    width: 470px;
    grid-template-columns: repeat(auto-fill, 100px);
  }

  .flagSelectionGrid .flagSelection {
    padding: 10px;
  }

  .extraEpisodeOptionsHeader {
    width: 60%;
    top: -22px;
    margin-left: auto;
  }
}