/*********************************************************************/
/*********************************************************************/
/**** ----------------------------------------------------------  ****/
/****       THE HUMANE REPRESENTATION OF MODELS PROJECT           ****/
/**** ----------------------------------------------------------  ****/
/****    OPTIONAL MODERNIST  THEME: Supplementary stylesheet for  ****/
/****    the HROM interface                                       ****/                
/****    - Made by Little Sketches                                ****/                       
/****                                                             ****/             
/*********************************************************************/
/*********************************************************************/

  /****************************************************/
  /********** COLOUR PALETTES AND TYPOGRAPHY **********/
  /****************************************************/

    /** Colour palette CSS variables ***/
    :root {
      --modernTheme-foreground-color:#000;
      --modernTheme-background-color: #fff;
      --modernTheme-highlight-color: red;
    }

    /** Imported typfaces and classed styles ***/
    main.modern,
    .modern .tooltip__content{ 
      font-family:  'Poppins';     
    }
    .modern .strong {
      font-weight: bold;
    }

/*-------------------------------------------------------------------*/
/*------------------------  CONTENT SECTIONS ------------------------*/
/*-------------------------------------------------------------------*/

  #mainContent.modern .mainContent-container {
      background: var(--modernTheme-foreground-color);
  }

  /****************************************************/
  /***** PROLOGUE: "THE SETUP" SCENE / MAIN MENU  *****/
  /****************************************************/

    /***********************************/
    /***  FULL BLEED LAYOUT W / GRID ***/
    /***********************************/
      .modern .content-container.layout-F {
        grid-template-columns:  calc(20% - 1vw) calc(27.5% - 1vw) calc(5% - 2vw) calc(27.5% - 1vw) calc(20% - 1vw);
        grid-template-rows: 40% repeat(4, 2rem) calc(60% - 8rem - 7vw);
        grid-gap: 1vw;            
      }

    /**************************************************************/
    /*** 0. TOP SECTION: "SETUP" SCENE BANNER SECTION - Problem ***/
    /**************************************************************/
      .modern #setup-banner{
        grid-area: 1 / 1 / 8 / 6;
        grid-template-columns:  calc(20% - 1vw) calc(27.5% - 1vw) calc(5% - 1vw) calc(27.5% - 1vw) calc(20%);
        grid-template-rows: 40% repeat(4, 2rem) calc(60% - 8rem - 7vw);
        grid-gap: 1vw;       
      }
      .modern #setup-banner-background-container{
        grid-area: 1 / 1 / 7 / 7;
        background: url(../img/modern/scott-webb-GQD3Av_9A88-unsplash.jpg);        
        background-size: cover; 
        filter: brightness(1.2);
      }            
      .modern #setup-banner-background-container.context{
        background: url(../img/modern/scott-webb-0gSXazNJJ90-unsplash.jpg); 
        background-size: cover;
        filter: brightness(1.2);
      }            
      .modern #setup-banner-bgImage,
      .modern #setup-banner-bgFilter,
      .modern #setup-banner-bgOverlay{
        display: none; 
      }           
      .modern #setup-banner-title{
        grid-area: 1 / 1 / 2 / 3;
        color: var(--modernTheme-highlight-color);
        font-size: 8vw;   
        text-transform: lowercase;
        text-align: right;
        place-self: end end;             
        animation-duration: 500ms; 
        text-shadow: none ;
        z-index: 1;          
      }      
      .modern #setup-banner-return{
        grid-area: 6 / 5 / 7 / 6;
        font-size: 1.5rem;
        padding: 0rem 0.5rem;
        place-self: end end;
        width: fit-content;
        cursor: pointer;
        color: var(--modernTheme-foreground-color);
        background: var(--modernTheme-background-color);
        z-index: 3;
      }
      .modern #setup-banner-introLabel{
        grid-area:  2 / 4 / 4 / 5;
        color: var(--modernTheme-foreground-color);
        text-transform: lowercase;
        width: fit-content;
      }
      .modern #setup-banner-intro{
        text-align: left;
      }
      /* Menu styling*/
        .modern #setup-banner.configuration-A.menu {
            grid-template-columns: 2vw calc(100% - 5vw);
        }      
        .modern #setup-banner-introLabel.menu{
            grid-area:  3 / 2 / 4 / 4;
         }      
        .modern #setup-banner.menu{
          grid-area: 1 / 1 / 7 / 3;    
        }
        .modern #setup-banner-bgImage.menu{
          filter: brightness(0.35);
          animation-duration: 500ms;
        }
        .modern #setup-banner-intro.menu{
          grid-area: 1 / 1 / 2 / 3;
        }
        .modern #setup-banner-title.menu{
          grid-area: 1 / 1 / 2 / 3;          
          font-size: 5vw;  
        }
      /* Context paragraph */
        .modern #setup-context-container{
          grid-area: 1 / 4 / 6 / 5;           
          display: grid;   
          z-index: 1;
          color: var(--modernTheme-foreground-color);
          align-self: end;
        }
        .modern #setup-contextDescription-container{
          font-size: 1rem;          
          grid-area: 2 / 1 / 5 / 5; 
        }

    /********************************************************************/
    /*** ALL PANES (1-3) STYLING FOR MAIN MENU OPTIONS (TEXT TITLES)  ***/
    /********************************************************************/

      .modern #setup-pane-1, 
      .modern #setup-pane-2,
      .modern #setup-pane-3 {
        grid-template-columns: repeat(4, 25%);
        grid-template-rows:  repeat(4, 25%); 
      }
      .modern .pane-setupScene .svg-background,
      .modern .setup-pane-overlay{
        display: none;
      }
      .modern #setup-pane-1-label, 
      .modern #setup-pane-2-label, 
      .modern #setup-pane-3-label{
        grid-area: 1 / 1 / 2 / 5;
        cursor: pointer;
        color: var(--modernTheme-foreground-color);
        width: fit-content; 
        text-transform: lowercase;
      }
      .modern #setup-pane-1 {
        grid-area: 3 / 4 / 4 / 6;
      }
      .modern #setup-pane-2 {
        grid-area: 4 / 4 / 5 / 6; 
      }
      .modern #setup-pane-3 {
        grid-area: 5 / 4 / 6 / 6; 
      }
      /* LEFT MENU CONFIGRATION OF PANES AND OPTION LABELS */
      .modern .configuration-A #setup-pane-1,
      .modern .configuration-A #setup-pane-2,
      .modern .configuration-A #setup-pane-3{
        grid-template-columns:  3vw calc(100% - 4vw);
        grid-template-rows: 100%;
      }
      .modern .configuration-A #setup-pane-3{
        height: 20vh;
      }
      .modern .configuration-A #setup-pane-1{
        grid-area: 3 / 1 / 4 / 2;
      }
      .modern .configuration-A #setup-pane-2{
        grid-area: 4 / 1 / 5 / 2;
      }
      .modern .configuration-A #setup-pane-3{
        grid-area: 5 / 1 / 6 / 2;      
      }
      .modern .configuration-A #setup-pane-1-label, 
      .modern .configuration-A #setup-pane-2-label, 
      .modern .configuration-A #setup-pane-3-label{
        grid-area: 1 / 2 / 2 / 3;
        text-align: left;
      }

    /*************************************************************/
    /*** 1. LEFT "SETUP" SCENE PANE #1 - Baseline               **/
    /*************************************************************/

      /* Baseline layout: applied to baseline and context; */
      .modern  .content-container.layout-G {
        grid-template-columns: calc(30% - 1vw) calc(70% - 2vw);
      }
      /* Menu layout for setupScene */
      .modern  .content-container.layout-F.configuration-A {
        grid-template-columns: calc(30% - 1vw) calc(70% - 5vw);
        grid-template-rows: 37.5% repeat(4, 3rem) calc(62.5% - 12rem - 7vw);
      }
      .modern #setup-banner.configuration-A {
        grid-area:  1 / 1 / 8 / 2;
        grid-template-columns: 2vw calc(100% - 3vw);
        grid-template-rows: 30% repeat(4, 3rem) calc(70% - 12rem - 7vw);        
      }
      .modern #setup-pane-1.configuration-A {
        grid-area: 2 / 1 / 3 / 1;
      }     
      .modern .configuration-A .setup-label > div.primary-header {
        text-align: left;
        color: var(--modernTheme-foreground-color);
        font-size: 2vw
      }
      .modern .configuration-A .setup-label > div.primary-header.focus {
        background: var(--modernTheme-highlight-color);
        color: var(--modernTheme-background-color);
      }

    /*************************************************************/
    /** 2. CENTER "SETUP" SCENE PANE #2 - Action content        **/
    /*************************************************************/  

    /*************************************************************/
    /** 3. RIGHT "SETUP" SCENE PANE #3 - Plan content           **/
    /*************************************************************/  

      .modern #setupScene-container #battlePlan-allPanes{
        background: none;
        color: var(--modernTheme-foreground-color);
        text-shadow: 1px 1px 0px var(--modernTheme-background-color);
        font-size: 1rem;    
        padding: 0.5rem 1rem;    
        text-align: center;    
        height: fit-content;
        width: fit-content;   
        justify-self: end;
        grid-area: 3 / 1 / 5 / 6         
      }
      .modern #setupScene-container #battlePlan-allPanes.button{
        color: var(--modernTheme-foreground-color);
        border: 2px solid var(--modernTheme-foreground-color);   
        background: rgba(255, 255, 255, 0.5);  
      }
     .modern #setup-pane-3-title{
       display: none
     }      

/****************************************************/
/******  ACT I: THE "BASELINE" VISUALISATIONS  ******/
/****************************************************/

    .modern #baselineAct-container #baseline-pane-2::before {
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;      
        background: url(../img/modern/scott-webb-wsMwDxF8SKA-unsplash.jpg); 
        background-size: cover;
        filter: brightness(1.2);
  	}
    /* Greyscale background images on psuedo elemetns */
    .modern #baselineAct-container #baseline-pane-2.mapVis,
    .modern #baselineAct-container #baseline-pane-2.bubbleChart,
    .modern #baselineAct-container #baseline-pane-2.sankeyChart {
        background: none; 
    }
    .modern #baselineAct-container #baseline-pane-2.mapVis::before,
    .modern #baselineAct-container #baseline-pane-2.bubbleChart::before,
    .modern #baselineAct-container #baseline-pane-2.sankeyChart::before{      
      background: #fff
    }    
    .modern #baselineAct-container #baseline-vis-headline-container{
      grid-area: 2 / 3 / 4 / 6;
      z-index: 0;
    }
    /* Styling for headers/buttons */
    .modern  #baselineAct-container .chartHeader{
      padding: 0.5rem;
      border: 1px solid var(--modernTheme-foreground-color);
      box-shadow: 3px 3px 0px var(--modernTheme-foreground-color);
      background: linear-gradient(35deg, red, purple);
      z-index: 5;
    }
    /* Styling for summary metrics */
    .modern .baseline-headline-major{
      font-size: 3.5rem;
      color: var(--modernTheme-foreground-color);
      text-shadow: 1.5px 1.5px 0px var(--modernTheme-background-color);
    }
    .modern .baseline-headline-minor{
      color: var(--modernTheme-foreground-color);
      text-shadow: 0.5px 0.5px 0px var(--modernTheme-background-color); 
    }
    .modern #baselineTotalEmissionsUnit{
      font-size: 1.25rem;
      padding-bottom: 0.25rem;
      color: var(--modernTheme-foreground-color);
      text-shadow: 1px 1px 0px var(--modernTheme-background-color);  
    }
    .modern #baselineAct-container #baseline-vis-headline-showCharts-container {
      mix-blend-mode: difference;
      align-self: end;
    }
    .modern #baselineAct-container #baseline-vis-headline-showCharts-container.preview {
      grid-area: 3 / 4 / 4 / 6;
    }
    .modern #baselineAct-container #baseline-vis-headline-showCharts,
    .modern #baselineAct-container #baseline-vis-headline-chartsNarrative{
      font-size: 1rem;
      line-height: 1.2;
      padding: 0.5rem;
      border: 2px solid var(--modernTheme-foreground-color);
        background: var(--modernTheme-background-color);
    }
    .modern #baselineAct-container #baseline-vis-headline-showCharts:hover,
    .modern #baselineAct-container #baseline-vis-headline-chartsNarrative:hover {
      background: var(--modernTheme-highlight-color);
      color: var(--modernTheme-foreground-color);    
      background-color: var(--modernTheme-background-color);
    }
    .modern .baselinePerUnitEmissions-container .value{
      font-size: 1.25rem;
      color: var(--modernTheme-foreground-color);
      text-shadow: 1px 1px 0px var(--modernTheme-background-color);
    }
    .modern .baselinePerUnitEmissions-container .unit,
    .modern #baselineTotalEmissionsUnitAKA{
      font-size: 0.6rem;
      line-height: 1.5;
    }
    .modern .baseline-perUnit-unit {
      font-size: 0.75rem;
      color: var(--modernTheme-foreground-color);      
    }
    .modern svg.baseline-icon{
        fill: var(--modernTheme-foreground-color);
    }
    /* Chart preview in panes */
    .modern #baselineAct-container .baseline-vis-container{
      filter: grayscale(100%);
      animation-duration: 500ms;
    }
    .modern #baselineAct-container .baseline-vis-container:hover{
      filter: grayscale(0%);
    }
    .modern #baselineAct-container #baseline-vis-mapVis-container {
      grid-area: 5 / 3 / 6 / 4;
    }
    .modern #baselineAct-container #baseline-vis-bubbleChart-container{
      grid-area: 5 / 4 / 6 / 5;
    }
    .modern #baselineAct-container #baseline-vis-sankeyChart-container{
      grid-area: 5 / 5 / 6 / 6;
    }

    /* Full screen */
    .modern #baselineAct-container #baseline-vis-mapVis-container.fullscreen,
    .modern #baselineAct-container #baseline-vis-bubbleChart-container.fullscreen,
    .modern #baselineAct-container #baseline-vis-sankeyChart-container.fullscreen{
      grid-area: 2 / 2 / 7 / 7;
    }
    .modern #setupScene-container.fullscreen{
      display: none;
    }
    .modern #baselineAct-container.fullscreen{
      grid-template-columns: 0% calc(100% - 2vw);
      grid-gap: 0vw;
    }
    .modern #baselineAct-container #baseline-vis-mapVis-container #mapVis-header{
      grid-area: 1 / 1 / 1 / 4;
    }

  /* Visualisation Return button */
    .modern #baseline-vis-return-container{
      display: block;
      grid-area: 6 / 5 / 6 / 9;
      z-index: 3;
      place-self: end;
    }
    .modern #baseline-vis-return{
      cursor: pointer;
      font-size: 1.5rem;
      padding: 0.0rem 0.5rem;
      place-self: center end;
      color: var(--modernTheme-foreground-color);
      background: var(--modernTheme-background-color);
    }
    /* Sankey chart preview transform */
    .modern #baselineAct-container #sankeyChart-container{
      animation-duration: 500ms;
    }
    .modern #baselineAct-container #sankeyChart-container.preview{
      transform: translateY(-35%) scale(0.15);
    }
    .modern svg#sankeyChart .annotationLabel{
      font-size: 1.25vw;
    } 
    /* Bubble chart controls */
    .modern #baselineAct-container #baseline-vis-bubbleChart-container #bubbleChart-controls {
      color: var(--modernTheme-foreground-color);
    }

/****************************************************/
/***** ACT IIa: INTRO & MENU FOR "ACTIONS MODEL" ****/
/****************************************************/

  .modern #actionActMenu-container #actionActMenu-background-section,
  .modern #actionActMenu-container  #actionActMenu-title-section {
    grid-area: 1 / 2 / 1 / 3;
  }
  .modern #actionActMenu-container #actionActMenu-background-section::before {
    content: "";
    width:  calc(70% - 3.5vw);
    height: calc(100% - 4vw);
    position: absolute;      
    background: url(../img/modern/scott-webb-01D8FzqTue8-unsplash.jpg);
    background-size: cover;
    background-position: center center;
    animation-duration: 500ms;
    filter: brightness(1.2);
  }
    .modern #actionActMenu-background,
    .modern #actionActMenu-titleBlock, 
    .modern #actionActMenu-context-container{
      display: none;
    }
    /* Primary sections (static background styling) */
    .modern #actionActMenu-title-section{
      mix-blend-mode: difference;
      transition: all 800ms;
      pointer-events: all;
    }
    /* Menu buttons */
    .modern #setup-pane-3-battlePlanMenu-container{
      grid-area:  3 / 2 / 4 / 2;
      padding-left: 3rem 
    }

    /* BUSINESS CASE EXPLORER SECTIONS */
    .modern .actionDescription-section-container,
    .modern .actionOutput-section-container,
    .modern .actionInput-section-container,
    .modern .svg#costCurve .subLabel {
      color: var(--modernTheme-foreground-color);    
    }
    .modern .grid-2x4.configuration-C   {
      grid-template-columns: 1vw 25%;
      grid-template-rows: calc(30% - 1vw) 40% calc(30% - 1vw);
    }
    .modern * .area-1{
      background: rgba(255,255,255,0.85);      
      grid-area: 1 / 2 / 3 / 5;
    }
    .modern * .area-2{
      background: var(--modernTheme-background-color);  
      position: fixed;
      top: 0;
      right: 0;
      width: 22.5vw;
    }
    .modern * .area-3{
      background: rgba(255,255,255,0.85);  
      grid-area: 3 / 2 / 3 / 5;     
    }
    /* For showing business case from MACC*/
    .modern .grid-2x1.configuration-B {
      display: grid;
      padding-left: 0vw;
      transform: none;
     }
    .modern .content-container.layout-A2 {
      grid-template-columns: calc(30% - 1vw);
      grid-template-rows: 5vw calc(100% - 7vw);
      grid-template-areas: "info";
    }
    .modern .grid-2x1.configuration-B .area-1{
      background: none;
      grid-area: 1 / 1/ 2 / 2;      
    }   
    .modern .grid-2x1.configuration-B .area-2{
      display: none;
    }           
    .modern .grid-2x1.configuration-B .area-3{
      background: none;
      grid-area: 2 / 1 / 3 / 2   
    }  
    /* TANGLE VARIABLE STYLING: IN ACTION EXPLORER AND OVERLAY; */
    .modern *  #businessCase-container .tangleVariable {
      color: var(--modernTheme-highlight-color);
    }
    .modern * #businessCase-container.grid-2x1.configuration-B .tangleVariable {
      color: var(--modernTheme-highlight-color);
    }
    .modern * #businessCase-container.grid-2x1.configuration-B .tangleVariable {
      color:  var(--modernTheme-highlight-color);
    }
    .modern * #businessCase-container.grid-2x1.configuration-B .tangleVariable.TKAdjustableNumber {
       border-bottom: 1.25px dashed  var(--modernTheme-highlight-color);
    }     
    .modern * #businessCase-container.grid-2x1.configuration-B  .action_temporalAssumption{
      box-shadow: inset 0 -0.15rem 0 0  var(--modernTheme-highlight-color);
    }
    .modern * #businessCase-container.grid-2x1.configuration-B  .action_temporalAssumption:hover {
      box-shadow: inset 0 -2.5rem 0 0  var(--modernTheme-highlight-color);
      color: var(--modernTheme-background-color);
    }
    .modern .tipBC{
      color: var(--modernTheme-highlight-color);        
    }

/****************************************************/
/***** ACT IIb: THE INTERACTIVE "ACTIONS MODEL" *****/
/****************************************************/
    /* Pane header labels */
    .modern .content-section .pane > .label > span{
        border-bottom: 2px solid var(--modernTheme-foreground-color);
        color: var(--modernTheme-foreground-color);   
        text-transform: lowercase;     
    }
    .modern #actionActMenu-actionList-container{
      grid-area:  1 / 2 / 3 / 3;        
      display: grid;
        grid-template-columns: 5% 30% 20% 40% 5%; 
        grid-template-rows: 5% repeat(3, 30%) 5% ;    
      z-index: 1;
    }
      /* Grouped action items */
      .modern #actionActMenu-actionGroup-container{
        grid-area: 2 / 2 / 5 / 4;
        color: var(--modernTheme-foreground-color);
        padding: 0.25rem 2rem 0rem 0rem;   
      }
      .modern #actionActMenu-actionGroup-mainHeader{
        text-transform: uppercase;
        font-size: 1.25rem;
      }
      .modern .actionMenu-group-header{
        padding: 0.5rem 1rem 0.5rem 0.25rem;
        font-size: 0.9rem;
        cursor: pointer; 
        width: fit-content;      
      }
      .modern .actionMenu-group-header.focus{
        background: var(--modernTheme-foreground-color);
        color: var(--modernTheme-background-color);
      }        
      .modern #actionActMenu-actionList-container .actionMenu-group{
        color: var(--modernTheme-foreground-color);
        grid-area: 3 / 4 / 5 / 5;
        place-self: end start;       
      }
      .modern .actionMenu-actionItem{
        padding: 0.15rem;
        font-size: 0.75rem;
      }
      .modern .actionMenu-group-header:hover,
      .modern .actionMenu-actionItem:hover{
        color: var(--modernTheme-background-color);
        cursor: pointer;
        padding-right: 0.5rem;        
      }
      .modern .actionMenu-group-header:hover{
        background: rgba(255, 255, 255, 0.5);
      }     
      .modern .actionMenu-group-header:active,        
      .modern .actionMenu-actionItem:hover{
        background: var(--modernTheme-foreground-color); 
      }

    /**************************************************/
    /*** CONTENT >  BUSINESS CASE INFORMATION PANE  ***/
    /*************************************************/
      .modern #actionAct-information-section {
        grid-area: 2 / 1 / 3 / 2;
      }
      .modern #actionAct-information-section.grid-2x1 {
        grid-area:  2 / 1 / 2 / 2;
      }
      .modern .content-container.layout-A {
          grid-template-columns: 25% calc(75% - 3vw);
          grid-template-rows: calc(20% - 1.5vw) calc(80% - 1.5vw);
          grid-gap: 1vw;
          grid-template-areas:
              "title vis"
              "info vis";
      } 

      /*******************************************************/
      /**** BUSINESS CASE INFORMATION SUB-PANES / TABLES  ****/
      /*******************************************************/
        .modern .actionDescription-container> div > strong {
          font-weight: bold;
        }
        .modern #actionCostCurve-header > span {
          display: block;
          color: var(--modernTheme-foreground-color);
          font-weight: bold;
          font-size: 2rem;
          line-height: 1.1;
          padding: 1vw;
          text-shadow: -1px -1px 0 var(--modernTheme-background-color), 1px -1px 0 var(--modernTheme-background-color), -1px 4px 0 var(--modernTheme-background-color), 1px 4px 0 var(--modernTheme-background-color);
        }
      	/* Summary (key input/output) tables */
        .modern #bc-actionInput-container .table-container {
          padding: 0rem 0rem 1rem 1rem;
        }
        .modern #bc-actionOutput-container {
          padding: 0rem 1rem;
        }
        .modern #bc-actionOutput-moreButton{
          cursor: pointer;
          color: var(--modernTheme-foreground-color);
          padding: 0.5rem 1.25rem;
          font-size: 0.75rem;
          text-align: right;         
        }     
        .modern #bc-actionOutput-moreButton:hover{
          background: var(--modernTheme-foreground-color);
          color: var(--modernTheme-background-color);
          text-transform: lowercase          
        }                
        .modern .table-container .summaryTable-header {
          font-weight: bold;
        	font-size: 0.65rem;  
        	padding-top: 0.25rem;
        }
        .modern table {
          font-size: 0.65rem;  
        }
        .modern table.summaryTable .unit {
        	font-size: 0.5rem; 
        	margin-top: 0.15rem;
        }
        .modern table.bc-outputTable.summaryTable{
          color: var(--modernTheme-foreground-color);
        }
        .modern table.bc-outputTable.summaryTable td {
          	margin-top: 0.35rem;
        }
        .modern table.bc-outputTable.summaryTable .label,
        .modern table.bc-outputTable.summaryTable .value  {
          font-weight: bold;            
        	font-size: 0.65rem;     
        	align-self: center;    
        }
        .modern .description {
         	font-size: 0.65rem;
        }
      	.modern .description ol {
        	padding-inline-start: 1.5rem;
      	}
      	.modern .description li {
        	padding-bottom: 0.5rem;
       	}
        .modern .description.header {
          padding: 1rem 1rem 0rem 1rem;
          font-weight: bold;
          text-transform: lowercase
        }
        .modern .description.text {
          margin-top: 0.5rem;
          padding-left: 1rem;            
          padding-right: 1rem;    
          font-weight: lighter;        
        }
        .modern .description.text.bc-prices-description{
          padding-left: 0rem;     
        }
        .modern .description.text .boldVariable {
          font-weight: bold;
        }
        /* Description text Padding for the grid-2x4 configuration-C shape 1 layout */
        .modern .grid-2x4.configuration-C.shape1 .bc-actionDescription-general {
            padding: 0rem 2rem 1rem 1rem;
        }
        .modern .grid-2x4.configuration-C.shape1 .bc-actionDescription-opportunity {
            padding: 0rem 2rem 1rem 1rem;
        }
        /* Data tables Formatting */
        .modern #actionAct-visNarrative-container #bc-dataTable-container{
            grid-area: 4 / 5 / 10 / 10;
            mix-blend-mode: hard-light;
        }
        .modern #actionAct-visNarrative-container #bc-dataTable-container .bc-data-container{
          box-shadow: none;
        }
        .modern #actionAct-visNarrative-container #bc-dataTable-container .perspective.bc-data-container {
          transform: translateZ(0px) translateX(50%) translateY(-60%) rotateY(0deg) scale(0.1)
        }
        .modern #actionAct-visNarrative-container #bc-dataTable-container .bc-data-container{
          background-color: rgba(255, 255, 255, 0.85);
          color: var(--modernTheme-foreground-color);        
        }
        .modern #actionAct-visNarrative-container #bc-dataTable-container .gridTable .sparkline{
          stroke: var(--modernTheme-foreground-color);
        }
        .modern #actionAct-visNarrative-container #bc-dataTable-container .gridTable .sparkArea{
          fill: var(--modernTheme-foreground-color)
        }
        .modern #actionAct-visNarrative-container #bc-dataTable-container .gridTable .modelYearRow{
          border-bottom: 1px solid var(--modernTheme-foreground-color);
        }
        .modern #actionAct-visNarrative-container #bc-dataTable-container .bc-data-container .bc-tablesGroup-container .mainHeader{
          font-size: 1rem;
          padding-bottom: 0.5rem;
          border-bottom: 2px var(--modernTheme-foreground-color) solid;
          width: fit-content;
          text-transform: lowercase;;
        }
        .modern #actionAct-visNarrative-container #bc-dataTable-container .bc-data-container .bc-tablesGroup-container .header{
          font-size: 1rem;   
          margin-top: 1rem;   
          color: var(--modernTheme-highlight-color);         
        }
        .modern #actionAct-visNarrative-container #bc-dataTable-container .bc-data-container .bc-tablesGroup-container .subHeader{
          font-size: 0.75rem;     
          font-style: italic;        
        }
    	/* dark style visulisaiton narrative */  	
    	.modern #actionAct-vis-header > div,
    	.modern .setup-label > div.primary-header {
  			line-height: 1.2;
  			padding: 0.5rem 2rem 0.5rem 0.5rem;
  			transition: all 300ms ease-in-out;
        font-size: 1.75rem;
    	}
	    .modern .setup-label> div.primary-header:hover {
  			background: linear-gradient(35deg, red, purple);
  			color: var(--modernTheme-foreground-color);    
	    }
		.modern #actionAct-visNarrative-container #actionAct-actionSelector-container{
      grid-area: 2 / 2 / 3 / 10;
	  	perspective: 1500px;
	  	transform-origin: 50% 50%;
	  	transition: all 500ms;
		}
		.modern #actionAct-actionSelector-container #actionAct-actionSelector-div{
      transform: translateY(-2.5vw) scale(1.5);
      transition: all 500ms;
      transform-origin: left;  
      mix-blend-mode: difference; 	
		}
		.modern #actionAct-actionSelector-container #actionAct-actionSelector-div.dataTableView{
      transform: translateY(-2.5vw) scale(1.5);
		}
	   .modern #actionAct-actionSelector-container  select{
			font-weight: lighter;      
			color: var(--modernTheme-background-color);
			background: var(--modernTheme-foreground-color);
            font-size: 1.75vw;
            border: none;
            height: 3.5rem; 
            width: 62.5vw;
            white-space: pre-wrap;    
            text-transform: lowercase;
            letter-spacing: 0.5px;
    }
    .modern #actionAct-visNarrative-container #actionAct-vis-return{
      filter: none;
      font-size: 1rem;
      grid-area: 10 / 7 / 11 / 11;
    }
    .modern #actionAct-visNarrative-container #actionAct-vis-return{
        cursor: pointer;
        padding: 0.5rem;
        color: var(--modernTheme-foreground-color);
        background: var(--modernTheme-background-color);        
    }
    .modern #actionAct-visNarrative-container #actionAct-vis-return:hover{
      fill: var(--modernTheme-foreground-color);    
    }

    /********************************************/
    /*** ACTION CONTENT > VISUALISATION PANE ***/
    /*******************************************/
    .modern #actionAct-visualisation-section{
      grid-area: 1 / 1 / 3/ 3;
      z-index: -1;
    }

/****************************************************/
/********* ACT III: EXPLORING THE "BATTLE"  *********/
/****************************************************/
  .modern #planAct-container.content-container.layout-H {
    grid-template-columns: calc(30% - 1vw) calc(20% - 1vw) calc(50% - 2vw);
    grid-template-areas:
        "paneD paneA paneB"
        "paneD paneA paneC";
  }
  .modern  #planAct-container .visHeader {
		padding: 0.5rem;      
		background: none;
		border: 2px solid var(--modernTheme-foreground-color);
    cursor: auto;
    color: var(--modernTheme-foreground-color);
  }
  .modern #planAct-container #plan-vis-costCurve-container #costCurve-header .visHeader #costCurvePrevious, 
  .modern #planAct-container #plan-vis-wedgesChart-container #wedgesChart-header .visHeader #wedgesPrevious, 
  .modern #planAct-container #plan-vis-playbook-container #playbook-header .visHeader #playbookPrevious,
  .modern #planAct-container #plan-vis-costCurve-container #costCurve-header .visHeader #costCurveNext, 
  .modern #planAct-container #plan-vis-wedgesChart-container #wedgesChart-header .visHeader #wedgesNext, 
  .modern #planAct-container #plan-vis-playbook-container #playbook-header .visHeader #playbookNext {
    color: var(--modernTheme-foreground-color);
    font-size: 1.25rem;
    opacity: 0.8
  }

  /*********************************************/
  /*** VISUALISATION STORY CONTROLS <HEADER> ***/
  /*********************************************/
    .modern .planSection-narrative{
      background:rgba(0, 0, 0, 0.1);
      padding: 0.5rem 1rem;
      font-size: 0.8rem;
      line-height: 1.2;
    }
    .modern .planSection-narrativeDetail{
      background: var(--modernTheme-foreground-color);      
      padding: 0.5rem 1rem;
      font-size: 0.8rem;
      line-height: 1.2;
      border: 2px solid var(--modernTheme-background-color);
    }
    .modern .planSection-narrative p.header {
      font-weight: bold;
      margin-bottom: 0.15rem;   
    }
    .modern #playbook-narrativeDetail{
        font-size: 0.6rem;  
    }

  /*************************************/
  /*** COST CURVE VISUALASTION STORY ***/
  /*************************************/
    .modern .content-container.layout-J {
      grid-template-columns: calc(30% - 1vw) calc(70% - 2vw);
      grid-template-rows: calc(100% - 2vw) 0%;
      grid-template-areas:        
        ". paneB ."
        ". . ."
    }
    .modern #planAct-container #plan-pane-2{
      background: none;
      overflow: hidden;        
    } 
    .modern #planAct-container #plan-pane-2::before {
      content: "";
      width:  100%;
      height: 100%;
      position: absolute;      
        background:  var(--modernTheme-background-color); 
        animation-duration: 1500ms
    }
    .modern #planAct-container.layout-J #plan-pane-2::before  {
        background: var(--modernTheme-background-color); 
    }
    .modern #costCurve-narrative.planSection-narrative{
      width: 80%;        
    }
    .modern #costCurve-time{
      font-weight: bold;
      font-size: 2rem; 
      margin-bottom: -1.25rem;
      padding-left: 0.2rem;
      color: var(--modernTheme-foreground-color); 
      mix-blend-mode: exclusion;
    }
    .modern #planAct-container #plan-vis-costCurve-container .slider {
      width: 100%
    }
    .modern #planAct-container  #actionCostCurve-infoClose{
      font-weight: bold;
      left: 0vw;
      top: 1vw;
      transform: none;
      text-align: left;
      width: fit-content;
      font-size: 1rem;
      padding: 0.5vw 1.5vw .5vw 3vw;
    }    
    .modern svg#costCurve .axis,
    .modern svg#costCurve .tick > text,
    .modern svg#costCurve .label,
    .modern svg#costCurve .subLabel,
    .modern svg#costCurve #legend-header,
    .modern svg#costCurve  #costCurveMetrics-group {
      fill: var(--modernTheme-foreground-color); 
    }
    .modern svg#costCurve #costCurveMetrics-group #ccMetrics-header.costCurve-metrics {
      font-size: 15px
    }
    .modern svg#costCurve .subLabel,
    .modern svg#costCurve .costCurveTargetText,
    .modern svg#costCurve .costCurveAbatementText{
      font-size: 10px;
    }
    .modern svg#costCurve #costCurveAbatementLine{
      stroke: aqua
    }
    .modern svg#costCurve .costCurveAbatementText{
      fill: aqua;
    }
    .modern svg#costCurve #costCurveTargetLine{
      stroke: pink
    }
    .modern svg#costCurve .costCurveTargetText{
      fill: pink
    }

  /********************/
  /*** WEDGES CHART ***/
  /********************/
    .modern #wedgesChart-narrative.planSection-narrative{
        width: 100%;
    }  
    .modern .content-container.layout-K {
      grid-template-columns: calc(30% - 1vw) calc(70% - 2vw);
      grid-template-rows: calc(100% - 2vw) 0%;
      grid-template-areas:
          ". paneC ."
          ". . .";        
    }
    .modern #planAct-container #plan-pane-3 {
      background: none;
      overflow: hidden;  
    }
    .modern #planAct-container #plan-pane-3::before {
      content: "";
      width:  100%;
      height: 100%;
      position: absolute;      
      background: var(--modernTheme-background-color);
      background-size: cover;
      background-position: center center;
      animation-duration: 1500ms;
    }
    .modern #planAct-container.layout-K #plan-pane-3::before  {
      background:var(--modernTheme-background-color);
      background-size: cover;        
    }
    .modern #planAct-container #plan-vis-playbook-container #wedgesChart-header.allPanes{
      grid-area: 6 / 2 / 6 / 6;
    }
    .modern svg#wedgesChart .tick > text{
      fill: var(--modernTheme-foreground-color);
      font-size: 0.6rem;
    }
    .modern svg#wedgesChart .label.wedgesChart, 
    .modern svg#wedgesChart .subLabel.wedgesChart,
    .modern svg#wedgesChart #netEmissionsLabel, 
    .modern svg#wedgesChart #actionEmissionsPathMarker {
      fill: var(--modernTheme-foreground-color);      
      filter: none;
    }
    .modern svg#wedgesChart .actionWorld{
      stroke: var(--modernTheme-foreground-color);  
      filter: none;            
    }
    .modern svg#wedgesChart .referenceWorld{
      stroke: var(--modernTheme-highlight-color); 
      filter: none;         
    }
    .modern svg#wedgesChart #referenceEmissionsLabel,
    .modern svg#wedgesChart #referenceEmissionsPathMarker{
      fill: var(--modernTheme-highlight-color);  
      filter: none;

    }
  /********************************/
  /*** COST CURVE & WEDGE CHART ***/
  /********************************/
    .modern .content-container.layout-I {
      grid-template-columns: calc(30% - 1vw) calc(70% - 2vw);
      grid-template-rows: calc(50% - 1.5vw) calc(50% - 1.5vw) ;
      grid-template-areas:
          ". paneB ."
          ". paneC .";        
    }
    .modern #planAct-container #plan-vis-wedgesChart-container #wedgesChart-header {
      grid-area: 1 / 4 / 2 / 8;
    }
    .modern #planAct-container.layout-I #plan-pane-2::before  {
      background: var(--modernTheme-background-color);
      background-size: cover;     
    }
    .modern #planAct-container.layout-I #plan-pane-3::before  {
      background: var(--modernTheme-background-color);
      background-size: cover;       
    }

  /********************/
  /***** PLAYBOOK *****/
  /********************/
    .modern .content-container.layout-L {
      grid-template-columns: calc(30% - 1vw) calc(70% - 2vw);
      grid-template-rows: calc(100% - 2vw) 0%;
      grid-template-areas:
        ". paneA ."
        ". . .";        
    }
    .modern #planAct-container #plan-pane-1{
      background: none;
      overflow: hidden;        
    }     
    .modern #planAct-container #plan-pane-1::before {
      content: "";
      width:  100%;
      height: 100%;
      position: absolute;      
      background: var(--modernTheme-background-color);
      background-size: cover;
      background-position: center center;
      filter: brightness(1.1);
      animation-duration: 1500ms;
    }
    .modern #planAct-container.layout-L #plan-pane-1::before  {
      background: var(--modernTheme-background-color);
      background-size: cover;    
       filter: grayscale(0);     
    }
    .modern #planAct-container #plan-vis-playbook-container #playbook-header.allPanes{
      grid-area:  2 / 1 / 3 / 8;
    }
    .modern #pb_group-timelineLabels{
      text-shadow: 3px 3px 0px var(--modernTheme-foreground-color)
    }
    .modern .pb_connector{
      filter: none;
      stroke: #000
    }
    .modern .simplePlanAnnotation {
      fill: var(--modernTheme-foreground-color);
    }
    .modern