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

/* Reset css */
/* Global styling: */
form, table, td, tr, button, br, img, h1, h2, h3
{   margin: 0;   padding: 0;}
img
{   border: 0;}
html{
     /*overflow-y:scroll; */
     /*Why? */
}
body
{ 
  font-family:'Arial',Sans;
  font-size:14px;
  margin:0;
  padding:0;
  background-size:cover;
  //height: 100vh;
  //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;  
}

button
{   
  white-space:nowrap;   
  cursor:pointer;   
  font-size:18px;
  background-color:#FFF;   
  color:#454554;
  border: 2px solid #454554;
  
  padding:2px 14px 2px 14px; 
  margin: 1px;
  transition:background .2s, color .2s;   
}
button:hover
{   
  background-color:#454554;
  color:#FFF;
}
button[disabled], button[disabled]:hover
{
   color:#AAA;
   border-color:#AAA;
   background-color:#FFF;
}
select, input[type=text], textarea, input[type=password]
{   font-weight:normal;  border:1px solid #ccc; font-size: 14px;}
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;}
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;

  display:inline-block; 
  background-color:#888; 
  color:#FFF;
  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 #888;
  border-radius:8px;
  margin-bottom:6px; 
  overflow-y:auto; 
}
.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:8px 18px;
  
  background-color:#FFF;
  
  border-bottom-left-radius:4px;
  border-bottom-right-radius:4px;
  padding: 50px 0;
}

.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 0px; 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: 3px solid #454554; 
  border-radius:8px;
  margin:0px 1% 0px 1%; 
  overflow: hidden; 
  vertical-align: top; 
  white-space: normal; 
  width: 94vw;
}

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

.region .title
{ 
  color:#FFF; 
  font-size:20px; 
  font-weight:500; 
  padding:4px 16px 3px; 
  margin-bottom:2px;
  background-color:#454554; 
}


.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); 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: 4px 4px 6px #000;
}
.dialog .content
{ 
  max-height:400px; 
  overflow-y:auto; 
  overflow-x:hidden; 
  padding-right:20px; 
  padding:4px 14px;
  margin:2px 0px;
  background-color:#EFEFEF;  
  border-top:2px solid #AAA;
  border-bottom:2px solid #AAA;
}
.dialog .controls
{ padding:4px 16px 12px;}

/* 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:95%; margin:0px 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:140px;
  display:inline-block;
  vertical-align:top;
}
.objectDataTable div.value { 
  margin-left:142px;
  vertical-align:top;
  padding:2px;
}

.objectDataTable textarea {
  border:2px solid #AAA;
  padding:4px;
  border-top-left-radius:6px;
  border-bottom-left-radius:6px;
}

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

.objectListingContainer
{
  overflow-x:auto;
}
.objectListingTable.head {
  display:inline-block;
  margin:12px 0px -4px 0px;
  border:1px none;
  overflow:hidden;
}

.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;
  border-right:1px solid #fff; 
  background-color:#e1e1e1; 
  cursor:pointer;
}
.objectListingTable.data td {
  height:26px;
  /*min-width:64px;*/
  white-space:nowrap;
}
.objectListingTable.head td {
  padding:4px 4px;
}
.objectListingTable tr td:last-child { border-right:0px none;}
.objectListingTable tr.selected td{ color:#FFF; background-color:#888 !important;}
.objectListingTable tr.selected a { color:#FFF !important;}
.objectListingTable tr.selected a:hover { color:#000 !important;}

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

.objectListingTable tr.hd { border-top:1px solid #444; border-left:1px solid #444; border-right:1px solid #444; }
.objectListingTable tr.hd td { background-color:#454554; color:#FFF; cursor:normal; padding: 7px}
.objectListingTable tr.hd td.sortHeader { background-color:#afb7cc; color:#444;}

.objectListingTable tr td div.sizeSanitizer {
  font-size: 12px;
  max-width:30vw;
  overflow:hidden;
}

.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;
}

.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;
}

.objectControls button { margin-left:16px;}

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

.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:100%;}

/* 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;}

.filterPanel .field
{
  text-align:left;
  display: inline-block;
  margin: 2px 3px;
  border: 1px solid #cdcdcd;
  background-color:#efefef;
  padding: 4px 6px;
  vertical-align: middle;
}
.filterPanel .tabContent {
  text-align:center;
}
.filterPanel .multiselect {
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:20px;
  max-height:200px;
  background-color:#FFF;
}
.filterPanel .multiselect div {
  white-space:nowrap;
}

.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;}
  .sectionContent, .loginBox { }
  .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;
}

@keyframes spin {
  0% {
    transform:rotate(0deg);    
  }
  100% {
    transform:rotate(360deg);    
  }
}
@keyframes ellipsis {
  0% {
    content:'.';
  }
  50% {
    content:'..';
  }
  100% {
    content:'...';
  }
}


.searchPanel {
  text-align:center;
  //margin-bottom:32px;
}

.searchButton, .analyseButton, .prepopButton {
  position:inherit;
  display: inline-block;
  vertical-align:middle;
  font-size:24px;
  padding:8px 24px;
}
.prepopButton {
  font-size:14px;
  padding:6px 24px;
}
.searchButton:focus, .analyseButton:focus, .prepopButton:focus
{   
  background-color:#000;
  color:#FFF;
}

.searchInput {
  min-width: 320px;
  border: 3px solid #000;
  border-radius: 5px;
  line-height: normal;
  color: #282828;
  display: inline-block;
  //width:400px;
  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;
}

.menu-active{
    transition: all 0.3s;
    text-decoration: underline !important;
    text-underline-offset: 0.5rem;   
}

#primary-menu ul li a:hover{
    text-decoration: underline !important;
    text-underline-offset: 0.5rem;   
    text-decoration-color: #7F56D9 !important;
}