/*
//Copyright 2017 Made Headway Limited
//
// Background Colour: #ff773c
// Dark Colour:       #454554
// Light Colour:      #DEDEED
*/



img {
  border: 0;
}

html {
  /*overflow-y:scroll; */
  /*Why? */
}

body {
  /*font-family: 'Arial', Sans;*/
  font-size: 14px;
  margin: 0;
  padding: 0;
  background-size: cover;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

span {
  min-height: 1px;
}

input[type="text"],
input[type="password"] {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

label input[type="radio"] {
  position: relative;
  top: 2px;
}

input.text,
textarea,
select {
  font-size: 14px;
  padding: 1px 1px 1px 1px;
  border-top: 1px solid #777;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ddd;
  background-color: #fff;
  resize: none;
}

table {
  border-collapse: collapse;
}

td {
  vertical-align: top;
  font-size: 14px;
}

hr {
  border: 0;
  width: 95%;
  height: 1px;
  color: #DEDEED;
  background-color: #DEDEED;
}


textarea {
  height: 90px;
  font-family: 'Arial', Sans;
  font-size: 14px;
  line-height: 1.4em;
}




select {
  position: relative;
  top: -2px;
}

/* Unselectable elements */
.noSel {
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.sel {
  cursor: text;
  -webkit-touch-callout: text;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  -o-user-select: text;
  user-select: text;
}

a,
a:link {
  color: #10A;
}

.entry-content a:link,entry-content a {
  color: #10A !important;
}

a:link:hover {
  color: #33F;
}


/* MHOS Styling */
.tabset {
  position: relative;
  cursor: pointer;
  margin-left: 8px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.tabset .tab {
  position: relative;
  top: 3px;

  /*border-left: 3px solid #888;
  border-top: 3px solid #888;
  border-right: 3px solid #888;

  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  
  background-color: #888;
  color: #FFF;
  */
  
  display: inline-block;
  font-weight: 500;
  padding: 2px 6px;
  margin: 0px 2px;
  text-decoration: none;

  cursor: pointer;
}

.tabset .tab.selected {
  /*color: #000;
  background-color: #FFF;
  border-bottom: 3px solid #FFF;*/
  font-weight: bold;
}

.tabContents {
  border: 3px solid #EFEFEF;
  margin-bottom: 6px;
  overflow-y: auto;
  max-height: 60vh;
}

.tabContents .tabContent {
  background-color: #FFF;
  color: #000;
  display: none;
  /*open tab overrides*/
  padding: 8px 8px 8px 8px;
}

.tabContents .tabContent.selected {
  display: block;
  max-height: 60vh;
}

.tabContent {
  /* min-height: 300px; */
}

.mini .tabContent {
  min-height: inherit;
}

.topSurround {
  min-height: calc(100vh - 2em - 24px);
  padding-bottom: 16px;
}

.headerContent {
  margin: 0px;
  border-bottom: 3px solid #454554;
  background-color: #FFF;
  padding: 0px;
}

body.Start .bodyContent {
  max-width: 500px;
  margin-top: 80px;
}

.bodyContent {
  margin: 16px auto 0px;
  width: 95%;
  max-width: 1640px;
}

.footerContent {
  padding: 0px 0px 4px 0px;
  border-top: 4px solid #454554;
  background-color: #FFFFFF;
}

.header {
  min-height: 98px;
  position: relative;
  width: 95%;
  max-width: 1640px;
  margin: 0 auto;
}

.headerLogo {
  width: 256px;
  padding: 8px 0 4px 0;
}

.prebody {
  background-color: #FFF;
  border-bottom: 2px solid #454554;
  height: 2px;
  overflow: hidden;
}

.userNote {
  color: #454554;
  float: right;
  padding: 8px 10px 4px;
  line-height: 25px;
}

.logoutBtn {
  float: right;
  margin-top: -4px;
  margin-left: 6px;
}

#logoutProgressInner {
  border-right: 1px solid #AAA;
  background-color: #8AF;
  margin: 0;
  padding: 0;
  height: 16px;
}

#logoutProgressOuter {
  border: 2px solid #666;
  height: 16px;
  width: 96%;
  margin: 10px auto;
  background-color: #FFF;
  padding: 0;
  overflow: hidden;
}


.footer {
  text-align: center;
  color: #111;
}

.footerCredit {
  color: #666;
  line-height: 2em;
}

.clearer {
  clear: both;
}


/* Start screen */
.userChoice {
  display: inline-block;
  width: 140px;
  height: 65px;
  vertical-align: middle;
  line-height: 65px;
  text-align: center;
  border: 1px solid #AAA;
  margin: 24px 16px;
  cursor: pointer;

  background-color: #DDD;
}

.userChoice:hover {
  background-color: #888;
  color: #FFD;
}

.sectionContent {
  padding: 15px 0;
  background-color: #FFF;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.validIdentities {
  text-align: center;
}

.loginBox {
  width: 80%;
  margin: 16px auto;
  text-align: center;
}

.loginTableField {
  text-align: right;
}

.centreTable {
  margin: 8px auto;
}

.centreTable td {
  padding: 8px 10px;
  /*border:1px solid #DDD;*/
}

.optionList a {
  color: #000 !important;
  background-color: #DDD;
  display: block;
  border: 1px solid #888;
  font-style: normal;
  margin: 24px auto;
  width: 80%;
  height: 65px;
  line-height: 65px;
  vertical-align: center;
  text-align: center;
  text-decoration: none;
}

.optionList a:hover {
  background-color: #888;
  color: #FFD !important;
}

.ral {
  text-align: right;
}

.cal {
  text-align: center;
}


div.error {
  background-color: #FDD;
  border: 2px solid #454554;
  margin: 8px 8px;
  padding: 4px;
  text-align: center;
  /*border-radius: 8px;*/
}

div.message {
  background-color: #DEDEED;
  border: 2px solid #454554;
  margin: 8px 8px;
  padding: 4px 0px;
  text-align: center;
  border-radius: 8px;
}

.staticContentAnnotation {
  width: 98%;
  background-color: #DEDEED;
  border-top: 2px solid #454554;
  border-bottom: 1px solid #454554;
  margin: 8px 0px;
  padding: 4px 1%;
  text-align: right;
}

.centreTable tr.head td {
  background-color: #DDD !important;
  color: #000 !important;
  font-weight: 400;
  text-align: center;
  border: 1px solid #FFF;
  border-bottom: 1px solid #666;
  cursor: normal !important;
}

.centreTable tr.even td {
  background-color: #EEE;
}

.searchResults .centreTable tr:hover td {
  cursor: pointer;
  background-color: #888;
  color: #FFF;
}

tr.underlined td {
  border-bottom: 2px solid #666;
}

#autocompleteOutput {
  margin: 8px 16px;
  padding: 8px;
}


/* Status styling */
.topSection {
  padding: 0px 1% 24px 1%;
}

.regionRow {
  clear: both;
}

.region {
  background: #fff none repeat scroll 0 0;
  /* border: 1px solid #454554; */
  border-radius: 10px;
  margin: 0px 1% 0px 1%;
  overflow: hidden;
  vertical-align: top;
  white-space: normal;
  width: 60vw;
  display: flex;
  flex-direction: column;
  /* width: 94vw; */
}

.region .region {
  background-color: #DCC;
}

.region .title {
  font-size: large;
  font-weight: bold;
  padding: 25px 30px 10px 30px;
}


.sensibleTable tr.hd td {
  font-weight: 400;
  border-bottom: 1px solid #444;
  background-color: #EEF;
}

.sensibleTable tr.hd2 td {
  font-weight: 400;
  border-bottom: 1px solid #444;
  background-color: #EEF;
}

.sensibleTable {
  width: 100%;
  margin-bottom: 12px;
}

.sensibleTable td {
  padding: 4px;
}

.sensibleTable tr.even td {
  background-color: #DDE;
}

.dataColumnLeft {
  border-left: 1px solid #999;
  padding-left: 8px;
  text-align: right;
}

.dataColumnRight {
  border-right: 1px solid #999;
  padding-right: 8px;
}

.toursContainer {
  min-height: 200px;
  max-height: 360px;
  margin: 12px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-right: 20px;
}

.alertsContainer,
.patchContainer {
  height: 200px;
  margin: 12px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-right: 20px;
}

.clickShield.dragManager {
  background-color: rgba(0, 0, 0, 0) !important;
}

.clickShield {
  /* background-color: rgba(160, 160, 180, 0.4); */
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 20;
  pointer-events: all;
}

.buggyBrowser .clickShield {
  background-color: rgba(255, 255, 255, 0.25);
}

.clickShield.dragManager {}

.dragWrap {
  display: block;
  position: absolute;
  overflow: visible;
  width: 1px;
  height: 1px;
}

.dragWrap * {
  cursor: grab;
}

.dialogContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: visible;
}

.dialog {
  position: absolute;
  box-shadow: 1px 1px 10px gray;

}

.dialog .content {
  max-height: 80vh !important;
  overflow-y: hidden;
  overflow-x: hidden;
  padding: 20px 15px;
}

.dialog .controls {
  padding: 10px 10px 15px 30px;
}

/* Menus */

#dynamic-menu,
#dynamic-menu div.topmenu {
  display: inline;
}

#menuLegend td {
  padding: 4px;
  vertical-align: middle;
}

.menuControl {
  width: 32px;
  padding: 0px 0px 2px;
  position: relative;
  top: 2px;
}

.linkList {
  position: absolute;
  bottom: -3px;
  right: 4px;
}

.linkList a,
.linkList .topmenu>div.menuItem {
  border-left: 3px solid #454554;
  border-top: 3px solid #454554;
  border-right: 3px solid #454554;
  border-bottom: 3px solid #454554;

  border-top-left-radius: 5px;
  border-top-right-radius: 5px;

  display: inline-block;
  background-color: #454554;
  color: #FFF;
  font-weight: 400;
  padding: 2px 6px;
  margin: 0px 2px;
  text-decoration: none;
}

.linkList a.current,
.linkList div.menuItem.current {
  border-bottom: 3px solid #FFF;
  background-color: #FFF !important;
  color: #454554;
}

.linkList a:hover,
.linkList .menuItem:hover {
  transition: background .2s, color .2s;
  background-color: #EFEFEF;
  color: #454554;
}

/* Week selector */
#weekChoice {}

#weekChoice .week {
  border: 1px solid #CCC;
  background-color: #EEE;
  padding: 4px;
  margin: 1px;
  cursor: pointer;
  text-align: middle;
}

#weekChoice .week.selected {
  border: 1px solid #000;
  background-color: #AAA;
}

#weekControl {
  text-align: center;
}


#dayChoice .day {
  float: left;
  width: 40px;
  height: 20px;

  border: 1px solid #CCC;
  background-color: #EEE;
  padding: 4px;
  cursor: pointer;
  text-align: middle;
}

#dayChoice .day.selected {
  border: 1px solid #000;
  background-color: #AAA;
}

#dayChoice .day.other {
  background-color: #99C;
}

#dayChoice .day.colhead {
  text-align: center;
  background-color: #FDA;
  border: 1px solid #FFF;
  border-bottom: 2px solid #222;
}

#dayChoice .day.colhead.wkend {
  background-color: #FFA;
}



#dayChoice {
  width: 354px;
  margin: 2px auto;
}

.dlgContent {
  margin: 2px 16px 8px;
}

.objectDataTable {
  width: 100%;
  /* width: 95%; */
  /* margin: 0 auto; */
}

.objectDataTable select,
.objectDataTable input[type="text"],
.objectDataTable input[type="password"],
.objectDataTable textarea,
.objectDataTable .combo {
  width: 100%;
}

.objectDataTable .combo {
  margin-top: -4px;
  border: 1px solid #AAA;
  margin-right: 8px;
}

.objectDataTable button.emailable,
.objectDataTable button.dialable,
.objectDataTable button.textable,
.objectDataTable button.webable {
  position: relative;
  top: -6px;
  height: 30px;
  width: 32px;
  padding: 0;
}

.objectDataTable button.dialable {
  background: #FFF url('/images/phone.png') no-repeat 50% 50%;
}

.objectDataTable button.textable {
  background: #FFF url('/images/txt.png') no-repeat 50% 50%;
}

.objectDataTable button.webable {
  background: #FFF url('/images/web.png') no-repeat 50% 50%;
}

.objectDataTable button.emailable {
  background: #FFF url('/images/email.png') no-repeat 50% 50%;
}

.objectDataTable button.emailable:hover,
.objectDataTable button.textable:hover,
.objectDataTable button.webable:hover,
.objectDataTable button.dialable:hover {
  background-color: #454554;
}

.objectDataTable .flr {
  text-align: right;
  width: 35px;
  float: right;
}

.objectDataTable .fll {
  margin-right: 38px;
}

.objectDataTable .flr2 {
  text-align: right;
  width: 70px;
  float: right;
}

.objectDataTable .fll2 {
  margin-right: 73px;
}

.objectDataTable textarea {
  height: 118px;
}

.objectDataTable input[type="file"] {
  width: 190px;
}

.objectDataTable input[type="text"].sliderValue {
  width: 64px;
  text-align: center;
  background-color: #EEE;
  margin-right: 32px;
}

.objectDataTable .ui-slider {
  display: inline-block;
  width: 360px;
}

.crossTable {
  height: 120px;
  overflow-y: scroll;
  overflow-x: auto;
  border: 2px solid #AAA;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  padding: 4px;
}

.crossTable .children {
  margin-left: 10px;
  padding-left: 21px;
  position: relative;
}

.crossTable .children:after {
  position: absolute;
  content: '';
  border-left: 1px solid #444;
  left: 0px;
  width: 1px;
  top: 0px;
  bottom: 10px;
}

.crossTable .line {
  position: relative;
  white-space: nowrap;
}

.crossTable .children .line:before {
  position: absolute;
  content: '';
  border-top: 1px solid #444;
  left: -21px;
  width: 18px;
  top: 11px;
  height: 1px;
}

.crossTable .lineContent {
  display: inline-block;
  vertical-align: top;
  white-space: normal;
}

.crossTable .lineContent:hover {
  background-color: #EEE;
}

.crossTable.CandidateLanguage {
  height: 106px;
  margin-bottom: 4px;
}

.crossTable.CandidateSource,
.crossTable.JobSource {
  height: auto;
  overflow-y: inherit;
  overflow-x: inherit;
  border: 1px solid #EFEFEF;
}

.objectDataTable div.field {
  clear: both;
}

div.field.required .label,
div.field.required .labelFull {
  color: #C00;
}

.objectDataTable div.label {
  float: left;
  padding: 2px;
  width: 200px;
  display: inline-block;
  vertical-align: top;
}

.objectDataTable div.value {
  margin-left: 202px;
  vertical-align: top;
  padding: 2px;
}

.objectDataTable textarea {
  border: 1px solid lightgray;
  padding: 4px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  box-shadow: 0px 0px 4px 0px #0000001f !important;
}

.objectDataTable div.labelValue {
  padding-left: 32px;
}

.objectListingContainer {
  overflow-x: auto;
  margin-top: 0.5rem;
  border: solid 1px lightgrey;
  box-shadow: 0px 0px 10px 0px #0000001f;
  border-top: none;
  border-left: none;
}

.objectListingTable.head {
  display: inline-block;
  margin: 12px 0px 0 0px;
  /* margin: 12px 0px -6px 0px; */
  /* border: 1px none; */
  overflow: hidden;
  z-index: 10 !important;
}

.objectListingTable table thead {
  background-color: #efefef;
  color: #FFF;
  position: sticky;
  top: 0;
  z-index: 1;
}

.objectListingTable table tbody {
  z-index: 1;
}

.objectListingTable table thead tr {
  border: none;
  box-shadow: inset 0px 0px 0px 1px lightgray;

}

.objectListingContainer div.head {
  display: none
}

.objectListingContainer div.data {
  min-width: 100% !important;

}

.objectListingTable.head td {
  overflow: hidden;
}

.objectListingTable.data {
  display: inline-block;
  margin: 0px 0px 12px 0px;
  /* border: 1px solid #888; */
  max-height: 400px;
}

.objectListingTable.data {
  overflow-y: auto;
  overflow-x: hidden;
}

.objectListingTable.data table {
  width: 100%;
}

.objectListingTable td {
  height: 26px;
  vertical-align: middle;
  padding: 7px;
  cursor: pointer;
  border: none;
}

.objectListingTable.data td {
  height: 26px;
  /*min-width:64px;*/
  white-space: nowrap;
}

.objectListingTable.head td {
  padding: 4px 4px;
}

.objectListingTable table {
  border: none;
}

.objectListingTable tr {
  transition: all .2s;
}

.objectListingTable th {
  padding: 0 !important;
  color: #1a1c1e;
  text-align: left;
  font-size: xx-small;
  border: none;
  cursor: pointer;
}

.objectListingTable td {
  font-size: x-small;

}

.objectListingTable tr td:last-child {
  border-right: 0px none;
}


.objectListingTable tr.selected a {
  color: #FFF !important;
}

.objectListingTable tr.selected a:hover {
  color: #000 !important;
}

.objectListingTable tr:nth-child(2n+2) {
  background-color: #f5f5f5;
}

.objectListingTable table tbody tr:hover {
  /* background-color: #d8b4fe; */
  background-color: rgb(245, 184, 53);
}

.objectListingTable tr.selected {
  /* background-color: #c084fc; */
  background-color: rgb(241, 133, 74);
}

.sizeSanitizer {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}


th div.sizeSanitizer {
  padding: 8px 5px !important;
  border-left: solid 1px lightgray;
}

.objectListingTable .preRow,
.objectListingTable .postRow {
  position: relative;
}

.objectListingTable .rowsLoadingPanel {
  position: absolute;
  background-color: #FFF;
  font-style: italic;
  left: 35%;
  width: 30%;
  border: 2px solid #454554;
  border-radius: 5px;
  padding: 8px 16px;
  text-align: center;
}

.fa-circle-xmark {
  font-size: medium;
  color: #ef4444;
}

.fa-circle-check {
  font-size: medium;
  color: #22c55e;
}

.tooltip {
  position: absolute;
  height: auto;
  border: 2px solid #454554;
  background-color: #FFA;
  padding: 4px;
  white-space: normal;
  overflow-y: auto;
  max-height: 200px;
  z-index: 40;
}

.tooltip br {
  margin-bottom: 8px;
}


.pseudoArrayListing {
  overflow-y: scroll;
  height: 128px;
  border: 1px solid #000;
  background-color: #FFF;
  margin: 4px;
  padding: 4px 8px;
}

.configSettings .parameterLine {
  background-color: #EEE;
  padding: 4px 12px;
}

.configSettings .parameterLine:nth-child(2n) {
  background-color: #FFF;
}

.configSettings .parameterLine div {
  display: inline-block;
  vertical-align: top;
}

.configSettings .parameterLine .parameterKey {
  width: 200px;
}

.configSettings .parameterLine .parameterValue {
  width: 70%;
  min-width: 320px;
}

.configSettings .parameterLine .parameterValue input[type="text"],
.configSettings .parameterLine .parameterValue textarea {
  width: fit-content;
}

/* Item display */
.inside {
  margin: 4px 60px;
}

.objectListingTable.ActivityDocument,
.objectListingTable.ActivityComment {
  height: 200px;
}

#historyList {
  max-height: 160px;
  border: 1px solid #000;
  background-color: #FFF;
  overflow-y: scroll;
  padding: 4px;
}

.visibleOnHoverOnly {
  color: rgba(255, 255, 255, 0.1) !important;
}

.visibleOnHoverOnly:hover {
  color: #00F !important;
}



.reportElement {
  display: inline-block;
  vertical-align: top;
  width: 400px;
  margin: 4px;
  padding: 4px 8px;
  border: 1px solid #454554;
  background-color: #FFF;
}

.reportElement h2 {
  text-align: center;
  margin-bottom: 8px;
}

.loading {
  font-weight: normal;
  font-style: italic;
  font-size: 13px;
  text-align: center;
  display: block;
}

.reportPlot {
  height: 392px;
}

.reportData {
  height: 240px;
  margin-top: 16px;
  overflow-y: auto;
  border: 1px solid #EFEFEF;
}

.reportData .objectListingTable {
  width: 100%;
}

@media print {
  .topSection {
    display: none;
  }

  .headerContent {
    display: none;
  }

  .footer {
    display: none;
  }

  .region {
    border: 0px hidden;
    border-radius: 0px;
  }

  body {
    font-size: 12px;
    margin: 0px;
    background-color: #FFF;
  }

  .sensibleTable {
    border: 1px solid #888;
  }

  @page {
    size: auto;
    margin: 10mm;
  }
}

.para {
  padding: 6px 16px 16px;
}

.dashboardElements {
  text-align: center;
  border: 3px solid #454554;
  margin: 4px;
  padding: 4px;
  background-color: #afb7cc;
}

.dashboardElements>* {
  text-align: left;
}

.dashboardElements .objectListingTable tr:hover td {
  background-color: #AAA !important;
  transition: background .2s;
}

.dashboardElements .key {
  width: 16px;
  height: 16px;
  margin: 1px auto;
  border: 1px solid #000;
  border-radius: 4px;
}

.noData {
  padding: 16px;
  margin: 8px;
  border: 1px solid #ddd;
  text-align: center;
  background-color: #EFEFEF;
}

.noData .primary {
  font-size: 16px;
}

.noData .secondary {
  font-style: italic;
}

.progressBarOuter {
  position: relative;
  float: right;
  width: 300px;
  height: 18px;
  vertical-align: middle;
  border: 2px solid #454554;
  border-radius: 5px;
  background-color: #EFEFEF;
  overflow: hidden;
}

.progressBarInner {
  position: absolute;
  width: 0%;
  height: 100%;
  left: 0px;
  top: 0px;
  background-color: #454554;
  overflow: hidden;
}

.progressBarText {
  text-align: center;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 296px;
}

.progressBarText.overlay {
  color: #EFEFEF;
}

.progressBarText.underlay {
  color: #454554;
}


.messagingEngine {
  position: fixed !important;
  z-index: 1000;
  background-color: #EFEFEF;
  bottom: 0px;
  left: 0px;
  padding: 7px 8px;
  border-right: 2px solid #454554;
  cursor: pointer;
}

.messagingEngine.open {
  background-color: #FF0;
}

.messagerDialog {
  position: fixed;
  z-index: 1000;
  bottom: 40px;
  left: 0px;
  border: 2px solid #454554;
  min-width: 400px;
  padding: 8px 16px 8px 8px;
  background-color: #EFEFEF;
}

.messagerDialog .userList {
  border: 2px solid #454554;
  margin: 4px;
  overflow-y: scroll;
  max-height: 30vh;
  background-color: #FFF;
}

.messagerDialog .userList .user {
  padding: 4px;
  cursor: pointer;
}

.messagerDialog .userList .user:hover {
  background-color: #b8b8cc;
}

.messagerDialog .userList .user.selected {
  background-color: #454554 !important;
  color: #FFF;
}

.previousMessages {
  height: 25vh;
  width: 98%;
  margin: 2px auto;
  border: 2px solid #454554;
  overflow-y: scroll;
}

.previousMessages .objectListingTable {
  width: 100%;
}

.previousMessages .objectListingTable td {
  vertical-align: top;
  padding: 10px 4px 4px;
}

.previousMessages .objectListingTable td {
  width: 13%;
}

.previousMessages .objectListingTable tr:hover td {
  background-color: #b8b8cc;
}

.newMessage textarea {
  display: block;
  width: 98%;
  margin: 4px auto;
}

.newMessages {
  position: relative;
  padding-right: 32px;
}

.newMessages:after {
  content: attr(_numMessages);
  border-radius: 18px;
  height: 22px;
  padding: 0px 6px;
  background-color: #454554;
  color: #FFF;
  font-weight: bold;
  text-align: center;
  line-height: 22px;
  vertical-align: middle;
  position: absolute;
  right: 4px;
  bottom: 13%;

  -webkit-transition: background-color 400ms linear;
  -ms-transition: background-color 400ms linear;
  transition: background-color 400ms linear;
}

.newMessages.flash:after {
  background-color: #FF0000;
  -webkit-transition: background-color 400ms linear;
  -ms-transition: background-color 400ms linear;
  transition: background-color 400ms linear;
}

.tabContent .field {
  margin-bottom: 1px;
}

.objectToolbar {
  text-align: center;
}

.objectOverlays {
  position: relative;
  overflow: visible;
  height: 2px;
  margin-bottom: 4px;
}

.overlayContent {
  background-color: #DCDCDC;
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  margin-left: -8px;
  z-index: 2;

  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  border: 3px solid #454554;
}

.workExperienceDropdown {
  margin: 4px 16px 12px;
}

.docsDropdown {
  margin: 4px 16px 12px;
}

/* Audit dialog */
.auditDialog table {
  width: 100%;
}

.auditDialog .changeListing {
  display: inline-block;
  width: calc(50% - 8px);
  padding: 4px 2px 4px 4px;
  border-right: 2px solid #999;
  overflow-y: scroll;
  height: 60vh;
}

.auditDialog .fieldChangeListing {
  display: inline-block;
  width: calc(50% - 8px);
  padding: 4px;
  overflow-y: scroll;
  height: 60vh;
}

.ui-autocomplete-input.invalid {
  color: #600;
  background-color: #FDD;
}

#jobSelectContainer .combo {
  display: block;
  margin: 8px 16px 8px 30px;
  width: 75%;
}

.ordinalAnchor {
  position: relative;
  top: -4px;
  font-weight: bold;
  margin-left: 4px;
  text-decoration: none;
}

.vert {
  display: inline-block;
  margin-left: 12px;
  height: 26px;
  border-right: 2px solid #454554;
  margin-right: 12px;
  vertical-align: middle;
}

/* **** */
/* Object pager */
.objectPager {
  float: left;
}

.objectPager span {
  margin-left: 12px;
  margin-right: 12px;
}

tr.deletedMessage td {
  background-color: #CCC !important;
  color: #FFF;
  text-decoration: line-through;
}

tr.deletedMessage:hover td {
  background-color: #CCC !important;
}

.field textarea {
  resize: vertical;
}

@media only screen and (max-width: 1280px) {
  .reportPlot {
    height: 352px;
  }

  .reportElement {
    width: 360px;
    margin: 4px;
    padding: 4px 4px;
    border: 1px solid #454554;
    background-color: #FFF;
  }

  .inside {
    width: 100%;
    margin: 0px;
  }
}

@media only screen and (max-width: 899px) {
  .inside {
    width: 100%;
    margin: 0px;
  }

  .para {
    padding: 6px 0px;
  }

  .headerLogo {
    padding-top: 6px;
  }
}

@media only screen and (max-width: 960px) {
  .bodyContent {
    width: 99%;
  }

  .header {
    min-height: 50px;
  }

  .userNote {
    margin: 8px 40px 0 0;
  }

  .objectPager {
    float: none;
  }

  .headerLogo {
    margin: 0px auto;
  }

  .linkList {
    position: inherit;
    margin-top: 4px;
    margin-right: 4px;
    bottom: inherit;
    top: inherit;
  }

  .linkList a,
  .linkList .topmenu>div.menuItem {
    display: block;
    border: 3px solid #454554 !important;
    border-radius: 4px;
    margin: 4px;
  }

  .userNote span {
    display: none;
  }



  .centreTable {
    margin: 0;
  }
}


.processingPanel {
  display: inline-block;
  margin: 0px auto;
  width: 300px;
  font-size: 24px;
  font-size: 1rem !important;
  vertical-align: middle;
}

.processingPanel::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border-top: 6px solid #ffb400;
  border-right: 6px solid #ff773c;
  border-bottom: 6px solid #835fff;
  border-left: 6px solid #c34bae;
  animation: spin 2s infinite linear;
  margin-right: 12px;
}

.processingPanel::after {
  content: '...';
  color: #888;
  animation: ellipsis 1.5s infinite linear;
}

.Install .processingPanel {
  display: block;
  margin: 32px auto;
  padding: 16px 0px 8px 32px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  border: 1px solid #888;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes ellipsis {
  0% {
    content: '.';
  }

  50% {
    content: '..';
  }

  100% {
    content: '...';
  }
}


.searchPanel {
  margin:12px 0px 16px 120px;
}

.btn.searchButton,
.analyseButton,
.prepopButton {
  display: inline-block;
  vertical-align:middle;
  width:140px;
  box-sizing:border-box;
}

.prepopButton {
  font-size: 14px;
  padding: 6px 24px;
}

.searchButton:focus,
.analyseButton:focus,
.prepopButton:focus {
  background-color: #000;
  color: #FFF;
}

.searchInput {
  min-width: 250px;
  display:inline-block;
  border: 3px solid #000;
  border-radius: 5px;
  box-sizing:border-box;
  line-height: normal;
  color: #282828;
  display: inline-block;
  width:calc( 100% - 240px );
  box-sizing: border-box;
  font-size: 20px !important;
  padding: 8px 6px;
  padding-left: 12px;
  vertical-align: middle;
}

.searchInput:focus {
  border: 3px solid #5551ff;
}


#content {
  padding: 0px 0px;
  //padding:0px 8px 8px;
}

#menu {
  padding: 8px;
  text-align: center;
  border-top: 1px solid #787887;
}

#menu button {
  margin: 0px 12px;
}

.productTitle::before {
  content: 'Analysing: ';
  font-weight: normal;
}

.productTitle {
  font-size: 1.4em;
  font-weight: bold;
  padding-top: 8px;
}

.searchHeader {
  /*margin-top:16px;*/
}

.searchHeader .similarHeaderTitle {
  font-size: 1.2em;
  padding-bottom: 4px;
  text-align: center;
}

.searchHeader .wholesaleHeader,
.searchHeader .retailHeader {
  display: inline-block;
  vertical-align: top;
  width: calc(50% - 17px);
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
}

.searchHeader .wholesaleHeader {
  //padding-right:4px;
  //border-right:1px solid #DEDEDF;
}

.searchHeader .retailHeader {
  //padding-left:4px;
  //border-left:1px solid #DEDEDF;
}

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


/* */

.searchResults {
  display: flex;
  height: 60vh;
  overflow-y: scroll;
  overflow-x: hidden;
  /*scrollbar-gutter: stable both-edges;*/
}

.wholesaleResults,
.retailResults {
  /*display:inline-block;*/
  display: flex;
  flex-direction: column;
  /*gap: 0.25rem;*/
  vertical-align: top;
  width: calc(50% - 17px);
  flex-grow: 1;
}

.wholesaleResults {
  /*padding-right:4px;*/
  /*border-right:1px solid #DEDEDF;*/
  flex-grow: 1;
}

.retailResults {
  /*padding-left:4px;*/
  /*border-left:1px solid #DEDEDF;*/
}


.productRow {
  //padding-top:4px;
  //margin-top:4px;
  border-top: 1px solid #DEDEDF;
  padding: 16px;
}

.productRow * {
  vertical-align: top;
}

.productRow .left {
  display: inline-block;
  vertical-align: top;
  width: 70px;
  height: 64px;
  text-align: center;
}

.productRow .right {
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 70px);
}

.productRow .constrainedImage {
  max-width: 64px;
  max-height: 64px;
}

.productRow .name {
  font-size: 1.2em;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.productRow .rating {
  position: relative;
  font-size: 0.8em;
  padding: 3px;
  height: 1em;
  background-color: #DEDEDE;
  overflow: hidden;
  text-align: center;
  border-radius: 4px;

  display: inline-block;
  border: 1px solid #000;
  width: calc(50% - 8px);
}

.productRow .rating .ratingBar {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;

  background-color: white;
  mix-blend-mode: difference;
}

.productRow div.viewLink {
  text-align: right;
  display: inline-block;
  font-size: 0.8em;
  margin-top: 2px;
  width: 50%;
  font-style: italic;
}

.productRow div.viewLink a:link {
  color: #888;
  text-decoration: none;
}

.productRow div.viewLink a:link:hover {
  text-decoration: underline;
}

.productRow div.price {
  margin-top: 4px;
}

.message {
  background-color: #FDA;
  margin-top: 12px;
  padding: 4px 8px;

}

.inlay {
  position: relative;
}

#pop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}

#pop.popped {
  opacity: 1;
  pointer-events: all;
  z-index: 2;
}

#popback {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
}

#popover {
  position: absolute;
  top: 1.5px;
  left: 8px;
  width: calc(100% - 18px);
  border: 1px solid #000;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
  background-color: #EFEFEE;
  z-index: 3;
}

.productRow.toScan {
  background-color: #FFA;
}

.productRow.scanning {
  background-color: #ADF;
}


.aiResultTable .header td {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

.aiResultTable td.est {
  color: #090;
  text-align: right;
}

.aiResultTable td.pred {
  color: #08A;
  text-align: right;
}

.aiResultTable .productRow {
  border-top: 0px hidden #FFF;
}

.aiResultTable tr td {
  border-bottom: 1px dotted #DEDEDF;
  padding: 8px 4px;
  vertical-align: middle;
}

.notes>div {
  padding: 8px 12px;
}

.advancedOptions {
  width: 550px;
  padding-top: 4px;
  border-top: 1px solid #DEDEED;
  border-bottom: 1px solid #DEDEED;
  padding-bottom: 4px;
  margin: 12px auto 8px;
}


.selector {
  margin-top: 10px;
  margin-left: 20px;
  font-style: italic;
  cursor: pointer;
}

.selectorDesc {
  margin-left: 32px;
  margin: 6px 0px 6px 32px;
  color: #898998;
}



.popper {
  text-align: right;
  //margin-bottom:8px;
  cursor: pointer;
}

.popper::before {
  //content:"➤";
  display: inline-block;
  position: relative;
  //margin-right:6px;
  //margin-top:8px;
  //font-size:16px;
  transform: rotate(0deg);
  transition: 1s transform;
}

.popper.popped::before {
  transform: rotate(90deg);
}

.poppable {
  text-align: left;
  display: none;
}

.poppable.popped {
  display: block;
}

.header-wrap {
  position: relative;
}



.product-paginator {
  margin-bottom: 12px;
  border-bottom: 1px solid #DEDEDE;
  padding-bottom: 4px;
}

.product-paginator * {
  width: calc(33.3% - 8px);
  display: inline-block;
  margin: 4px;
  text-align: center;
}

.product-paginator button {
  border-radius: 12px;
  border: 1px solid #DEDEDE;
}

.product-paginator .paginator-prev::after {
  content: '<-';
}

.product-paginator .paginator-next::after {
  content: '->';
}

.stage-site-callout {
  color: #FFF;
  font-weight: bold;
  position: absolute;
  top: 16px;
  right: 12px;
  background-color: #F00;
  border-radius: 16px;
  padding: 8px 16px;
}

.avatar {
  background: #e4e4e7;
  color: #27272a !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: relative;
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
  min-width: 40px;
  min-height: 40px;
  border: none !important;
  box-shadow: 0px 0px 10px 0px #0000001f;
  text-decoration: none !important;
  margin-left: 10px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.avatar:hover,
.avatar:focus {
  background: #d1d5db !important;
  text-decoration: none !important;
}

.avatar a:link,
.avatar a:visited,
.avatar a:hover {
  text-decoration: none !important;
}

#primary-menu .menu-active {
  border-bottom: 5px solid #7f56d9 !important;
  background: #e2e8f0 !important;
}

.slideout-menu .menu-active {
  color: var(--base-3);
  background-color: var(--accent-2);
}

#primary-menu ul li.menu-item,
ul.user-sub-menu li.menu-item {
  margin-left: 5px;
  border-radius: 10px 10px 0 0;
  margin-right: 5px;
  border-bottom: 5px solid white;
  box-shadow: 0px 0px 10px 0px #0000001f;
  cursor: pointer !important;
  transition: all 0.3s;
}

#primary-menu ul li.menu-item a,
ul.user-sub-menu li.menu-item a {
  font-size: small;
  background: #f9fafb;
  border-radius: 10px 10px 0 0;
  padding: 10px 10px 5px 10px !important;
  color: black;
  padding-left: 5px;
  padding-right: 5px;
  line-height: normal;
  font-size: small !important;
}

#primary-menu ul li.menu-item {
  background: #f9fafb;
}

/* RJG: Override this; looks better */
#primary-menu {
  min-height:38px !important;
}
#primary-menu > ul > li.menu-item,
#primary-menu > ul > li.menu-item.menu-active {
  background:transparent !important;
  color:#FFF !important;
  box-shadow:none !important;
  border-bottom:none !important;
}
#primary-menu > ul > li.menu-item > a {
  padding-top:5px !important;
  background:transparent !important;
  color:#FFF !important;
}
#primary-menu > ul > li.menu-item.menu-active {
  text-decoration:underline;
}
#primary-menu > ul > li.menu-item:hover {
  text-decoration:underline;
}
/**/

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

.sub-menu {
  background: transparent !important;
  margin-left: -5px !important;
  box-shadow: none !important;
  padding-top: 5px !important;
}

.user-sub-menu {
  background: transparent !important;
  margin-left: -5px !important;
  box-shadow: none !important;
  margin-top: -5.5px !important;
}

.sub-menu a,
.sub-menu li,
.sub-menu ul li,
.user-sub-menu a,
.user-sub-menu li,
.user-sub-menu ul li {
  border-radius: 0 !important;
}

.userMenu {
  /* left: -150px !important;*/
}

.userAvatar {
  cursor: pointer;
  width: 50px;
  height: auto;
  border-radius: 50%;
}

.selectedUserAvatar {
  border: 2px solid;
  box-shadow: 0px 0px 10px 0px #0000003f;
}

.localAvatar {
  width: 40px;
  height: 40px;
}

.main-navigation ul ul {
  right: 0;
}

@media (max-width: 900px) {
  .site-logo {
    display: none;
  }

  .user-sub-menu li a {
    background: white !important;
  }

  .user-sub-menu li {
    background: white !important;
  }

  .userListItem {
    background: white !important;
  }

  .menu-toggle {
    justify-content: flex-start !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
  }

  .gb-container-eae04a8a {
    padding: 40px 10px !important;
  }
}

.flex-grow {
  flex-grow: 1 !important;
}

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

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

table.subscriptions td {
  padding: 5px;
  text-align: center
}

h2.gb-headline {
  margin-bottom: 20px
}

#primary-menu ul li.menu-item:hover {
  border-bottom: 5px solid #7f56d9;
  background: #e2e8f0;
  box-shadow: 0px 0px 10px 0px #0000003f;
}

.productItem {
  position: relative;
}

.productItem:hover .product-view-external {
  display: block !important;
}

.product-view-external {
  position: absolute;
  top: 20px;
  left: 26px;
  display: none !important;
}

.scatterBlock>div {
  display: block;
  width: 100%;
  padding: 8px auto;
}

.legend-group {
  width: calc(25% - 9px);
  display: inline-block;
  margin-left: 12px;
  vertical-align: top;
}

.legend-group:first-child {
  margin-left: 0px;
}

.legend-group-title {
  padding: 8px 12px;
}

.legend-group-callout {
  width: 28px;
  height: 28px;
  border-radius: 32px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
  margin-right: 12px;
  display: inline-block;
  vertical-align: top;
}

.legend-group-title-text {
  display: inline-block;
  vertical-align: top;
  margin-top: 4px;
  width: calc(100% - 40px);
}

.product-column {
  display: inline-block;
  vertical-align: top;
  width: 25%;
  margin-right: 12px;
}

.product-column .legend-group {
  display: block;
  width: initial;
}

.after-product-column {
  display: inline-block;
  vertical-align: top;
  width: calc(75% - 24px);
}

#scatter,
#history {
  margin: 12px 0px 16px;
}

.priceRange,
.saleRange {
  display: inline-block;
  cursor: pointer;
  border: solid 1px gray;
  background-color: #EFEFEF;
  color: #999;
  padding: 4px 16px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);

  margin-right: 12px;
}

.priceRange.selected,
.saleRange.selected {
  background-color: #FFF;
  color: #000;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 4px;
  margin-top: 16px;
}

.scatter-legend {
  margin: 8px 0px 32px;
}

.filter {
  margin-top: 16px;
}

div.grid-container {
  /* max-width: fit-content !important; */
}


/* For right-side product detail panel */
#scatter {
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 260px - 24px);
}

#scatterHoverDetails {
  display: inline-block;
  vertical-align: top;
  width: 260px;
  margin-top: 31px;
  float: right;
}

.MarketAnalysis .productItem img.constrainedImage {
  max-width: 180px;
  max-height: 180px;
  display: block;
  margin: 0px auto;
}

.userMarketplaceSelection {
  display: block;
  margin-top: 0px;
  padding: 0.5rem 0.75rem !important;
  border: 1px solid lightgray !important;
  background: #fff !important;
  color: #374151 !important;
  box-shadow: 0px 0px 4px 0px #0000001f !important;
  font-size: 0.75rem !important;
  min-height: 34px;
}

.userMarketplaceSelection .userMarketplaceOption {
  display: block;
}

.userMarketplaceSelection .userMarketplaceOption input {
  position: relative;
  top: 1px;
}


.mp-select {
  /* text-align: center; */
  display: flex;
  gap: 10px;
}

.mp-select-option.selected {
  background-color: #FFF;
  color: #000;
}

.mp-select-option {
  border: 1px solid lightgray;
  box-shadow: 0px 0px 5px 1px #0000001f;
  cursor: pointer;
  transition: all 0.5s ease;
  background-color: oklch(0.984 0.003 247.858) !important;
  gap: 10px;
  display: flex;
  align-items: center;

  padding: 5px 8px;
}

.mp-select-option:hover {
  background: oklch(0.929 0.013 255.508) !important;
}

.mp-select-option img {
  display: inline-block;
  width: 48px;
  vertical-align: middle;
  opacity: 0.4;
}

.mp-select-option.selected img {
  opacity: 1;
}

.mp-select-option div{
  font-weight: bold;
  font-size: small;
}

.mp-select.mini {
  display: flex;
  gap: 10px;

}

.mp-select.mini img,
.mp-select-option img {
  width: 40px;
}

.mp-select.mini .mp-select-option {
  padding: 5px 8px;
  font-weight: bold;
  font-size: small;
}

.mp-select.mini.tiny .mp-select-option>div {
  display: none;
}

#marketplaceSelectorSlot {
  padding: 1rem 0;
  display: flex;
  justify-content: center;
}

.market-analysis-filters #marketplaceSelectorSlot {
  justify-content: flex-start;
}

.marketplaceImage img{
  box-shadow: 0px 0px 5px 1px #0000001f;
  width: 50px;
  height: auto;
  border: 1px solid gray;
  padding: 1px;
  position: absolute;
  top: 5px;
  right: 0;
}

.searchFlag{
  width: 50px;
  height: auto;
  padding: 0 !important;
  border: 1px solid gray;
  border-radius: 0 !important;
  padding: 1px !important; 
}


.prepopProgress {
  border:1px solid #DDD;
  padding:12px 16px;  
  background-color:#EFEFEF;
}
.prepopProgress .barOuter {
  display:block;
  position:relative;
  height:18px;
  border:1px solid #999;
}
.prepopProgress .barInner {
  display:block;
  position:absolute;
  top:0px;
  left:0px;
  height:18px;
  border-right:1px solid #999;
  background-color:#77F;
  transition:0.4s width;
}
.prepopProgress .status {
  margin:0px 12px 8px;
  text-align:center;
  font-weight:bold;
  font-weight:bold;
}

#trendStatusSummaryPanel {
  vertical-align:top;
  width:50%;
  display:inline-block;
}
#populationStatusPanel {
  vertical-align:top;
  width:calc( 30% - 8px );
  padding-left:8px;
  margin:0px 10%;
  display:inline-block;
}
#populationStatusPanel button {
  display:block;
  margin:auto;
  width:100%;
}

.chatWindow {
  position:fixed;
  bottom:12px;
  right:16px;
  width:46vw;
  background-color:#FFF;
  border:1px solid #000;
  border-radius:4px;
  overflow:hidden;
  padding:4px 8px 4px 36px;
  box-sizing:border-box;
  box-shadow:0px 0px 8px rgba(0,0,0,0.6);
  border-top-left-radius:16px;
  border-bottom-left-radius:16px;
  
  transition:right 0.8s;
  z-index:10;
}

.chatWindow .dragHandle {
  position:absolute;
  top:0px;
  left:0px;
  background-color:#F00;  
  height:100%;
  width:32px;
}

.chatWindow .dragHandle::after {
  content:'AI Assistant';
  display:block;
  position:absolute;
  font-size:16px;
  font-weight:bold;
  white-space:nowrap;
  top:50%;
  left:50%;
  transform: translateX(-50%) translateY(-50%) rotate( -90deg );
  color:rgba(255,255,255,0.8);
}

.chatWindow.hidden {
  right:calc( -46vw + 32px );
}

.chatWindow .loading {
  vertical-align: top;
  margin-left: 12px;
}

.chatWindow .outputPanel {
  max-height:calc( 96vh - 160px );
  min-height:32px;
  overflow-y:scroll;
  border:1px solid #EDEDEF;
  padding:4px 8px;
}
.chatWindow .outputPanel .inputText {
  white-space:pre-line;
  color:#00A;
  margin-bottom:4px;
  border-bottom:1px solid #DEDEDE;
  padding-bottom:4px;
}

.chatWindow .outputPanel .outputText {
  white-space:pre-line;
  margin-bottom:12px;
  padding-bottom:4px;
  font-style:italic;
  border-bottom:1px solid #DEDEDE;
}

.chatWindow .outputPanel .old {
  opacity:0.7;
} 

.chatWindow .inputPanel {
  margin-bottom:55px;
}
.chatWindow .submit {
  position:absolute;
  bottom:8px;
  right:8px;
  
  border-radius:8px;
  background-color:#F00;
  padding:8px 16px;
  border:2px solid #A00;
  cursor:pointer;
  color:#FFF !important;
  
  transition:0.4s;
}

.chatWindow .submit:hover {
  background-color:#FF0;
  color:#A00 !important;
}

.chatWindow .voiceChatBtn {
  position:absolute;
  bottom:8px;
  left:40px;
  
  border-radius:8px;
  background-color:#FFF;
  padding:8px 16px;
  border:2px solid #A00;
  cursor:pointer;
  color:#A00;
  
  transition:0.4s;
}

.chatWindow .aiConfigSurround {
  position:absolute;
  bottom:8px;
  left:200px;
}
.chatWindow .aiConfigBtn {
  display:inline-block;
  margin-right:16px;
  vertical-align:middle;
  border-radius:8px;
  background-color:#FFF;
  padding:8px 16px;
  border:2px solid #A00;
  cursor:pointer;
  color:#A00;
}

.chatWindow .voiceChatBtn.connected {
  background-color:#FF0;
  color:#A00;
}

.chatWindow .voiceChatBtn:hover {
  background-color:#FF0;
  color:#A00;
}

.chatWindow .outputProducts, .assistantMessage .outputProducts {
  margin-bottom:16px;
}

.chatWindow .outputProducts .productItem, .assistantMessage .outputProducts .productItem {
  display:inline-block;
  vertical-align:top;
  width:25%;
}
.chatWindow .productItem img.constrainedImage, .assistantMessage .productItem img.constrainedImage {
  width:100%;
}

.assistantMessage.hideDivs > div {
  visibility:hidden;
}

.assistantMessage .outputProducts {
  margin-top:20px;
}
.assistantMessage .outputProducts .productItem {
  background-color:rgba(0,0,0,0);
  box-shadow:none;
}

.chatWindow .outputReports .reportLink, .assistantMessage .outputReports .reportLink {
  display:inline-block;
  background-color:#EFEFF5;
  border:1px solid #888;
  padding:4px 16px 4px 12px;
  margin-bottom:8px;
  font-size:14px;
  border-radius:10px;
  box-shadow:2px 2px 3px rgba(0,0,0,0.4);
  cursor:pointer;
}

.chatWindow .outputReports .reportLink::before, .assistantMessage .outputReports .reportLink::before {
  content: '📎 ';
}

.mic-button {
  display:inline-block;
  vertical-align:top;
  position:relative;
  width:120px;
  height:120px;
  cursor:pointer;
  
  background-image: url('/images/mic-off-ai3.svg');
  background-size: contain;
  background-repeat: no-repeat;
}
.mic-button.mic-off {
}

@keyframes flash {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

.mic-button.mic-connecting::after
{
  content:'';
  display:block;
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-image: url('/images/mic-on-ai3.svg');
  animation: flash 1.4s infinite;
  background-size: contain;
  background-repeat: no-repeat;
}

.mic-button.mic-on {
  background-image: url('/images/mic-on-ai3.svg');
}

.pageElementsListing .field {
  padding:8px 0px;
  margin: 8px 8px;
  border-top:1px solid #DEDEDE;
}

/* AI Asked for this: */
.ai-highlight {
  position:relative;
}
.ai-highlight::before {
  content:'';
  position:absolute;
  top:-5px;
  left:-16px;
  width:calc( 100% + 32px );  
  height:calc( 100% + 10px );
  border: 3px solid;
  border-color: rgb( var(--ai-chosen-colour) );
  background-color: rgba( var(--ai-chosen-colour), 0.1 );
  box-shadow:2px 2px 3px rgba(0,0,0,0.2);
  border-radius:8px;
  pointer-events:none;
}
.ai-highlight::after {
  position:absolute;
  max-width:40%;
  display:block;
  top:calc( 100% - 10px );
  right:8px;
  content: 'AI: 'var(--ai-annotation);
  color: #000; /*rgb( var(--ai-chosen-colour) );*/
  
  border: 3px solid;
  border-color: rgb( var(--ai-chosen-colour) );
  padding:2px 8px;
  background-color: #FFF;
}


.chatWireframe .chatNode {
  white-space:nowrap;
  position:relative;
}
.chatWireframe .chatNode > * {
  white-space:normal;
  vertical-align:top;
}

.chatWireframe .view {
  overflow:scroll;
  display:block;
  width:100%;
  height:calc( 60vh - 150px );
  border:1px solid #DDD;
  padding:8px 12px;
  box-sizing:border-box;
}

.chatWireframe .chatNodeControls {
  display:inline-block;
  position:relative;
  width:360px;
  background-color:#F5F5FA;
  border:1px solid #DEDEDE;
  padding:4px 8px;
  margin:8px 12px;
  box-shadow:2px 2px 3px rgba(0,0,0,0.2);
}

.chatWireframe .field .label {
  width:100px;
}
.chatWireframe .field .value {
  margin-left:110px;
}

.chatWireframe .chatNodeChildren {
  display:inline-block;  
  margin-left:64px;
}



.chatWireframe .chatNodeControls::after {
  content:'';
  position:absolute;
  top:32px;
  left:-64px;
  width:48px;
  border-bottom:1px solid #666;
}

.chatWireframe .chatNode:first-child > .chatNodeControls::after {
  content:'';
  top:32px;
  left:-80px;
  width:64px;
}

.chatWireframe .chatNode:NOT(:last-child)::after {
  content:'';
  position:absolute;
  top:40px;
  left:-52px;
  width:8px;
  height:calc( 100% + 2px );
  border-left:1px solid #666;  
}

.miniDesc {
  font-size:0.8em;
  color:#666;
  font-style:italic;
  margin:4px 8px;
}





.aiPanel .frontAndCentreChat {
  --boundsColour: #777;
  --backColour: #F5F5F8;

  display:inline-block;
  position:relative;
  overflow:hidden;
  vertical-align:top;
  border-top:3px solid var(--boundsColour);
  border-right:3px solid var(--boundsColour);
  border-bottom:3px solid var(--boundsColour);
  border-top-right-radius:64px;
  border-bottom-right-radius:64px;
  box-sizing:border-box;
  width:calc( 100% - 120px );
  min-height:120px;
  padding-left:50px;
  padding-top:12px;
  padding-right:50px;
  padding-bottom:12px;
  background:var(--backColour);
  box-shadow:2px 2px 3px rgba(0,0,0,0.2);
  transition: 2s background;
}
.aiPanel .frontAndCentreChat::before {
  content:'';
  position:absolute;
  display:block;
  border-left:3px solid var(--boundsColour);
  left:0px;
  top:116px;
  height:100%;
  width:5px;
}
.aiPanel .frontAndCentreChat::after {
  content:'';
  position:absolute;
  display:block;
  left:-42px;
  top:-16px;
  height:146px; /*calc( 100% + 32px);*/
  width:76px;
  border-top:3px solid var(--boundsColour);
  border-right:3px solid var(--boundsColour);
  border-bottom:3px solid var(--boundsColour);
  border-top-right-radius:100px;
  border-bottom-right-radius:100px;
  background-color:#FFF;
}

.aiPanel .frontAndCentreChat.ai-mode-active {
  --boundsColour: #7f56d9;
  background: linear-gradient(245.97deg, #FFB40044 0.11%, #FF762D44 34.04%, #C14BAC44 66.96%, #825FFF44 99.89%);
}

.aiPanel .commenceAIModePanel {
  margin:0px 0px;
}

.commenceAIModeNotes {
  font-size:0.9em;
}
.aiPanel .aiModeSwitchButtonContainer {
  text-align: right;
  margin-right:32px;
}
.aiPanel .aiModeSwitchButtonContainer .btn {
  display:inline-block;
}

.aiPanel {
  margin-top: 12px;
  margin-bottom:8px;
  border-bottom: 2px solid #F5F5F8;
  padding-bottom:18px;
}

.aiPanel .userOptions {
  padding-top:8px;
  margin-top:12px;
  border-top:2px solid #7f56d9;
}

.aiPanel .userOptions .option {
  display:inline-block;
  padding:8px 12px;
  background-color: #FFF;
  border-radius:12px;
  cursor:pointer;
  border:2px solid #666;
  box-shadow:2px 2px 3px rgba(0,0,0,0.2);
}
.aiPanel .userOptions .option:hover {
  background-color: #FFB400;
}
.aiPanel .userOptions .option:NOT(:first-child) {
  margin-left:16px;
}

.aiPanel .userOptions textarea {
  /* AI entry panel */
  background-color:rgba(255,255,255,0.8);
  border: 1px solid #666;
  border-radius:8px;
}

/* Terminal prompt styling */
.terminal {
  color: #42A;
  font-family: Consolas, "Courier New", Courier, monospace;
  font-weight:bold;
  margin-bottom: 12px;
  font-size:16px;
  white-space: pre-wrap;
}

/* Blinking cursor: full block character */
.terminal .term-cursor {
  display: inline-block;
  animation: term-blink 1s steps(1, end) infinite;
  /* The cursor uses the "█" character; inheriting color makes it match the text */
}

@keyframes term-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}




/* HIDE ASSISTANT PANEL */
.chatWindow {
  min-height:100px;
  text-align:center;
}
.chatWindow:NOT(.asAIController) {
  display:none;
}
.chatWindow .dragHandle {
  background-color:#7f56d9;
}
.chatWindow .dragHandle::after {
  content:'AI Config';
}
.chatWindow .outputPanel, .chatWindow .inputPanel, .chatWindow button.submit {
  display:none;
}
.chatWindow .voiceChatBtn, .chatWindow .aiConfigSurround {
  margin-top:8px;
  display:inline-block;
  position:initial;
  margin-right:12px;
}
/* Comment this to restore old functionality */



/* Chat window tables */
.frontAndCentreChat .table-wrapper {
  margin: 2px 0 2px 0;
  visibility:visible !important;
  opacity:1 !important;
}

.frontAndCentreChat table.chat-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.05);
  font-size: 14px;
}

.frontAndCentreChat table.chat-table thead th {
  background: #0f172a;
  color: #e2e8f0;
  text-align: left;
  font-weight: 600;
  padding: 10px 12px;
  letter-spacing: 0.02em;
}

.frontAndCentreChat table.chat-table tbody td {
  padding: 10px 12px;
  border-top: 1px solid #e2e8f0;
  vertical-align: top;
}

.frontAndCentreChat table.chat-table tbody tr:nth-child(even) td {
  background: #f8fafc;
}

.frontAndCentreChat table.chat-table tbody tr:hover td {
  background: #eef2ff;
}

.frontAndCentreChat table.chat-table th,
.frontAndCentreChat table.chat-table td {
  word-break: break-word;
}

h2.gb-headline-text{
  margin-bottom: 10px;
}