/*

  Copyright 2025 Battelle Energy Alliance, LLC

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

*/
@use "sass:color";
@use '../../../node_modules/bootstrap/dist/css/bootstrap.min.css';
/* ---- Report styles ---- */

$primary-color: #052637;
$secondary-color: #094997;

$gray-50: #fafafa;
$gray-100: #f2f2f2;

$primary-550: $primary-color;
$primary-900: $secondary-color;


* {
  font-family: Arial, sans-serif;
}

body {
  padding: 3em;
}

.report-body {
  max-width: 800px;
  margin: 0 auto 0 auto;
}

.report-title {
  margin-left: 25px;
  text-align: center;
  font-family: Verdana;
  font-size: 40px;
  letter-spacing: 12px;
  color: #0f3c7a;
}

.report-body-edm {
  margin-left: 25rem;
  margin-right: 1in;
  // max-width: 800px;
}

.side-toc {
  position: fixed;
  left: 0;
  top: 0;
  border-right: 1px solid #ddd;
  height: 100vh;
  padding-top: 1.2rem;
  padding-left: .7rem;
  overflow-y: auto;
}


@media screen {
  .inline-toc {
    display: none;
  }
}

@media print {
  .report-body {
    min-width: 80% !important;
    max-width: 80% !important;
    margin-left: 1in;
    margin-right: 1in;
  }

  .report-body-edm {
    min-width: 80% !important;
    max-width: 80% !important;
    margin-left: 1in;
    margin-right: 1in;
  }

  .side-toc {
    display: none;
  }

  .noprint {
    visibility: hidden;
  }
}


.MarkedFlag {
  width: 15px;
  height: auto;
}

.Filter {
  width: 15px;
  height: auto;
}

.WarningTriangle {
  width: 15px;
  height: auto;
}

h1 {
  line-height: 115%;
  page-break-after: avoid;
  font-size: 20.0pt;
  color: #0A5278;
  margin: 2em 0 1em 0;
}

h2 {
  line-height: 115%;
  page-break-after: avoid;
  font-size: 13.0pt;
  color: #0A5278;
  margin-top: 1.3em;
  // margin-left: 1em;
}

h3 {
  line-height: 115%;
  page-break-after: avoid;
  font-size: 12.0pt;
  color: #0A5278;
  // margin-left: 2em;
}

h4 {
  font-style: italic;
}

h2,
h3,
h4 {
  margin-bottom: .5em;
}


ol {
  margin-bottom: 0in;
}

ul {
  margin-bottom: 0in;
}

/* -------------------------------------------------------------------------------------------- */

.align-center {
  text-align: center;
}

.disclaimer-1 {
  font-size: 10.0pt;
  line-height: 115%;
}

div.disclaimer-blurb {
  width: 80%;
  border: 1px solid #dee2e6;
  border-radius: 1em;
  padding: 1em;
  background-color: #f2f2f2;
  margin: 0 auto 2em auto;
}

.page-break {
  page-break-before: always;
  clear: both;
}

@media only screen {
  .page-break {
    border-top: 1px solid #336699;
    margin-top: 3rem;
  }
}

.cover-page-bottom {
  margin: 5em 2em 0 2em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}


/* ---- TOC styles ---- */

.toc-entries a {
  color: inherit;
  display: block;
  line-height: 150%;
}

.toc-entries a:visited {
  color: inherit;
}

.toc-entries a.l2 {
  margin-left: 2em;
}

.toc-entries a.l3 {
  margin-left: 4em;
}


.intro {
  font-style: italic;
  font-size: 10pt;
  line-height: 115%;
}


/* --- atomic styles --- */

.w-20pct {
  width: 20% !important;
}

.w-fit {
  width: fit-content !important;
}

.ws-normal {
  white-space: normal !important;
}

.ws-no-wrap {
  white-space: nowrap !important;
}

.w-100 {
  width: 100% !important;
}

.bb-1-ddd {
  border-bottom: 1px solid #ddd !important;
}

.fs-small {
  font-size: 0.9rem !important;
  line-height: 1rem;
}

.fs-smaller {
  font-size: 0.8rem !important;
  line-height: 0.9rem;
}


/* ---- common display container widget ---- */
.cset-container {
  display: inline-block;
  border: 2px solid #000;
  border-radius: 1.5em;
  box-shadow: 5px 5px 5px #0004;
}

.cset-container>div:first-child {
  background-color: #0A5278;
  color: #fff;
  text-align: center;
  padding: 1em;
  border-top-left-radius: 1.5em;
  border-top-right-radius: 1.5em;
  border-bottom: 2px solid #000;
}

.cset-container>div:last-child {
  padding: 1em;
}




/* ---- SAL display widget ---- */

.sal-display {
  display: inline-block;
  font-family: Arial;
  padding: 1em;
  border-radius: .5em;
  border: 2px solid #000;
  box-shadow: 5px 5px 5px #0004;
  color: #fff;
  background-color: #51953E;
}

.sal-display .sal-label {
  color: #fff;
}

.sal-display.moderate .sal-label {
  color: #000;
}

.sal-display .sal-value {
  margin-top: .8em;
  padding: 5px;
  background-color: #fff;
  border: 2px solid #000;
  text-align: center;
  color: #000;
}

.sal-display.low {
  background-color: #51953E;
}

.sal-display.moderate {
  background-color: #F9CE15;
}

.sal-display.high {
  background-color: #d67900;
}

.sal-display.very-high {
  background-color: #aa0202;
}


/* ---- Table styles ---- */

table.cset-table,
table.cset-table-4 {
  width: calc(100% - 2em);
  margin: 0 auto 2em auto;
  border-collapse: collapse;
}

table.cset-table th,
table.cset-table-4 th {
  background-color: #336699;
  color: #fff;
  font-weight: bold;
}

table.cset-table th,
table.cset-table td,
table.cset-table-4 th,
table.cset-table-4 td {
  padding: 10px;
  border: 1px solid #999;
  vertical-align: top;
}



table.cset-table-2 {
  width: calc(100% - 2em);
  margin: 0 auto 2em auto;
  border-collapse: collapse;
}

table.cset-table-2 th,
table.cset-table-2 td {
  border: 1px solid #c1c1c1;
  padding: .8rem;
  page-break-inside: avoid;
  break-inside: avoid;
}

table.cset-table-2 tr.pale-green {
  background-color: #EAF1DD;
  background-color: #ecf6f9;
}



table.cset-table-3 {
  width: calc(100% - 2em);
  margin: 0 auto 1em auto;
  border-collapse: collapse;
}

table.cset-table-3 th,
table.cset-table-3 td {
  border: 1px solid #c1c1c1;
  padding: .8rem;
  page-break-inside: avoid;
  break-inside: avoid;
}

table.cset-table-3 th {
  text-align: left;
  font-weight: normal;
  background-color: #d9e6ed;
}

table.cset-table.alt-shade tr:nth-child(even) {
  background: #f2f2f2;
}

table.cset-table.alt-shade tr:nth-child(odd) {
  background: #fafafa;
}


table.related-questions {
  width: 100%;
  border-collapse: collapse;
  border: none;
}

table.related-questions td {
  border-top: none;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  border-left: none;
}

table.related-questions tr td:last-child {
  border-right: none;
}

table.related-questions tr:last-child td {
  border-bottom: none;
}



table.table-site-info {
  width: 80%;
  margin: 0 2em 2em 2em;
}

table.table-site-info td {
  padding: .3rem;
  vertical-align: top;
}

table.table-site-info td:first-child {
  color: #0A5278;
  max-width: 50%;
  padding-right: 1.5rem;
}


table.finding-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2em;
}

table.finding-table td {
  vertical-align: top;
  ;
  border: 1px solid #c1c1c1;
  padding: 5px;
}

td.tint1 {
  background-color: #d9e6ed;
}

td.tint2 {
  background-color: #f2f7f9;
}

td.tint3 {
  background-color: #f2f7f9;
  padding-left: 1em;
  vertical-align: top;
}


table.label-value td {
  padding: .2rem;
  padding-right: 1rem;
  vertical-align: top;
}

table.td-align-top td {
  vertical-align: top;
}

table.td-padding-half-rem td {
  padding: .5rem;
}

table.td-padding-point-4-rem td {
  padding: .4rem;
}

.shaded-red td {
  background-color: #ffe7e7;

  @media print {
    background-color: #ffe7e7 !important;
  }
}

.text-underline {
  text-decoration: underline !important;
}



table.assessment-summary {
  width: 100%;
  color: $primary-color;
}

// hide some columns in phone mode
table.assessment-summary tr:nth-child(even) {
  background: $gray-100;
}

table.assessment-summary tr:nth-child(odd) {
  background: $gray-50;
}

table.assessment-summary th:nth-child(1) {
  padding-left: 12px;
}

table.assessment-summary td {
  padding: 0.2rem 0.5rem;
}

table.assessment-summary th {
  background-color: $secondary-color;
  color: $gray-50;
  font-weight: 500;
  padding: .5rem;
}

.table.table-td-p1 th,
.table.table-td-p1 td {
  padding: .25rem !important;
}

.table.table-td-p2 th,
.table.table-td-p2 td {
  padding: .5rem !important;
}

.table.table-td-small th,
.table.table-td-small td {
  font-size: .875em !important;
}

// force transparent
.table>:not(caption)>*>* {
  background-color: transparent !important;
}

/*
@media only screen and (max-width: 1200px) {
  table.assessment-summary td > button > span {
    display: none;
  }
}
@media only screen and (max-width: 992px) {
  table.assessment-summary td > button > span {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  table.assessment-summary td:nth-child(2),
  table.assessment-summary th:nth-child(2) {
    display: none;
  }

  table.assessment-summary td:nth-child(3),
  table.assessment-summary th:nth-child(3) {
    display: none;
  }
}

@media only screen and (max-width: 360px) {
  table.assessment-summary td:nth-child(2),
  table.assessment-summary th:nth-child(2) {
    display: none;
  }
  table.assessment-summary td:nth-child(3),
  table.assessment-summary th:nth-child(3) {
    display: none;
  }
  table.assessment-summary td:nth-child(4),
  table.assessment-summary th:nth-child(4) {
    display: none;
  }
}*/


/* ---- Fix for Chart.js charts that shrink infinitely (they must be contained within a parent div) ---- */
canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ---- signature styles ---- */

.signature-block span {
  float: left;
  margin: 20px 10px 20px 0;
  padding-top: 5px;
  border-top: 1px solid #000;
  text-align: left;
  font-weight: bold;
  font-style: italic;
}

.signature-block span.signature {
  width: 400px;
}

.signature-block span.date {
  width: 150px;
}

.concern-list {
  margin: 0 0 1em 0;
}

.concern-list tr>td:first-child {
  vertical-align: top;
  font-weight: bold;
  font-size: 130%;
  padding-right: .5em;
}

.concern-list tr>td {
  padding-bottom: 1em;
}

.warning-text>div {
  margin-bottom: 1rem;
}

.warning-text>div:last-child {
  margin-bottom: 0;
}

// Angular 7 will not compile with this present
// @media print{
//     -webkit-print-color-adjust: exact;
//     print-color-adjust: exact;
// }


/////////////////// ACET REPORT CLASSES ///////////////////

.irp-table th,
.irp-table td {
  vertical-align: top;
  padding: .5rem .3rem;
}

.alert-incomplete {
  color: #fff;
  background-color: #5B565C;
  border-color: #787878;
  padding: 0.5rem 0.75rem !important;
}

.alert-baseline {
  color: #fff;
  background-color: #3498DB;
  border-color: #2E86C1;
  padding: .50rem .75rem !important;
}

.alert-evolving {
  color: #fff;
  background-color: #2E86C1;
  border-color: #2874A6;
  padding: .50rem .75rem !important;
}

.alert-intermediate {
  background-color: #2874A6;
  border-color: #21618C;
  color: #fff !important;
  padding: .50rem .75rem !important;
}

.alert-advanced {
  background-color: #21618C;
  border-color: #1B4F72;
  color: #fff !important;
  padding: .50rem .75rem !important;
}

.alert-innovative {
  background-color: #1B4F72;
  border-color: #154360;
  color: #fff !important;
  padding: .50rem .75rem !important;
}

.alert {
  text-align: center;
}

.factor-section {
  margin-bottom: 3rem;
}

.factor-section>.component-section {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #bebebe;
}

.factor-section>.component-section:last-child {
  border-bottom: none;
}

.component-pill {
  width: 70px !important;
  margin: 0 auto !important;
  white-space: nowrap !important;
}

/**
  * following 3 for component sections
  */
.mat-detail-green {
  background-color: rgb(198, 239, 206);
  color: #006100;
}

.mat-detail-orange {
  background-color: rgb(255, 235, 156);
  color: rgb(156, 101, 0);
}

.mat-detail-red {
  background-color: rgb(253, 233, 217);
  color: #9c0006;
}

/**
  *Maturity Model chart styling
  */
.step-graph-chart {
  transform: translate(-38px, -216px);
  width: 100%;
  margin-bottom: -10em;
}

.piechart {
  background-image: conic-gradient(gray 360deg)
}

.piechartBackground {
  border-radius: 50%;
  background-color: #006000;
}

.piechartitem {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  position: absolute;
}

.pieChartcontainer {
  position: relative;
  padding: 1em;
  width: 200px; //Cant figure out how to get the auto width to apply to an absolutley position contents
}

body,
.piechart {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pieChartRow {
  display: flex;
  flex-direction: row;
  margin-bottom: 3em;
  page-break-inside: avoid;
  break-inside: avoid;
}

.flex-row-item {
  display: flex;
}

.flex {
  display: flex;
}

.level-indicator-container {
  background: linear-gradient(5deg, rgba(31, 82, 132, 1) 0%, rgba(58, 128, 194, 1) 100%);
  color: white;
  border-radius: 5%;
  width: 8em;
  height: 12em;
  // flex-basis: 15%;
  margin-right: 5em;

  align-items: center;
  display: flex;
  justify-content: center;
}

.level-indicator-container .rbTitle {
  margin-top: 0.4em;
  line-height: 1.2em;
  font-size: 2em;
  text-align: center;
}

.level-indicator-container .rbLevel {
  font-size: 4em;
  font-weight: 900;
  text-align: center;
  text-shadow: 1px 1px black;
}

.level-indicator-container .rbLevelRAA {
  font-size: 2em;
  font-weight: 900;
  text-align: center;
  text-shadow: 1px 1px black;
}

.pieChartLabelContainer {
  display: flex;
  flex-direction: column;
  margin: 1em 0em;
}

.pieChartLabel {
  display: flex;
  align-items: center;
  flex: 1;
  font-size: 20px;
  font-weight: 600;
  font-family: system-ui;
}

.pieChartRowTitle {
  font-size: 1.2em;
  font-weight: bold;
  // letter-spacing: .06em;
  margin-bottom: 1em;
}

.barChartRowContainer {
  // background:red;
  flex-direction: row;
  display: flex;
  flex-grow: 1;
}

.barChartContainer {
  flex-direction: column;
  flex: 1;
}

.barChartRow {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  // border: solid 1px black;
}

.barChartBar {
  display: flex;
  height: 3em;
  // background: green;
  width: 100%;
  padding: .3em;
}

.barChartLabel {
  display: flex;
  // background: blue;
  width: 4em;
  justify-content: center;
  align-items: center;
}

.barContainer {
  // background:green;
  flex-direction: column;
}

.barAnswered {
  border-radius: 0 6px 6px 0%;
  box-shadow: 2px 2px rgba(0, 0, 0, .2) // background: linear-gradient(193deg, rgba(2,0,36,1), rgba(0,212,255,1) 100%)
}

.barChartLabels {
  display: flex;
  flex-direction: row;
  margin-left: 4em;

}

.barChartHorizontalLabel {
  display: flex;
  margin-right: calc(calc(100% - 4em) * .25);
  text-align: center;
  align-content: flex-end;
}

.parentContainer {
  margin: 5em;
}

.gridGraphContainer {
  /* background: rgba(150,0,0,.5); */
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

.graphDataRow {
  height: 2em;
  /* margin: .5em 0; */
}

.gridGraphLabels {
  /* background: rgba(0,150,0,.5); */
  display: flex;
  flex-shrink: 1;
  flex-direction: column;
}

.gridGraphLabel {
  display: flex;
  align-self: flex-end;
  margin-right: 1em;
}

.gridGraphDataContainer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.gridGraphData {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  align-items: center;
}

.gridGraphBackground {
  /* display: flex;
    flex-grow: 1 */
  display: flex;
  position: absolute;
  z-index: -4;
  flex-direction: row;
}

.gridGraphBackground div {
  // display: flex;
  // flex-grow: 1;
  border-style: solid;
  border-color: rgba(0, 0, 0, .2);
  border-width: 1px 0px 0px 1px;
  /* height: 1em; */
}

.gridGraphBackground div:last-child {
  border-width: 1px 1px 0px 1px;
}

.gridGraphData:nth-last-child(2) div {
  border-bottom-width: 1px;
}

.gridGraphBar {
  margin: .2em 0;
  height: 60%;
  display: flex;
  background: rgba(0, 0, 150, .2);
}

.gridGraphBackgroundLabels {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

.gridGraphBackgroundLabels div {
  display: flex;
  flex-grow: 1;
}

.gridColumn {
  width: 10%;
}


/*  -------------------PYRAMID CHART        --------------*/

:host {
  --arrow-width: 30em;
  --half-arrow-width: calc(var(--arrow-width) / 2);
  --arrow-top-height: 4em;
  --arrow-bottom-height: 3em;
  --pyramid-row-height: 3em;
  --arrow-base-width-ratio: .9;
  --row-growth-rate: .15;
  --background-color-mask: white;
  --arrow-font-size: 1.5em;
  --center-seperator-width: 3px;
  --row-spacing: .75em;
  --blue-gradient: linear-gradient(5deg, rgba(31, 82, 132, 1) 0%, rgba(58, 128, 194, 1) 100%);
  --blue-gradient-light: linear-gradient(5deg, rgba(31, 82, 132, .1) 0%, rgba(58, 128, 194, .1) 100%);
  --green-gradient: linear-gradient(5deg, rgba(98, 154, 109, 1) 0%, rgba(31, 77, 67, 1) 100%);
  --blue-text: rgba(41, 100, 162, 1);
  --green-text: rgba(60, 110, 85, 1);
  --corner-size: 10px;
  --bar-height: 30em;
  --bar-spacing: 1em;
  --bottom-seperator-extra-width: 1em;
  --header-label-height: 100px;
  --header-spacing-from-bar: .9;
  /* 1 = on the bar, .5 = high off the bar*/
  --blue-text: rgba(31, 82, 132, 1);
  --white-text: rgba(255, 255, 255, 1);

  --grid-background-highlight: rgba(0, 0, 0, .08)
}

.pyramidGraphLevelIndicator {
  position: absolute;
  color: var(--green-text);
  background: white;

}

.pyramidGraph {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.arrowContainer {
  background: var(--blue-gradient);
  width: var(--arrow-width);
  height: calc(var(--arrow-top-height) + var(--arrow-bottom-height));
  display: flex;
  flex-direction: column;
  align-self: center;
}

.arrowMask {
  display: flex;
  flex-direction: column;
}

.topHalfArrowMask {
  display: flex;
  flex-direction: row;
  height: var(--arrow-top-height)
}

.bottomHalfArrowMask {
  height: var(--arrow-bottom-height)
}

.triangle-topright {
  height: 0;
  border-top: var(--arrow-top-height) solid var(--background-color-mask);
  border-right: var(--half-arrow-width) solid transparent;
}

.triangle-topleft {
  height: 0;
  border-top: var(--arrow-top-height) solid var(--background-color-mask);
  border-left: var(--half-arrow-width) solid transparent;
}

.bottomHalfArrowMask {
  display: flex;
  flex-direction: row;
}

.bottomHalfArrowMask .div {
  display: flex;
}

.arrowBaseMask {
  background: var(--background-color-mask);
  flex-grow: 1;
  display: flex;
}

.arrowBaseCenter {
  display: flex;
  flex-basis: calc(var(--arrow-base-width-ratio) * var(--arrow-width));
  flex-direction: row;
}

.pyramidRowItem {
  justify-content: center;
  flex-basis: 50%;
}

.arrowBaseCenter div,
.pyramidLevel div {
  display: flex;
  flex-basis: 50%;
  /* justify-content: center; */
  align-items: center;
}


.arrowBaseCenter div {
  color: white;
  font-family: sans-serif;
  font-weight: bolder;
  justify-content: center;
  font-size: var(--arrow-font-size);
}

.pyramidLevel div {
  font-family: sans-serif;
  font-weight: bold;
  font-size: calc(var(--arrow-font-size) * .8);
}

.arrowBaseCenter div:first-child,
.pyramidLevel div:first-child {
  border-style: solid;
  border-width: 0 var(--center-seperator-width) 0 0;
  border-color: var(--background-color-mask);
}

.corners {
  display: flex;
  flex-grow: 1;
}

.pyramidLevel {
  position: relative;
  display: flex;
  justify-content: center;
  background: var(--blue-gradient-light);
  height: var(--pyramid-row-height);
  margin: var(--row-spacing) 0 0 0;
  align-self: center;
}

.pyramidLevelInTarget {
  background: var(--blue-gradient);
  color: white;
}

.pyramidLevelTarget {
  background: var(--green-gradient);
  color: white;
}

.levelOne {
  /* width: calc(var(--arrow-width) * calc( 1 + calc(var(--row-growth-rate) *
  0))); */
  width: calc(var(--arrow-width) * var(--arrow-base-width-ratio))
}

.levelTwo {
  width: calc(calc(var(--arrow-width) * var(--arrow-base-width-ratio)) * calc(1 + calc(var(--row-growth-rate) * 1)));
}

.levelThree {
  width: calc(calc(var(--arrow-width) * var(--arrow-base-width-ratio)) * calc(1 + calc(var(--row-growth-rate)* 2)));
}

.levelFour {
  width: calc(calc(var(--arrow-width) * var(--arrow-base-width-ratio)) * calc(1 + calc(var(--row-growth-rate)* 3)));
}

.levelFive {
  width: calc(calc(var(--arrow-width) * var(--arrow-base-width-ratio)) * calc(1 + calc(var(--row-growth-rate)* 4)));
}

.pyramidLevel span {
  background: red;
}

.pyramidRowLabel {
  flex-basis: 0;
  display: inline-block;
  position: absolute;
  color: var(--blue-text);
  margin-left: 1em;
  font-size: 1em;
}

.stackedBarChart {
  width: 800px;
  padding-top: 2em;
  margin-left: var(--bar-spacing);
}

.stackBarChartUpperLeftLabels {
  font-weight: bold;

}

.stackBarChartUpperLeftLabels div:not(:first-child) {
  color: var(--blue-text);
  font-style: italic;
}

.stackedBarChartBody {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  margin: 0 var(--bottom-seperator-extra-width);
}

.stackedBarChartColumn {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex-basis: 20%;
  height: var(--bar-height);
  margin: 0 var(--bar-spacing);
}

.barSection {
  background: rgb(51, 54, 216);
  color: var(--white-text);
  border-radius: var(--corner-size) var(--corner-size) 0 0;
  margin-bottom: calc(-1 *var(--corner-size));
  z-index: -1;
  font-size: 1.4em;
  font-weight: bold;
}

.barSectionInnerLabel {
  display: flex;
  justify-content: center;
}

.notAnswered {
  background: rgb(255, 222, 33);
  color: var(--blue-text);
}

.barHeader {
  position: relative;
  bottom: var(--header-label-height);
  margin-bottom: calc((calc(var(--header-label-height) * var(--header-spacing-from-bar))) * -1);
  display: flex;
  flex-direction: column;
}

.barHeader div,
.stackedBarChartBottomLabel div {
  align-self: center;
  text-align: center;
}

.mainHeader,
.bottomLabel {
  font-size: 1em;
}

.bottomLabel {
  flex-direction: column;
  display: flex;
  color: var(--blue-text);
  font-size: 1.3em;
  font-weight: bold;
}

.bottomLabelNumbers {
  flex-direction: row;
  display: flex;

}

.secondaryHeader {
  font-size: .75em;
}

.stackedBarChartBase {
  background-color: rgba(31, 82, 132, 1);
  height: var(--corner-size);
  border-radius: var(--corner-size)
}

.stackedBarChartBottomLabels {
  display: flex;
  flex-direction: row;
  margin: 0 var(--bottom-seperator-extra-width)
}

.stackedBarChartBottomLabel {
  display: flex;
  flex-direction: row;
  flex-basis: 20%;
  width: 1em;
  height: 1em;
  flex-direction: column;
}

.stackedBarChartBottomTitle {
  display: flex;
  justify-content: center;
  margin-top: 4em;
  font-size: 1.2em;
}

.questionsByDomainTable {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.questionsByDomainTableHeader {
  background: var(--blue-gradient);
  color: white;
}

.questionsByDomainTableHeader div {
  display: flex;
}

.questionsByDomainTableRow {
  display: flex;
  flex-basis: 100%;
  flex-direction: row;
}

.DomainTableRow div:nth-child(1) {
  width: 60% // background:cyan;
}

.DomainTableRow.question div:nth-child(1) {
  // flex-basis: calc(80% - 1em);
  // background:cyan;
  padding-left: 1.5em
}

.DomainTableRow.domain div:nth-child(1) {
  // flex-basis: calc(80% - 1em);
  // background:cyan;
  padding-left: .5em
}

.DomainTableRow div:not(:first-child) {
  text-align: center;
}

.DomainTableRow div:nth-child(2) {
  flex-basis: 10%;
  border-left: solid 1px rgba(0, 0, 0, .2);
  // background: magenta
}

.DomainTableRow div:nth-child(3) {
  flex-basis: 10%;
  border-left: solid 1px rgba(0, 0, 0, .2);
  // background:yellow
}

.DomainTableRow div:nth-child(4) {
  flex-basis: 10%;
  border-left: solid 1px rgba(0, 0, 0, .2);
  // background:yellow
}

.DomainTableRow div:nth-child(5) {
  flex-basis: 10%;
  border-left: solid 1px rgba(0, 0, 0, .2);
  // background:yellow
}


.DomainTableRow.domain {
  font-weight: bold;
  background-color: white;
  border-bottom: solid black 1px;
}

.DomainTableRow.question {
  color: var(--blue-text);
}


.questionsByDomainTableDomainSection .questionsByDomainTableRow:nth-child(even) {
  background-color: var(--grid-background-highlight);
}

.tdHeader {
  padding: 1em;
  text-align: center;
}

h1.pageHeader {
  font-size: 1.5em;
  text-align: center;
}

.stackedBarChartTitle {
  text-align: center;
  font-weight: bold;
  font-size: 1.6em;
}

.levelTitle {
  font-weight: bold;
  margin-bottom: 0;
}

.levelDescriptions h1 {
  font-weight: bold;
}



////// EDM Report Styles ////////@at-root
.red-score {
  background-color: #DC3545;
  border: 1px solid #DC3545;
  color: #fff;
}

.yellow-score {
  background-color: #FFC107;
  border: 1px solid #FFC107;
  color: #000;
}

.gold-score {
  background-color: #b17300;
  border: 1px solid #b17300;
  color: #fff;
}

.green-score {
  background-color: #28A745;
  border: 1px solid #28A745;
  color: #fff;
}

.blue-score {
  background-color: #367190;
  border: 1px solid #367190;
  color: #fff;
}

.light-gray-score, .unanswered-score {
  background-color: #d3d3d3;
  border: 1px solid #d3d3d3;
  color: #000;
}

.default-score {
  background-color: #6C757D;
  border: 1px solid #6C757D;
  color: #fff;
}

@media print {
  * {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .red-score {
    background-color: #DC3545;
    border: 1px solid #DC3545;
    color: #fff;
  }

  .yellow-score {
    background-color: #FFC107;
    border: 1px solid #FFC107;
    color: #000;
  }

  .green-score {
    background-color: #28A745;
    border: 1px solid #28A745;
    color: #fff;
  }

  .light-gray-score {
    background-color: #d3d3d3;
    border: 1px solid #d3d3d3;
    color: #000;
  }

  .default-score {
    background-color: #6C757D;
    border: 1px solid #6C757D;
    color: #fff;
  }
}

//EDM
.edm-appendix-a-header-graph-examples {
  display: flex;
  flex-direction: column;
}

.edm-appendix-a-header-title {
  width: 40%;
  padding-right: 1em;
  font-weight: 600;
  font-size: 1.2em;
}

.edm-aa-header-legend-label {
  margin: 0 .5em;
  font-size: .7em;
  align-self: center;
}

.edm-appendix-a-header-graph-examples div {
  display: flex;
  flex-direction: row;
}

.edm-aa-header-legend-bar {
  flex-grow: 1;
  z-index: 0;
  justify-content: center;
}

.edm-aa-header-legend-small-text {
  font-size: 8px;
}

.edm-aa-header-legend-small-text {
  position: relative;
}

.edm-top-descriptor-arrow {
  border-left: solid 0.1em black;
  position: absolute;
  height: 28px;
  z-index: 1;
}

.edm-top-descriptor-text {
  padding-left: 1em;
  width: 12em;
}

.edm-aa-header-legend-small-text-bottom {
  padding-left: 4em;
  width: 12em;
  font-size: 8px;
  position: relative
}

.edm-bottom-descriptor-text {
  padding-left: 1em
}

.edm-bottom-descriptor-arrow {
  border-left: solid 0.1em black;
  position: absolute;
  height: 25px;
  z-index: 1;
  bottom: 7px;
}

.edm-bottom-descriptor-arrow:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 8px;
  top: -5px;
  background-image: radial-gradient(circle at center, black 2px, transparent 2px), radial-gradient(circle at center, black 2px, transparent 2px);
  background-size: 8px 8px;
  background-position: top center;
  background-repeat: no-repeat;
  left: -4px;
}

.edm-bottom-info-text-container {
  display: flex;
  font-size: 8px;
  margin-top: 4px;
}


.edm-bottom-info-text {
  display: flex;
}

// .score-green {
//   background-color: rgb(160,183, 61);
// }
// .score-yellow {
//   background-color: rgb(255, 199, 50);
// }
// .score-red {
//   background-color: rgb(239,67,35);
// }

//EDM CHART COMPONENETS
.triple-bar-chart {
  display: flex;
  flex-basis: 100%;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: relative;
}

.tbc-title {
  font-size: .7rem;
  font-weight: 600;
}

.tbc-bars {
  display: flex;
  width: 90%;
  flex-basis: 100%;
  flex-direction: row;
  height: 100%;
  align-self: center;
  padding-bottom: .2em;
  margin-top: 1.3em;
  position: relative;
  bottom: 0em;
}

.tbc-bar {
  display: flex;
  flex-basis: 100%;
  margin: 0 0.1em;
  align-self: flex-end;
  justify-content: center;
  position: relative;
  bottom: 0em;
}

.tbc-bar-label {
  position: relative;
  bottom: 1.3em;
  color: black !important;
}

.tbc-bottom-percent {
  display: flex;
  width: 100%;
  align-self: center;
  border-top: solid 1px black;
  padding: 0 5%;
}

.edm-horizontal-bar-chart {
  display: flex;
  width: 100%;
}

.edm-hzbc-bar {
  display: flex;
  width: 100%;
  // font-size: 10px;
}

.edm-hzbc-bar div {
  display: flex;
  flex-basis: 100%;
  justify-content: center;
}

:host {
  --edm-aa-col-one-width: 55px;
  --edm-aa-col-two-width: 180px;
  --edm-aa-col-three-width: 180px;
  --edm-aa-table-margin: 2px;
  --edm-aa-page-height: 66em;
}




.edm-aa-section {
  display: flex;
  flex-direction: column;
  padding: 2em 0;
  height: var(--edm-aa-page-height)
}

.edm-aa-headers {
  display: flex;
}

.edm-aa-header {
  background-color: black;
  color: white;
  padding-left: 3px;
  font-size: 0.7em;
  font-weight: 700;
}

.edm-body-col-1,
.edm-body-col-2,
.edm-body-col-3,
.edm-aa-left-id {
  margin-right: .2em;
}

.edm-body-col-1 {
  display: flex;
  width: var(--edm-aa-col-one-width);
}

.edm-body-col-2 {
  display: flex;
  width: var(--edm-aa-col-two-width);
}

.edm-body-col-3 {
  display: flex;
  width: var(--edm-aa-col-three-width);
}

.edm-body-col-4 {
  display: flex;
  flex-grow: 1;
}

.edm-aa-body-split {
  display: flex;
  margin-top: var(-edm-aa-table-margin);
  flex-basis: 100%;
}

.edm-aa-left-id {
  display: flex;
  color: white;
  writing-mode: tb-rl;
  transform: rotate(-180deg);
  justify-content: center;
  padding-right: 1em;
  margin-top: 4px;
  font-weight: 600;
}

.edm-aa-right-content {
  display: flex;
  width: calc(100% - var(--edm-aa-col-one-width));
  flex-direction: column;
}

.edm-aa-body {
  flex-direction: column;
  display: flex;
  flex-basis: 100%;
  margin-top: 3px;
}

.edm-aa-body-category-section {
  display: flex;
  margin-top: 5px;
  border-top: solid black 1px;
}

.edm-aa-body-function-summary {
  display: flex;
  flex-grow: 1;
  font-weight: 700;
}

.edm-aa-body-function-graph {
  display: flex;
  width: 100%;
  height: 120px;

}

.edm-aa-body-category {
  width: var(--edm-aa-col-two-width);
}

.edm-aa-body-category-text {
  padding: 0 12px;
}

.edm-aa-body-subcategories {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.edm-aa-function-summary {
  min-height: 100px;
  border: none
}

.edm-aa-body-subcategory {
  flex-grow: 1;
  display: flex;
}

.edm-aa-body-subcategory:not(:last-child) {
  border-bottom: solid black .1px;
}

div.function-statement {
  font-size: .7rem;
}

.edm-aa-body-references {
  display: flex;
}

.edm-aa-body-subcat-text {
  display: flex;
  width: var(--edm-aa-col-three-width);
  padding-right: 6px;
  padding-bottom: 1em;
}

.no-border, .b-none {
  border: none !important;
}

.edm-aa-body-subcat-graph-container {
  display: flex;
  margin-top: 3px;
  width: var(--edm-aa-col-two-width);
  height: 120px;
}

.edm-aa-body-subcat-graph {
  flex-grow: 1;
  padding: .3em 0em 0em;
  font-size: small;
}

.edm-aa-body-category-graph {
  padding: 0 1em;
  width: 100%;
  height: 100%;
}

.edm-aa-function-summary-text {
  width: 1px;
  font-weight: 700;
  padding: 0 6px;
  font-size: 1.3rem;
}

.edm-aa-body-category,
.edm-aa-body-subcategory {
  font-size: .5em;
  display: flex;
}

.cmu-header-logo {
  width: 20%;
  height: auto;
}



///  Spinner Styles ////////////////////////////////////////
//   These are variablized in the app SCSS files.  Maybe do that here some day.
.spinner-container {
  padding: 8px;
}

.spinner-container>.spinner,
.spinner-container>div {
  border: 4px solid #f2f2f2;
  border-radius: 50%;
  border-top: 4px solid #052637;
  width: 100px;
  height: 100px;
  -webkit-animation: spin-wait 1.3s linear infinite;
  /* Safari */
  animation: spin-wait 1.3s linear infinite;
  margin-left: auto;
  margin-right: auto;
}

.spinner-container.toc>.spinner,
.spinner-container.toc>div {
  border-top: 4px solid #6390a9;
}

div.spinner-size-50 {
  max-width: 50px;
  max-height: 50px;
}

/* Safari */
@-webkit-keyframes spin-wait {
  0% {
    -webkit-transform: rotate(0deg);
  }

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

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

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

/* spinner fade animation */
.spinner-fade-in {
  opacity: 0 !important;
  transition: 0.2s ease-in-out all;
}

.spinner-show {
  opacity: 1 !important;
}

.spinner-hide {
  display: none;
}





///   CMMC 2.0 Styles ///////////////////////////////////////
.cmmc2-level-1 {
  color: #fff;
  background-color: #862180;
}

.cmmc2-level-2 {
  color: #000;
  background-color: #98c355;
}

.cmmc2-level-3 {
  color: #fff;
  background-color: #254a5e;
}




///   Supplemental Guidance Styles ////////////////////////////////////////////////

.sub-header-1 {
  font-weight: bold;
  font-size: 1.1rem;
  color: $primary-550;
  margin-bottom: .3rem;
}

.sub-header-2 {
  font-weight: bold;
  font-size: 1rem;
  color: $primary-900;
  margin-bottom: .2rem;
}

ol.alpha-bracket {
  list-style-type: none;
  counter-reset: list-counter;
}

ol.alpha-bracket li {
  counter-increment: list-counter;
  margin-bottom: 5px;
}

ol.alpha-bracket li::before {
  content: "[" counter(list-counter, lower-alpha) "] ";
}



///   CIE Styles ////////////////////////////////////////////////
.cie-questions-header-collapse-button-radius {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.cie-questions-header-expand-button-radius {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}



/// nested formatting ///////////////////////////////////
.nested-question-title {
  font-weight: bold;
}

.nested-question-text,
.nested-question-text p {
  margin-bottom: 1rem;
}

.nested-option-block,
.nested-option-block p {
  margin-bottom: 1rem !important;
}

.nested-option-block-report {
  margin-bottom: 1rem;
}




/////////////////////////////////////////////////////////////////
:host {
  --fs-col-one-width: 20px;
  --fs-col-two-width: 180px;
  --fs-col-three-width: 180px;
  --fs-col-four-width: 1;
  --fs-col-margin: 3px;
}

.fs-col-one,
.fs-col-two,
.fs-col-three,
.fs-col-four {
  display: flex;
}

.fs-col-one,
.fs-col-two,
.fs-col-three {
  margin-right: var(--fs-col-margin);
}

.fs-col-one {
  width: var(--fs-col-one-width);
}

.fs-col-two {
  width: var(--fs-col-two-width);
  padding: 0 16px;
}

.fs-col-three {
  width: var(--fs-col-three-width);
}

.fs-col-four {
  flex-grow: 1;
}

.framework-summary-container {
  display: flex;
  flex-direction: column;
}

.fs-headers {
  display: flex;
  flex-direction: row;
}

.fs-body-row {
  display: flex;
  flex-direction: row;
  border-top: solid black;
  font-size: 12px;
}

.function-color-bar {
  margin: 3px;

}

.fs-body-row-triple-graph-container {
  display: flex;
  min-height: 120px;
}

.fs-body-row-triple-graph {
  width: 100%;
  height: 130px;
}

.fs-category-sub-row-container {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}

.fs-category-sub-row {
  display: flex;
  padding: 3px 0;
}

.fs-category-sub-row-container .fs-category-sub-row:not(:last-child) {
  border-bottom: solid .1px black;
}

.fs-categroy-sub-row-text {
  display: flex;
}

.fs-categroy-sub-row-graph {
  display: flex;
  flex-grow: 1;
}

.fs-title {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.5em;
}

.fs-title-graphs {
  border: none;
}

.fs-bar-legend {
  width: calc(100% - calc(var(--fs-col-one-width) + var(--fs-col-two-width) + var(--fs-col-three-width)));
  margin-left: -3em;
}

.goal-question-summary-container {
  display: flex;
  flex-direction: row;
}

.gqs-group {
  display: flex;
  flex-direction: column;
  margin-right: 3px;
}

.gqs-cell {
  text-align: center;
  margin: 0 1px 1px 1px;
  font-size: .7rem;
  font-weight: 600;
}

.gqs-cell-default {
  background-color: rgb(220, 220, 220)
}

.gqs-group-title {
  background-color: rgb(145, 145, 145);
  color: white;
}

.gqs-group-row {
  display: flex;
  flex-direction: row;
}

.gqs-cell-result {
  width: 60px;
}

.gqs-cell-sub-cat {
  width: 20px;
}

.gql-container {
  width: 100;
  display: flex;
  flex-direction: row;
  font-size: 10px;
}

.gql-left-col {
  display: flex;
  flex-direction: column;
}

.gql-header {
  font-size: 150%;
  display: flex
}

.gql-sub-header {
  display: flex;
}

.gql-color-chart {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.gql-color-chart-col {
  display: flex;
  flex-direction: column;
  width: 50%
}

.gql-color-chart-row {
  width: 100%;
  display: flex;
  margin: 2px 0px;

}

.gql-color-chart-color {
  display: flex;
  height: 14px;
  width: 14px;
}

.gql-color-chart-label {
  display: flex;
  flex-grow: 1;
  white-space: pre-line;
}

.gql-color-chart-label::before {
  content: " = ";
  margin-left: 4px;
  margin-right: 4px;
}

.gql-right-col {
  display: flex;
  margin-top: 10px;
  width: 24em;
}

.gql-acronym-table {
  display: flex;
  flex-direction: column;
  font-size: 75%;
}

.gql-acronym-row {
  display: flex;
  width: 100%;
}

.gql-acronym-id {
  display: flex;
  width: 32px;
  justify-content: flex-end;
}

.gql-acronym-label::before {
  content: " = ";
  margin-left: 4px;
  margin-right: 4px;
}

.gql-acronym-label {
  white-space: pre-line;
  margin-left: 4px;
}


// Dashboard
///////////////////////////////////////////////////////////////////////
.score-container {
  background-color: #0A5278;
  color: #ffffff;
  border-radius: 4px;
  padding: .3em;
  margin: 4px 0;
  text-align: center;
}

.score-container div:nth-child(1) {
  white-space: nowrap;
  padding: 0 1em;
  text-align: center;
}

.score-container div:nth-child(2) {
  margin-top: .2em;
  background-color: #ffffff;
  color: #0a5278;
  border-radius: 4px;
  width: 100%;
  text-align: center;
  padding: .2em;
}

.score-container .has-score {
  font-size: 2rem;
}


/////////// custom checkbox and radio styles




.checkbox-custom,
.radio-custom {
  opacity: 0;
  display: none;
}

.checkbox-custom-label,
.radio-custom-label {
  display: flex;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}

.checkbox-custom-label,
.radio-custom-label {
  position: relative;
}

.checkbox-custom+.checkbox-custom-label:before,
.radio-custom+.radio-custom-label:before {
  content: '';
  background: #fff;
  border: 2px solid $secondary-color;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  min-width: 20px;
  height: 20px;
  padding: 2px;
  margin: 2px 10px 2px 2px;
  text-align: center;
}

.checkbox-custom:checked+.checkbox-custom-label:before {
  background: $secondary-color;
  box-shadow: inset 0px 0px 0px 4px #fff;
}

.radio-custom+.radio-custom-label:before {
  border-radius: 50%;
}

.radio-custom:checked+.radio-custom-label:before {
  background: $secondary-color;
  box-shadow: inset 0px 0px 0px 4px #fff;
}

.checkbox-custom:focus+.checkbox-custom-label,
.radio-custom:focus+.radio-custom-label {
  // outline: 3px solid #8bb4f8; /* focus style */
  box-shadow: 0 0 3pt 2pt #8bb4f8;
}

.checkbox-custom:disabled+.checkbox-custom-label,
.radio-custom:disabled+.radio-custom-label {
  cursor: unset;
}

.checkbox-custom:disabled+.checkbox-custom-label:before,
.radio-custom:disabled+.radio-custom-label:before {
  border-color: color.adjust($secondary-color, $lightness: 35%);
}

.checkbox-custom:disabled:checked+.checkbox-custom-label:before,
.radio-custom:disabled+.radio-custom-label:before {
  background-color: color.adjust($secondary-color, $lightness: 35%);
}

//

.btn-secondary {
  background-color: #d9d9d9;
  color: #262626;
  height: fit-content;
}

.btn-secondary:hover {
  background-color: $secondary-color;
  border-color: $secondary-color;
  color: white;
  fill: white;
}

.btn-secondary>Label {
  font-weight: 500;
}

.btn-secondary:hover>Label {
  color: white;
  fill: white;
}

.btn-secondary:disabled {
  fill: white;
}

//////////////////////////////////////////////////////////////////
