/* Corporate-view specific CSS 
// Colour scheme applied
*/

.sectionContent label {
  display:block;
  margin:8px;
}

.sectionContent .label label {
  margin:0;
}

.sectionContent table.bulletList td {
  padding:4px 8px;
}
.sectionContent table.bulletList td:first-child {
  padding-left:32px;
  min-width:160px;
}
.sectionContent table.bulletList td:first-child::before {
  content:"• ";
}
.sectionContent table.bulletList td:nth-child(2) {
  font-style:italic;
}


.demoCategory {
}
.demoCategory .demoCategoryTitle {
  font-size:16px;
  font-weight:bold;
}
.demoCategory .demoCategoryDesc {
  margin-left:32px;
  font-style:italic;
}

.demoFields {
  margin-left:32px;
  margin-bottom:12px;
}

.demoField .demoFieldDesc {
  margin-left:32px;
  font-style:italic;
}


#uploadSummary {
  padding-left:32px;
}

#uploadSummary .summaryLine {
  padding:12px 8px;
}

#uploadSummary .label {
  display:inline-block;
  vertical-align:top;
  font-style:italic;
  width: 280px;
  font-size:16px;
}
#uploadSummary .label::after {
  content:":"
}
#uploadSummary .value {
  display:inline-block;
  vertical-align:top;
  width: calc( 100% - 280px );
  font-weight:bold;
  font-size:16px;
}

#uploadSummary .value .fieldList {
  font-size:12px;
  font-weight:normal;
  display:inline;
  margin-left:12px;
}

#uploadSummary .confirmLine {
  margin:12px 8px;
  text-align:center;
}

.objectListingTable.AppUser >table > tbody tr > td:nth-child(2) {
  border-right:4px double #FFF;
}

#heatmapView {
  transition: filter 0.8s;
  border-radius:8px;
}
#heatmapView.loading {
  filter: brightness(40%);
}

.filterContainer {
  position:relative;
  background-color:#EFEFEF;
  border:1px solid #AAA;
  margin-top:18px;
  box-shadow:2px 2px 3px rgba(0,0,0,0.3);
}
.filterContainer .filter {
  display:inline-block;
  vertical-align:top;
  margin:8px 12px;
  padding:2px 8px 4px;
  border:1px solid #AAA;
  background-color:#DDD;
}
.filterContainer .filter .label {
  border-bottom:1px dotted #444;
  margin-bottom:4px;
}
.filterContainer .filter .value {
  text-align:center;
}
.filterContainer .filter .value input[type="text"], .filterContainer .filter .value select {
  width:100px;
  text-align:left;
}

.filterContainer::after {
  content:"Filters";
  display:inline-block;
  position:absolute;
  top:-18px;
  height:18px;
  left:12px;
  padding:0px 12px;
  background-color:#FFF;
  border-top-left-radius:4px;
  border-top-right-radius:4px;
  background-color:#EFEFEF;
  border-top:1px solid #AAA;
  border-left:1px solid #AAA;
  border-right:1px solid #AAA;
}

.heatmapContainer {
  position:relative;
  width:600px;
  height:600px;
  display:block;
  margin:12px auto;
}

.heatmapContainer .heatmapOverlay, 
.heatmapContainer .heatmapControls {
  position:absolute;
  top:0px;
  left:0px;
  width:600px;
  height:600px;
}

.heatmapContainer .heatmapOverlay .overlayPart::after {
  position:absolute;
  font-size:18px;
  font-style:italic;
  border-radius:8px;
  background-color:rgba(255,255,255,0.5);
}

.heatmapContainer .heatmapOverlay .xaxis {
  top:calc( 50% - 1px );
  left:0px;
  width:100%;
  height:2px;
  border-top:2px solid #000;
  position:absolute;
}

.heatmapContainer .heatmapOverlay .yaxis {
  top:0px;
  left:calc( 50% - 1px );
  width:2px;
  height:100%;
  border-left:2px solid #000;
  position:absolute;
}

.heatmapContainer .heatmapOverlay .topLeft::after {
  content:'Activated Coherent';
  left:12px;
  top:12px;
  padding:4px 12px;
}
.heatmapContainer .heatmapOverlay .topRight::after {
  content:'Activated Chaotic';
  right:12px;
  top:12px;
  padding:4px 12px;
}
.heatmapContainer .heatmapOverlay .bottomLeft::after {
  content:'Passive Coherent';
  left:12px;
  bottom:12px;
  padding:4px 12px;
}
.heatmapContainer .heatmapOverlay .bottomRight::after {
  content:'Passive Chaotic';
  right:12px;
  bottom:12px;
  padding:4px 12px;
}



.reportElement {
  display:inline-block;
  vertical-align:top;
  width:539px;
  margin:4px;
  padding:4px 8px;
  border:1px solid #112766;
  background-color:#EFEFEF;
  border-radius:4px;
  
  box-shadow:2px 2px 3px rgba(0,0,0,0.3);
}
.reportElement .title {
  text-align:center;
}
.reportPlot {
  height:392px;
}
.reportData {
  height:240px;
  margin-top:16px;
  overflow-y:auto;
  border:1px solid #EFEFEF;
}
.reportData .objectListingTable
{
  width:100%;
}

.dashboardElements
{
  text-align:center;
  border:3px solid #112766;
  margin:4px;
  padding:4px;
  background-color:#dafae9;
}
.dashboardElements .dataTitle {
  text-align:left;
  font-size:14px;
  font-weight:bold;
}
.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;
}


#selectedTeamInfo:NOT(:empty) {
  margin:32px auto 12px;
  width:85%;
  padding:8px 12px;
  
  background-color:#dafae9;
  border:2px solid #5ba57f;
  border-radius:6px;
  box-shadow:2px 2px 3px rgba(0,0,0,0.3);
}

#teamEditUI .explanation {
  margin-bottom:12px;
}

#teamEditUI .communityPanel, #teamEditUI .teamPanel {
  display:inline-block;
  vertical-align:top;
  padding:8px;
  margin-top:32px;
  border:1px solid #444;
  background-color:#dafae9;
  position:relative;
}
#teamEditUI .communityPanel {
  width:calc( 61% - 26px );
  margin-right:8px;
}
#teamEditUI .teamPanel {
  width:calc( 39% - 26px);
  margin-left:8px;
}

#teamEditUI .communityPanel::after, #teamEditUI .teamPanel::after {
  display:inline-block;
  position:absolute;
  top:-18px;
  height:18px;
  left:12px;
  padding:0px 12px;
  background-color:#dafae9;
  border-top-left-radius:4px;
  border-top-right-radius:4px;
  border-top:1px solid #AAA;
  border-left:1px solid #AAA;
  border-right:1px solid #AAA;
  font-weight:bold;
}
#teamEditUI .communityPanel::after {
  content:"Community and Filters";
}
#teamEditUI .teamPanel::after {
  content:"Team";
}


#teamEditUI .objectControls {
  display:none;
}


.teamOperations .op {
  display:block;
  margin:8px 12px;
  border:2px solid #000;
  background-color:#FFF;
  padding:6px 12px;
  color:#000 !important;
  border-radius:4px;
  box-shadow:2px 2px 3px rgba(0,0,0,0.3);
}

.teamOperations .op:hover {
  background-color:#5ba57f;
  color:#FFF !important;
}

.SurveysAndRequests div[_objects="Team"] .objectControls {
  display:none;
}

.notificationWizard {
  margin:32px auto 12px;
  width:85%;
  max-width:400px;
  padding:8px 12px;
  
  background-color:#dafae9;
  border:2px solid #5ba57f;
  border-radius:6px;
  box-shadow:2px 2px 3px rgba(0,0,0,0.3);
}
.notificationWizard table {
  width:100%;
}
.notificationWizard td {
  padding:4px 8px;
}
.notificationWizard .field td:first-child {
  padding-top:6px;
  font-weight:bold;
  text-align:right;
}
.notificationWizard .field td input {
  width:98%;
}
.notificationWizard .note td {
  font-style:italic;
  padding-bottom:16px;
}
.notificationWizard .submit td {
  text-align:center;
  padding:8px;
}


.process {
  margin:32px;
}
.process .stage {
  display:inline-block;
  vertical-align:top;
  width:calc( 20% - 40px - 24px );
  border:1px solid #000;
  border-radius:6px;
  padding:8px 12px;
  box-shadow:2px 2px 3px rgba(0,0,0,0.3);
}
.process .stage .icon {
}
.process .stage .label {
  font-size:18px;
  font-family:"Kepler Std";
  margin-bottom:6px;
  padding-bottom:8px;
  text-align:center;
  border-bottom:2px dotted #000;
}
.process .stage .desc {
  font-style:italic;
}
.process .link {
  display:inline-block;
  vertical-align:top;
  width:48px;
  margin-top:16px;
  text-align:center;
}
.process .link::after {
  content:"➡";
  font-weight:bold;
  font-size:20px;
  font-family:"Kepler Std";
}

@media only screen and (max-width: 850px) {
  .process .stage, .process .link {
    display:block;
    width:initial;
  }
  .process .link::after {
    content:"⬇";
  }
}

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