:root {
  --pralana_green: #167E5A;
}

.page-container {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1em;
  justify-content: space-around;

  /*width changed 5/6/2025*/
  /*width: fit-content;*/
  width: 100vw;

  height: fit-content;
  min-width: 0;  /* possible fix for Firefox */
  min-height: 0;  /* possible fix for Firefox */

  padding: 0;
  box-sizing: border-box;

  /* TESTING: */
  /*background-color: grey;*/
}

/* --------------- partials/page_title.html ------------ */
.page-header-container {
  position: sticky;
  top: 3.25em;
  flex: 0;
  width: 100%;

  /* TESTING: */
  /*max-width: 100%;*/
  /*background-color: black;*/

}

.page-header {
  top: 3.25em;
  flex: 0;
  display: flex;
  flex-direction: column;
  padding: .5em 1em;
  margin: 0;
  width: 100%;
  z-index: 10;
  pointer-events: auto;
  background-color: white;
  box-shadow: 0 3px 3px silver;
  min-width: 0;  /* possible fix for Firefox */
  min-height: 0;  /* possible fix for Firefox */

}

.page-header-row {
  display: flex;
  justify-content: space-between;
  column-gap: 1em;
  row-gap: 0;
  flex-wrap: wrap;
}

.page-title {
  display: flex;
  justify-content: start;
  gap: 0;
  font-size: 16px;
  font-weight: 500;
  align-items: self-start;
  flex-wrap: nowrap;
}

@media (max-width: 1000px) {
  .page-title {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0;
    align-items: flex-start;
  }
}

.page-title-part {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap; /* Prevents wrapping within each part */
}

.right-pointer {
  padding: 0 .25em;
  height: .9em;
  width: auto;
  fill: var(--pralana_green);
  transform: translateY(1px);
}

.page-header-right {
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-grow: 1;
  gap: 0;
}


/*!* ------ Row 2 of page-header-right contains:Plan recap row showing status, final year, etc ----- *!*/
/* Plan recap */
/* Buttons for Force Recalc all and Copy  */
.page-header-right-container {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  font-weight: 600;
  position: relative;
  z-index: 12;
  flex-wrap: wrap;
  margin-left: 4em;
}


@media (max-width: 1200px) {
  .page-header-right-container {
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .5em;
  }
}

#total-initial-balance {
  vertical-align: top;
  font-weight: 500;
  white-space: nowrap;
}


.page-header-right-part1 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  gap: 2em;
  margin-right: 2em;
}
@media (max-width: 1200px) {
  .page-header-right-part1 {
    /* On narrow viewports, this will keep the scenario recaps far enough
    left of the right side so that the plan-recap-tooltip will not overflow
    the right side of the viewport. */
    margin-right: 10em;
  }
}

.page-header-right-part2 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  flex-wrap: wrap;
  flex-grow: 1;
  gap: 0;
}

.page-header-right-part2-row1 {
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  flex-grow: 1;
  gap: 2em;
}

.page-header-right-part2-row2 {
  /*display: flex;*/
  /*justify-content: flex-start;*/
  /*align-items: center;*/
  /*gap: 2em;*/
}

.plan-recap-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: .5em;
  white-space: nowrap;
}

/* Used only for Historical Sequence Analysis is Active msg */
.page-info-box {
  margin: .5em 0;
  padding: 0 .5em;
  font-size: .9em;
  width: fit-content;
  color: darkblue;
  background-color: #d3f8d3;
  border: 1px solid darkblue;
}

.page-text {
  font-size: .9em;
}

.general-content {
  width: 100vw;
  max-width: 100vw;
  height: calc(100vh - 150px);
  max-height: calc(100vh - 150px);
  padding: 0 1rem;
}

.page-footnote {
  font-size: .8em;
  font-style: italic;
  padding: 0 .5rem;
}

/* Common attributes for both classes */
.plan-recap-tooltip,
.plan-recap-info {
  background-color: white;
  color: var(--pralana_green_darker);
  width: fit-content;
  min-width: 24em;
  text-align: right;
  font-weight: normal;
  font-size: .9em;
  padding: .5em;
  box-shadow: 0.2em 0.2em .5em .2em rgba(0, 0, 0, 0.3);
  border: 1px solid silver;
  border-radius: 5px;
  /*overflow: visible;*/
  /*width: 25em;*/
}

/* Distinct attributes for .plan-recap-tooltip */
.plan-recap-tooltip {
  visibility: hidden;
  position: absolute;
  top: 3em;
  transform: translateX(-40%);
  z-index: 12;
  opacity: 0;
  transition: opacity 0.3s;
}

/* Distinct attributes for .plan-recap-info */
.plan-recap-info {
  margin: .5em 1em;
}


.plan-recap-scenario-name {
  max-width: 25em;
  text-align: center !important;
  /*text-decoration: underline;*/
  margin-bottom: 4px;
}
.plan-recap-item:hover .plan-recap-tooltip {
  visibility: visible;
  opacity: 1;
}

.plan-recap-tooltip th,
.plan-recap-tooltip td {
  font-weight: normal;
  text-align: right;
  padding: 0 4px;
}

th.plan-recap-row-label {
  font-weight: 500;
  width: 11em;
  white-space: nowrap;
}

td.plan-recap-insolvent-item {
  text-align: left;
  max-width: 10em;
}
td.plan-recap-setting {
  text-align: left;
  white-space: nowrap;
    padding-left: .5em;
}
.plan-recap-tooltip hr {
  margin: 5px 0;
  /*height: .5px;*/
}


.scenario-status-dot {
  height: 12px;
  width: 12px;
  border-radius: 50%;
  border: 1px solid darkslategrey;
  background-color: white;
}

.scenario-status-dot.recalculating {
  border: 3px solid var(--pralana_green);
  border-top-color: transparent; /* make top border transparent */
  animation: spin 1s linear infinite;
}

.scenario-status-dot.green {
  background-color: green;
}
.scenario-status-dot.red {
  background-color: red;
}
.scenario-status-dot.blue {
  background-color: blue;
}