/*
//Copyright 2008-2020 Made Headway Limited
// Colour scheme applied
*/

@font-face{font-family:'Futura';src:url(../fonts/Futura-Book.eot);src:url(../fonts/Futura-Book.eot?#iefix) format("embedded-opentype"),url(../fonts/Futura-Book.woff2) format("woff2"),url(../fonts/Futura-Book.woff) format("woff"),url(../fonts/Futura-Book.ttf) format("truetype"),url(../fonts/Futura-Book.svg#svgFontName) format("svg");font-weight:400;font-style:normal}
@font-face{font-family:'Futura';src:url(../fonts/Futura-Light.eot);src:url(../fonts/Futura-Light.eot?#iefix) format("embedded-opentype"),url(../fonts/Futura-Light.woff2) format("woff2"),url(../fonts/Futura-Light.woff) format("woff"),url(../fonts/Futura-Light.ttf) format("truetype"),url(../fonts/Futura-Light.svg#svgFontName) format("svg");font-weight:300;font-style:normal}
@font-face{font-family:'Kepler Std';src:url(../fonts/KeplerStd-Regular.eot);src:url(../fonts/KeplerStd-Regular.eot?#iefix) format("embedded-opentype"),url(../fonts/KeplerStd-Regular.woff2) format("woff2"),url(../fonts/KeplerStd-Regular.woff) format("woff"),url(../fonts/KeplerStd-Regular.ttf) format("truetype"),url(../fonts/KeplerStd-Regular.svg#svgFontName) format("svg");font-weight:400;font-style:normal}
@font-face{font-family:'Kepler Std';src:url(../fonts/KeplerStd-Light.eot);src:url(../fonts/KeplerStd-Light.eot?#iefix) format("embedded-opentype"),url(../fonts/KeplerStd-Light.woff2) format("woff2"),url(../fonts/KeplerStd-Light.woff) format("woff"),url(../fonts/KeplerStd-Light.ttf) format("truetype"),url(../fonts/KeplerStd-Light.svg#svgFontName) format("svg");font-weight:300;font-style:normal}
@font-face{font-family:'Kepler Std';src:url(../fonts/KeplerStd-Italic.eot);src:url(../fonts/KeplerStd-Italic.eot?#iefix) format("embedded-opentype"),url(../fonts/KeplerStd-Italic.woff2) format("woff2"),url(../fonts/KeplerStd-Italic.woff) format("woff"),url(../fonts/KeplerStd-Italic.ttf) format("truetype"),url(../fonts/KeplerStd-Italic.svg#svgFontName) format("svg");font-weight:400;font-style:italic}
@font-face{font-family:'Kepler Std';src:url(../fonts/KeplerStd-Bold.eot);src:url(../fonts/KeplerStd-Bold.eot?#iefix) format("embedded-opentype"),url(../fonts/KeplerStd-Bold.woff2) format("woff2"),url(../fonts/KeplerStd-Bold.woff) format("woff"),url(../fonts/KeplerStd-Bold.ttf) format("truetype"),url(../fonts/KeplerStd-Bold.svg#svgFontName) format("svg");font-weight:700;font-style:normal}


/* 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;
-webkit-font-smoothing: antialiased!important;
    -moz-osx-font-smoothing: grayscale!important;
    text-rendering: optimizeLegibility!important;
}
body
{ 
  color:#212529;
  background-color:#F4F2F0;
  font-family:'Futura' !important;
  font-size:14px;
  margin:0;
  padding:0;
  -webkit-font-smoothing: antialiased!important;
      -moz-osx-font-smoothing: grayscale!important;
      text-rendering: optimizeLegibility!important;
}
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:#1CDF95;   background-color:#1CDF95;}


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

button
{   
  white-space:nowrap;   
  cursor:pointer;   
  font-size:14px;
  background-color:#1CDF95;
  color: #191930;
  border: none;
  border-radius:2px;
  
  font-family:"Futura";
  
  padding:8px 30px 12px 30px;
  margin: 1px;
}
button:hover
{   
  background-color: #25b37d;
  /*color:#FFF;*/
  transition:background .2s, color .2s;
}
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; 
}

.autoSizingPanel
{
  overflow:hidden;
  opacity:0;
  height:16px;
}

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

.headerContent
{ 
  margin:0px; 
  background-color:#1A1942;
  padding:0px;
}

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

.bodyContent
{ 
  margin-top:16px;
}
.footerContent
{ 
  padding:0px 0px 4px 0px; 
  background-image: linear-gradient(90deg, rgb(9, 9, 24) 0px, rgb(26, 25, 66) 100%);
  color:#FFF !important;
  padding: 4px 4px 4px 20px;
}

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

.headerLogo  { padding: 15px 0 0px 0;}
.headerLogo a img { height:64px; width:279px; }

.prebody {
  height:2px;
}

.userNote
{ color:#1CDF95; 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; }

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

.sectionTitle
{ 
  color: #595959;
  padding-top: 20px;
  font-size: 24px;
  border-top: 1px solid #b2b1b6;
  font-family: 'Kepler Std' !important;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 300;
  line-height: 28px;
  
  margin: 28px auto 18px auto;
  max-width: 1150px;
}

.sectionContent
{ 
  margin: 4px auto 40px auto;
  max-width: 1150px;
}

.AppFlows .sectionContent, .AppFlows .sectionTitle {
  max-width: 1650px;
}

.sectionContent .title {
  font-family: "Kepler Std";  
  color:#444;
  font-size:24px;
}

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

.searchResults
{ margin-top:24px;}

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

.staticContentAnnotation { width:98%; background-color:#1CDF95; border-top:2px solid #1CDF95; border-bottom:1px solid #1CDF95; 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 #888; 
  border-radius:12px;
  margin:0px 1% 0px 1%; 
  overflow: hidden; 
  vertical-align: top; 
  white-space: normal; 
  width: 94vw;
}

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

.region .title
{ color:#222; font-size:20px; padding:8px 24px 0px; margin-bottom:2px;   font-family:"Kepler Std"; }


.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(16,0,1,0.5); position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 20; pointer-events: all;}

.buggyBrowser .clickShield
{ background-color:rgba(0,0,0,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: 0px 0px 14px #000;
}
.dialog .content
{ 
  max-height:400px; 
  overflow-y:auto; 
  overflow-x:hidden; 
  padding-right:20px; 
  padding:4px 14px;
  margin:2px 0px;
  background-color:rgb(244, 242, 240);  
  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 { font-family:"Kepler Std"; font-size:18px; padding: 20px 0px; font-weight: 300; font-style: italic;

    text-decoration-thickness: auto;
    text-decoration-style: solid;
}

.linkList a, .linkList .topmenu > div.menuItem
{ 
  display:inline-block; 
  margin:0px 2px; 
  text-decoration: none;
  padding:5px 8px 0px 8px;
  color: #fff !important;
}
.linkList a.current, .linkList div.menuItem.current
{  
  /*text-decoration:underline;*/
  color: #A6EAF2 !important;
}
.linkList a:hover, .linkList .menuItem:hover
{
  color: #A6EAF2 !important;
  text-decoration:underline;
}
.linkList a {
    border-right: 1px solid #2E6E75;
}
.linkList a:last-child {
    border-right: none;
}

/* 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:#1CDF95;
}

.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;
  border-top-left-radius:6px;
  border-top-right-radius:6px;
  overflow:hidden;
  font-family:"Kepler Std";
}

.objectListingTable.head td {
  overflow:hidden;
  font-size:16px;
}

.objectListingTable.data{ 
  display:inline-block; 
  margin:0px 0px 12px 0px; 
  border:1px solid #888; 
  max-height:400px;
  border-bottom-left-radius:6px;
  border-bottom-right-radius:6px;
}

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

.objectListingTable.data table { width:100%;}
.objectListingTable td {
  height:26px;
  vertical-align:middle;
  padding:0px 4px; 
  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:rgb(244, 242, 240);}

.objectListingTable tr.hd { border-top:1px solid #444; border-left:1px solid #444; border-right:1px solid #444; }
.objectListingTable tr.hd td { background-color:#1CDF95; color:#FFF; cursor:normal; height:initial !important; }
.objectListingTable tr.hd td.sortHeader { background-color:#afb7cc; color:#444;}

.objectListingTable tr.hd td div.sizeSanitizer {
  height:initial !important;
}

.objectListingTable tr.hd td.easSorted {
  position:relative;
}
.objectListingTable tr.hd td.easSorted::after {
  content:'down';
  position:absolute;
  right:4px;
}
.objectListingTable tr.hd td.easSorted.easReverse::after {
  content:'up';
}

.objectListingTable tr td div.sizeSanitizer {
  height:24px;
  max-width:30vw;
  overflow:hidden;
  margin:-4px 0px;
}
.objectListingTable.head tr td div.sizeSanitizer {
  height:16px;
  margin:0px;
}

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

.tooltip {
  position:absolute;
  height:auto;
  border:2px solid #1CDF95;
  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 0px;}

.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 #1CDF95;
  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 8px 16px;}

.dashboardElements
{
  text-align:center;
  border:3px solid #1CDF95;
  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 #1CDF95;
  border-radius:5px;
  background-color:#EFEFEF;
  overflow:hidden;
}
.progressBarInner {
  position:absolute;
  width:0%;
  height:100%;
  left:0px;
  top:0px;
  background-color:#1CDF95;
  overflow:hidden;
}
.progressBarText {
  text-align:center;
  position:absolute;
  top:0px;
  left:0px;
  width:296px;
}
.progressBarText.overlay {
  color:#EFEFEF;
}
.progressBarText.underlay {
  color:#1CDF95;
}


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

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

.messagerDialog .userList {
  border:2px solid #1CDF95;
  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:#1CDF95 !important;
  color:#FFF;
}

.previousMessages {
  height:25vh;
  width:98%;
  margin:2px auto;
  border:2px solid #1CDF95;
  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:#1CDF95;
  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;
}

/* Type dialogs, common */
.candidateContents,
.jobContents,
.clientContents
{ 
  margin-bottom:6px; 
  overflow-y:auto; 
}
.candidateContents .tabContent,
.jobContents .tabContent,
.clientContents .tabContent
{
  position:relative;
  background-color:#FFF; 
  color:#000; 
  margin-top:10px;
  padding:8px 1% 8px 1%; 
  border:3px solid #888;
  border-radius:8px;
  min-height:0px;
  min-width:250px;
}

.candidateContents .tabContent:after,
.jobContents .tabContent:after,
.clientContents .tabContent:after
{
  content:attr(_tabName);
  position:absolute;
  top:-10px;
  left:20px;
  background-color:#FFF;
  border-top-left-radius:4px;
  border-top-right-radius:4px;
  padding: 0px 8px;
  display:inline-block;
}

.candidateContents .tabContent,
.jobContents .tabContent,
.clientContents .tabContent
{
  display:inline-block;
  vertical-align:top;
  margin-right:1%;
}

/* Candidate dialog */
.candidateContents .tabContent[_tab="personalData"]
{
  float:left;
  width:29%;
}
.candidateContents .tabContent[_tab="workConditions"]
{
  width:36%;
}
.candidateContents .tabContent[_tab="availability"]
{
  width:22%;
}
.candidateContents .tabContent[_tab="expertise"]
{
  width:62%;
}
.candidateContents .tabContent[_tab="expertise"] .field,
.jobContents .tabContent[_tab="expertise"] .field
{
  display:inline-block;
  vertical-align:top;
  width:31%;
  margin:0px 1%;
  min-width:170px;
}

.candidateContents .tabContent[_tab="workConditions"] {
  white-space:nowrap;
}
.candidateContents .tabContent[_tab="workConditions"] .half
{
  white-space:normal;
  display:inline-block;
  vertical-align:top;
  width:49%;
  margin-right:1%;
  min-width:170px;
}

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

.candidateContents .tabContent[_tab="pointsOfNote"] {
  width:15%;
  min-width:150px;
}

.candidateContents .tabContent[_tab="notes"] {
  width:25%;
  min-width:150px;
}

.candidateContents .tabContent[_tab="lookingIn"] {
  width:15%;
  min-width:150px;
}


.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 #1CDF95;
}

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

/* Job dialog */
.jobContents .tabContent[_tab="basicDetails"] {
  width:95%;
}
.jobContents .objectDataTable textarea { height:96px; }

.jobContents .tabContent[_tab="basicDetails"] .field,
.jobContents .tabContent[_tab="allocation"] .field
{
  display:inline-block;
  margin-right:12px;
  width:23%;
}

.jobContents .tabContent[_tab="basicDetails"] .field .label,
.jobContents .tabContent[_tab="allocation"] .field .label
{
  float:none;
}
.jobContents .tabContent[_tab="basicDetails"] .field .value,
.jobContents .tabContent[_tab="allocation"] .field .value
{
  margin-left:0px;
  margin-bottom:4px;
}

.jobContents .tabContent[_tab="description"] {
  width:65%;
}
.jobContents .tabContent[_tab="assignmentOptions"] {
  width:23%;
}
.jobContents .tabContent[_tab="expertise"] {
  width:95%;
}
.jobContents .tabContent[_tab="allocation"] {
  width:95%;
}

/* Client contents */

.clientContents .tabContent[_tab="companyInformation"],
.clientContents .tabContent[_tab="companyContactInformation"]
{
  width:26%;
}
.clientContents .tabContent[_tab="clientContacts"] {
  width:65%;
}
.clientContents .tabContent[_tab="clientContacts"] .objectListingTable.data {
  height:132px;
}
.clientContents .tabContent[_tab="notes"] {
  width:65%;
}
.clientContents .tabContent[_tab="notes"] textarea
{
  height:214px;
}

.objectListingTable.Activity tr.incomplete td {
  color:#A00;
}
.objectListingTable.Candidate tr.inactive td {
  color:#777;
}

/* Audit dialog */
.auditDialog table {
  width:100%;
}
.auditDialog .changeListing, .auditDialog .fieldChangeListing
{
  display:inline-block;
  vertical-align:top;
  width:calc( 50% - 20px );
  
  border: 1px solid #1CDF95;
  
  margin:4px;
  padding:4px;
  height:30vh;
  
  overflow-y:scroll;
}


.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 #1CDF95;
  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;
}

#henrysAxis {
  position:relative;
  width:602px;
  height:602px;
  margin:8px auto 64px;
  border:2px solid #000;
}
#henrysAxis .cell {
  position:absolute;
  border:1px solid #888;
}
#henrysAxis .cellLabel {
  position:absolute;
  text-align:center;
  line-height:75px;
  font-size:28px;
  font-weight:bold;
}
#henrysAxis .cellLabel.horiz {
  line-height:37px;
}
#henrysAxis .pointRoot {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  z-index:2;
  overflow:hidden;
}

#henrysAxis .emotion {
  position:absolute;
  width:12px;
  height:12px;
  background-color:#FFF;
  border-radius:8px;
  border:1px solid #999;
}
#henrysAxis .emotion.star {
  background-color:#FFA;
  border:2px solid #999;
}
#henrysAxis .emotion:hover::after {
  content:attr(_name);
  white-space:no-wrap;
  position:absolute;
  left:16px;
  top:1px;
  line-height:12px;
  z-index:3;
}
#henrysAxis .dragRoot {
  position:absolute;
  z-index:10;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  pointer-events:all;
}
#henrysAxis .dragRoot .emotion {
  pointer-events:none;
}
#henrysAxis .dragElementWrap {
  position:relative;
}

.metaContent {
  border:1px solid #666;
  background-color:#FFF;
}
.metaContent .metaRow {
  border-bottom:1px solid #9CC;
  padding:4px 8px;
}
.metaContent .metaRow > * {
  display:inline-block;
  vertical-align:top;
  margin:0px 4px;
}

.metaContent .metaRow .metaVisible {
  width:24px;
}
.metaContent .metaRow .metaKey {
  width:calc(50% - 48px - 32px );
  border:1px solid #AAA;
  border-radius:0;
}
.metaContent .metaRow .metaValue {
  width:calc(50% - 48px - 32px );
  height:calc(2em + 16px );
  border:1px solid #AAA;
  border-radius:0;
}
.metaContent .metaRow button {
  width:24px;
  padding:0;
}

.questionBox {
  border:1px solid #999;
  border-radius:4px;
  margin:8px;
  padding:4px 8px;
}

.questionBox .objectListingContainer {
  margin-left:64px;
}

@media only screen and (max-width: 1280px) {
  .reportPlot{
    height:352px;
  }
  .reportElement {
    width:360px;
    margin:4px;
    padding:4px 4px;
    border:1px solid #1CDF95;
    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 #1CDF95 !important; 
    border-radius: 4px;
    margin:4px;
  }

  .clientContents .tabContent {
    display:block;
    width:auto !important;
  }

  .clientContents .tabContent[_tab="companyInformation"] .field,
  .clientContents .tabContent[_tab="companyContactInformation"] .field,
  .clientContents .tabContent[_tab="notes"] .field,
  .clientContents .tabContent[_tab="clientContacts"] .field
  {
    display:block;
    width:auto;
  }

  .jobContents .tabContent[_tab="basicDetails"] .field,
  .jobContents .tabContent[_tab="allocation"] .field {
    display:block;
    width:auto;
  }
  
  .candidateContents .tabContent[_tab="workConditions"] {
    white-space:normal;
  }
  .candidateContents .tabContent[_tab="workConditions"] .half {
    display:block;
    width:auto;
  }
  
  .candidateContents .tabContent, 
  .jobContents .tabContent 
  {
    display:block;
    float:none !important;
    width:auto !important;
  }
  .candidateContents .tabContent[_tab="expertise"] .field,
  .jobContents .tabContent[_tab="expertise"] .field 
  {
    display:block;
    float:none !important;
    width:auto !important;
  }
  
  .userNote span {display: none;}
}

/* Hack: replace datatables for mobile */
@media only screen and (max-width: 850px) {
  .header       { background:none;  }
  .preheader    { display:block;    }
  .userNote     { text-align:right; }
  .breadcrumbs  { display:none;     }

  .headerLogo {
    margin:0px auto;
    position:inherit;
  }
  
  .managingSummary {
    padding:inherit;
  }
  
  .objectListingTable table, .objectListingTable thead, .objectListingTable tbody, .objectListingTable th, .objectListingTable td, .objectListingTable tr { 
    display: block; 
  }
  
  .objectListingTable.head {
    display:none;
  }
  .objectListingTable tr { border: 1px solid #ccc; }  
  .objectListingTable td { 
    /* Behave  like a "row" */
    border: none;
    border-bottom: none; 
    position: relative;
    padding-left: 50%; 
  } 
  .objectListingTable td:before { 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 0px;
    left: 0px;
    width: 45%; 
    height:100%;
    white-space: nowrap;
    
    background-color:#1CDF95;
  } 
  
  .objectListingTable.data {
    width: 90%;
    margin-left: 4%;
    overflow-y: inherit;
    max-height:inherit;
  }
  .objectListingTable td[_column]:before { content: attr(_column); }
}


/* Was corporate-only, now apply globally */

button {
  border-width:1px;
  padding-bottom:6px;
}

.linkList a {
  border-width:1px;
  padding-bottom:4px;
  padding-left:8px;
  padding-right:8px;
}


/* Rebrand */

.header {
  padding-top:12px;
  padding-left: calc(50% - 575px);
  padding-right: calc(50% - 575px);
  background-color: #1A1942;
  width:initial;
  margin:initial;
}
.linkList {
  /*font-style: italic;*/
  font-family: 'Kepler Std' !important;
}

.communityLogo {
  position:absolute;
  top:1px;
  left:420px;
}
.communityLogo img {
  height:64px;
}

.headerLogo {
  margin-top: 15px;
  width:200px;
  height:42px;
  background: transparent url("/v2/images/cc_logo_white.png") no-repeat top left;
  background-size:contain;
}
.headerLogo img {
  display:none;
}

.tileStyleEditor {
  position:relative;
  width:100%;
  background-color:#FFF;
  border:1px solid #000;
}

.tileStylePreview {
  position:absolute;
  top:0px;
  left:0px;
  width:calc( 100% - 340px );
  height:100%;
  background-color:#1A022A;
  overflow-x:hidden;
  overflow-y:auto;
}

.tileStyleControls {
  position:absolute;
  top:0px;
  right:0px;
  width:339px;
  height:100%;
  border-left:1px solid #DDD;
}

.tileStylePreview .cell {
  position:absolute;
  border-right:1px dotted #FFF;
  border-bottom:1px dotted #FFF;
  z-index:2;
  pointer-events:none;
}
.tileStylePreview .tile {
  position:absolute;
  top:0px;
  left:0px;
  border-radius:12px;
}
.tileStylePreview .element {
  position:absolute;
  background-color:rgba(0,0,0,0.1);
  padding:1px;
}

.tileStylePreview .element.selected {
  padding:0px;
  background-color:rgba(0,0,0,0.2);
}
.tileStylePreview.mouseOverSelected .element:NOT(.selected) {
  pointer-events:none;
}

.tileStylePreview .element.selected:NOT(.selTop):NOT(.selBottom):NOT(.selLeft):NOT(.selRight) { 
  border: 1px solid #FF0;
}

.tileStylePreview .element.selected:NOT(.selTop):NOT(.selBottom) {
  padding-top:1px;
  padding-bottom:1px;
}

.tileStylePreview .element.selected.selTop {
  border-top:2px solid #FF0;  
  cursor:ns-resize;
}
.tileStylePreview .element.selected.selBottom {
  border-bottom:2px solid #FF0;  
}

.tileStylePreview .element.selected:NOT(.selLeft):NOT(.selRight) {
  padding-left:1px;
  padding-right:1px;
}
.tileStylePreview .element.selected.selLeft {
  border-left:2px solid #FF0;  
}
.tileStylePreview .element.selected.selRight {
  border-right:2px solid #FF0;  
}

/* Cursors */
.element.selected.selTop, .element.selected.selBottom {
  cursor:ns-resize;
}
.element.selected.selLeft, .element.selected.selRight {
  cursor:ew-resize;
}
.element.selected.selBottom.selLeft, .element.selected.selTop.selRight {
  cursor:nesw-resize;
}
.element.selected.selTop.selLeft, .element.selected.selBottom.selRight {
  cursor:nwse-resize;
}
/**/


.tileStylePreview .element[_eid]::after {
  content:attr(_eid);
  display:inline-block;
  color:#FFF;
  position:absolute;
  top:4px;
  right:8px;
}

.tileStylePreview .dragRoot {
  position:absolute;
  z-index:10;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  pointer-events:all;
}
.tileStylePreview .dragRoot .element {
  pointer-events:none;
}
.tileStylePreview .dragElementWrap {
  position:relative;
}

#metaValue {
  width:90%;
  margin:8px 5%;
}

.editableMeta {
  position:relative;
}
.editableMeta:hover::after {
  content:'';
  position:absolute;
  right:18px;
  top:1px;
  width:24px;
  height:24px;
  background:transparent url('/v2/images/edit.png') no-repeat top left;
}

.uploadMetaResult {
  border: 1px solid #aaa;
  padding:16px 24px;
  background-color:#ffd;
}
.uploadMetaResult.errmsg {
  background-color:#fdd;
}
.uploadMetaResultTitle {
  font-size:14pt;
  padding-bottom:16px;
}


.imageLibrary .thumb {
  display:inline-block;
  width:100px;
  height:75px;
  position:relative;
  background-color:#444;
  margin:5px;
  border:2px solid #000;
  overflow:hidden;
}
.imageLibrary .thumb.selected {
  border:2px solid #FF0;
}
.imageLibrary .thumb .preview {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.imageLibrary .thumb .preview::after {
  content:'';
  position:absolute;
  top:2px;
  right:2px;
  width:20px;
  height:20px;
  background-color:#FFF;
  border:2px solid #000;
  border-radius:10px;
}
.imageLibrary .thumb.noThumbnail .preview::after {
  content:'X';
  text-align:center;
}

.imageLibrary .thumb .name {
  display:inline-block;
  position:absolute;
  padding:0px 5px 5px 5px;
  bottom:0px;
  left:0px;
  width:100%;
  color:#FFF;
  background-color:rgba(0,0,0,0.6);
}

.legend {
  margin:32px auto;
  width:80%;
}
.legend td {
  padding:4px;
}
.codeBlock {
  font-family:monospace;
}
div.codeBlock {
  margin:28px 32px 32px;
}


.context-menu {
  box-shadow: 0 4px 5px 3px rgba(0, 0, 0, 0.2);
  z-index:50;
  position: absolute;
  background-color:#fff;
  border:1px solid #888;
}
.context-menu-items {
  list-style: none;
  padding:4px;
  margin:2px;
}
.context-menu-item {
  position:relative;
  font-size: 12px;
  font-weight:600;
  padding: 4px 30px 4px 10px;
  cursor: pointer;
}
.context-menu-item.greyed > span {
  color:#888 !important;
}
.context-menu-item.separator {
  background-color:#fff !important;
  border-bottom:2px dotted #CCC;
  cursor:normal;
  padding:6px 10px 0px;
  margin-bottom:4px;
}
.context-menu-item.separator:last-child {
  display:none;
}
.context-menu-item.hasSubmenu::after {
  content:"▶";
  display:block;
  pointer-events:none;
  position:absolute;
  right:0px;
  top:0px;
  margin-right:4px;
  height:1em;
}
.context-menu-item > span {
  white-space:nowrap;
}
.context-menu-item:hover {
  background: #112766;
}
.context-menu-item:hover > span {
  color: #fff;
}
.context-menu-item > .context-menu.submenu {
  display:none;
  position:absolute;
  left:calc( 100% - 16px );
  top:0px;
}
.context-menu-item:hover > .context-menu.submenu {
  display:block;
}


.releaseNotes {
  padding:10px 16px;
  position:relative;
  margin:24px 12px 20px;
  border:1px solid #AAA;
  background-color:#EFEFEF;
  border-radius:4px;
  box-shadow:2px 2px 3px rgba(0,0,0,0.8);
}
.releaseNotes::after {
  content:'VCS Commit Notes:';
  position:absolute;
  top:-16px;
  height:12px;
  left:12px;
  padding:2px 16px 2px 10px;
  font-size:12px;
  font-weight:bold;
  background-color:#EFEFEF;
  border-top:1px solid #AAA;
  border-left:1px solid #AAA;
  border-right:1px solid #AAA;
  border-top-left-radius:4px;
  border-top-right-radius:4px;
}

.msi-preview {
  background-color:transparent;
  background-repeat:none;
  margin:0px auto;
}

.controlPanel#properties {
  background-color:#EFEFEF;
}

.separation {
  position:relative;
  border: 1px solid #444;
  border-radius:4px;
  margin:16px 2px 10px;
  padding:8px;
  background-color:#FFF;
}
.separation::before {
  content:attr(_separation);
  font-variant:small-caps;
  font-size:14px;
  background-color:#FFF;
  padding:0px 8px;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
  position:absolute;
  top:-10px;
  left:10px;
}
.separation textarea {
  width:96%;
}

.SurveyGroup tr .treeBlob {
  display:inline-block;
  vertical-align:top;  
  margin-right:4px;
  height:10px;
  width:4px;
}


.SurveyGroup tr[_depth] .treeBlob {
  border-left:2px solid #999;
  border-bottom:2px solid #999;
}
.SurveyGroup tr.mid[_depth] .treeBlob {
  height:24px;
  border-bottom:0px hidden;
}
.SurveyGroup tr.mid[_depth] .treeBlob::after {
  content:'-';
}

.SurveyGroup tr[_depth="0"] .treeBlob {
  border-left:2px hidden;
}




/* Object arrays */
.objectArray {
  display:inline-block;
  border:1px solid #E9EEF1;
  vertical-align:middle;
  padding:12px;
  border-radius:9px;
}
.objectArray button {
  padding:0px 8px;
  vertical-align:middle;
  margin-right:4px;
}
.objectArray .message {
  display:none;
}
.objectArrayLine {
  display: inline-block;
  background-color: #1CDF95;
  margin: 0px 12px 10px 0px;
  padding: 1px 4px;
  border: 1px solid #1CDF95;
  border-radius: 8px;
  box-shadow: 3px 3px 4px #888;
}

.objectArrayLine .link {
  display:inline-block;
  margin:4px 12px 4px 4px;
}
.addPanel {
  display:inline-block;
  padding-bottom:8px;
  width:320px;
  vertical-align:middle;
}
.addPanel button {
  padding-right:12px;
  padding-left:12px;
  margin-right:0px;
}
.addPanel input {
  width:calc(100% - 130px) !important;
  position:relative;
}
/* metrics */
/* ==== GRID SYSTEM ==== */

.container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.row {
  position: relative;
  width: 100%;
}

.row [class^="col"] {
  float: left;
  margin: 0.5rem 1%;
  min-height: 0.125rem;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  width: 96%;
}

.col-1-sm {
  width: 4.33%;
}

.col-2-sm {
  width: 12.66%;
}

.col-3-sm {
  width: 21%;
}

.col-4-sm {
  width: 29.33%;
}

.col-5-sm {
  width: 37.66%;
}

.col-6-sm {
  width: 46%;
}

.col-7-sm {
  width: 54.33%;
}

.col-8-sm {
  width: 62.66%;
}

.col-9-sm {
  width: 71%;
}

.col-10-sm {
  width: 79.33%;
}

.col-11-sm {
  width: 87.66%;
}

.col-12-sm {
  width: 96%;
}

.row::after {
  content: "";
  display: table;
  clear: both;
}

.hidden-sm {
  display: none;
}

@media only screen and (min-width: 33.75em) {  /* 540px */
  .container {
    width: 80%;
  }
}

@media only screen and (min-width: 45em) {  /* 720px */
  .col-1 {
    width: 4.33%;
  }

  .col-2 {
    width: 12.66%;
  }

  .col-3 {
    width: 21%;
  }

  .col-4 {
    width: 29.33%;
  }

  .col-5 {
    width: 37.66%;
  }

  .col-6 {
    width: 46%;
  }

  .col-7 {
    width: 54.33%;
  }

  .col-8 {
    width: 62.66%;
  }

  .col-9 {
    width: 71%;
  }

  .col-10 {
    width: 79.33%;
  }

  .col-11 {
    width: 87.66%;
  }

  .col-12 {
    width: 96%;
  }

  .hidden-sm {
    display: block;
  }
}

@media only screen and (min-width: 60em) { /* 960px */
  .container {
    width: 75%;
    max-width: 60rem;
  }
}

/* metrics */
.metric p {
    text-align: center;
    margin: 0;
    padding: 10px 4px;
    color: #1A1942;
}
.metric p.label {
    background-color: #60E7F5;
    border-radius: 4px 4px 0 0;
}
.metric p.value {
    background: #FFF;
    font-weight: bold;
    font-style: italic;
    font-size: 18px;
    border-radius: 0 0 4px 4px;
}

.popper
{
  width:32px;
  height:32px;
  text-align:center;
}
.popper::after {
  content:'▶';
  display:block;
  position:relative;
  width:32px;
  height:32px;
  line-height:32px;
  transition:0.6s;
}
.popper.popped::after {
  transform: rotate(90deg);
}

.poppable {
  display:none;
}
.poppable.popped {
  display:table-row;
}



.userCommunityReassignment .field {
  display:inline-block;
  width:calc( 33% - 2px - 16px - 12px );
  min-height:48px;
  vertical-align:top;
  border:1px dotted #888;
  margin:8px;
  padding:6px;
}
.userCommunityReassignment .field .label {
  font-weight:bold;
  margin-bottom:6px;
  padding-bottom:3px;
  border-bottom:1px dotted #888;
}
.userCommunityReassignment .field input {
  width:95%;
}


.userQR .field {
  display:inline-block;
  width:calc( 33% - 2px - 16px - 12px );
  min-height:48px;
  vertical-align:top;
  border:1px dotted #888;
  margin:8px;
  padding:6px;
}
.userQR .field .label {
  font-weight:bold;
  margin-bottom:6px;
  padding-bottom:3px;
  border-bottom:1px dotted #888;
}
.userQR .field input {
  width:95%;
}
.userQR .field button {
  margin-top:18px;
  display:block;
  width:100%;
}
.userQR .qrImage {
  width:180px;
  display:block;
  margin:8px auto;
}

.altLayout {
  margin:8px 12px;
  padding:8px 8px;
  background-color:#EFEFEF;
}
.altLayout .layoutTitle {
  font-weight:bold;
  text-align:left;
  height:24px;
  padding:4px;
  line-height:24px;
  display:inline-block;  
  width:calc( 100% - 80px );
}
.altLayout .layoutList {
  background-color:#FFF;
  max-height:128px;
  overflow-y:scroll;
  text-align:left;
  border:1px solid #000;
  border-radius:4px;
}

.altLayout button {
  top:4px;
  width:24px;
  height:24px;
  border-radius:12px;
  line-height:24px;
  padding:0;
  margin:4px 4px;
  top:4px;
}

.altLayout .layoutList .layoutOption {
  padding:4px 12px;
  cursor:pointer;
}

.altLayout .layoutList .layoutOption.selected {
  background-color:#000;
  color:#FFF;
}

input.mfaInput[type="text"]
{
  width:calc( 12ch + 12px );

  --w: 1ch;   /* control the width for each letter */
  --g: .15em; /* the gap between letters */
  --b: 2px;   /* the border thickness */
 
  --c: #888;
  --_n: 6; 
  
  font-size: 70px;
  line-height: 1.5; /* control the height */
  letter-spacing: var(--w);
  font-family: monospace;
  width: calc( var(--_n)*(1ch + var(--w)) + 16px );
  padding-left: calc((var(--w) - var(--g))/2);
  clip-path: inset(0 calc(var(--w)/2) 0 0);
  background:
    repeating-linear-gradient(90deg,
      var(--c) 0 var(--b),#0000 0 calc(1ch + var(--w) - var(--g) - var(--b)),
      var(--c) 0 calc(1ch + var(--w) - var(--g)),#0000 0 calc(1ch + var(--w))),
    conic-gradient(at calc(100% - var(--g) - 1px) var(--b),#0000 75%,var(--c) 0) 
     0 0/calc(1ch + var(--w)) calc(100% - var(--b));
  margin-left:16px;
  margin-bottom:16px;
}

.MFA .error {
  font-weight:bold;
  width:400px;
  margin:4px auto 16px;
  border:2px solid #A00;
}