/* @import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap'); */

/* Our preferred fonts are
* Melior for headings/body text/anywhere you need a serif font --> url('./assets/fonts/Melior/MeliorLTStd.otf')
* Founders Grotesk for labels/sans serif needs --> url('./assets/fonts/FoundersGrotesk/...')

JFI main purple = 572cff
JFI main gray = 9b9097
This color: 595959
This color: 79919D
This color: EEEEEE
This color: 0297A7
This color: F05842
This color: FFAE47

You can use variations on those colors in charts  */

@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* Icon lookup: <https://www.flaticon.com/uicons/?weight=solid&corner=rounded>
https://www.flaticon.com/icon-fonts-most-downloaded
 */
@import url('https://cdn-uicons.flaticon.com/uicons-solid-rounded/css/uicons-solid-rounded.css');
@import url('https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css');

:root {
  /* --highlight-color: #0E4AFF; */
  --highlight-color: #1a82db;
  --highlight-hover-color: #375ed5;
  --alt-color: #ed6363;
  --alt-hover-color: #e84545;
  --error-color: #ff4040;
  --warning-color: #ffc627;
}

@font-face {
  font-family: meliorltpro;
  src: url(/static/assets/fonts/388FD4_0_0.eot);
  src: url(/static/assets/fonts/388FD4_0_0.eot?#iefix) format('embedded-opentype'),
    url(/static/assets/fonts/388FD4_0_0.woff2) format('woff2'), url(/static/assets/fonts/388FD4_0_0.woff) format('woff'),
    url(/static/assets/fonts/388FD4_0_0.ttf) format('truetype');
}
@font-face {
  font-family: meliorltpro-italic;
  src: url(/static/assets/fonts/388FD4_1_0.eot);
  src: url(/static/assets/fonts/388FD4_1_0.eot?#iefix) format('embedded-opentype'),
    url(/static/assets/fonts/388FD4_1_0.woff2) format('woff2'), url(/static/assets/fonts/388FD4_1_0.woff) format('woff'),
    url(/static/assets/fonts/388FD4_1_0.ttf) format('truetype');
}
@font-face {
  font-family: fg-light;
  src: url(/static/assets/fonts/fg-light.woff) format('woff');
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  color: #000;
  background: #fafafa;
  font-family: 'Arimo', sans-serif;
}
header,
section {
  padding: 1em 2em;
}

header {
  display: flex;
  justify-content: space-between;
  padding: 0.5em 2em;
  border-bottom: 1px solid black;
}

select {
  font-family: 'Arimo', sans-serif;
  height: 34px;
  border: 1px solid rgb(190, 200, 217);
  border-radius: 4px;
  padding: 0 8px;
  font-size: 12px;
}

.title {
  font-family: meliorltpro;
  font-style: normal;
  font-weight: normal;
  padding-top: 0.1em;
}

#language-select {
  display: flex;
  margin-right: 0.5em;
}
#language-select a {
  margin-left: 0.25em;
  color: #888;
  text-decoration: none;
}
#language-select a:hover {
  text-decoration: underline;
}

#version {
  color: #888;
  font-style: italic;
  font-size: 0.8em;
  line-height: 1.8;
  margin: 0.25em 0 0.25em 1em;
}

section {
  background: #fff;
}
section h3 {
  margin-bottom: 0.25em;
  font-weight: normal;
}
section:last-child {
  padding-bottom: 5em;
}
.multi {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.multi > div {
  width: 49%;
  border: 1px solid #888;
  background: #f8f8f8;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  padding: 0 0.5em 0.5em;
  margin: 1em 0 0 0;
}
.multi h3 {
  margin-top: 0.5em;
}
.multi-charts {
  display: flex;
  justify-content: space-between;
}
.multi-charts > div {
  width: 49%;
}

fieldset .field {
  margin-bottom: 0.2em;
}
.field label {
  margin-right: 0.25em;
  line-height: 1.25;
}
.field-meta {
  margin-bottom: 1em;
}
.field-help,
.field-errors {
  font-size: 0.75em;
  color: #333;
  margin: 0.1em 0;
}
.field-errors {
  color: #ff0000;
}
.field-w-errors input {
  background: #ffcfcf !important;
}
.field-w-errors label {
  color: #ff0000;
}

/* .field input {
  max-width: 50%;
} */

.schedule--chart-container {
  margin-top: 0.75em;
}
.schedule--help {
  font-size: 0.7em;
  color: #777;
  display: flex;
  margin: -0.5em 0 0.5em;
}
.schedule--help > div {
  margin-right: 0.5em;
}
.schedule--field {
  position: relative;
}
.schedule--edit-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: -0.5em;
  background: #eeeef0;
  border: 1px solid #aaa;
  border-bottom: none;
}
.schedule--editor-buttons {
  justify-content: right;
}
.schedule--edit-buttons button {
  background: none;
  text-decoration: underline;
  color: #666;
  padding: 2px;
}
.schedule--edit-buttons .advanced-config-schedule-hide {
  background: #ed6363;
  color: #fff;
  text-decoration: none;
}

.schedule--edit-buttons .advanced-config-schedule-hide:hover {
  background: #ed6363;
  color: #fff;
  text-decoration: none;
}

.schedule--edit-buttons .advanced-config-schedule-show {
  background: #ed636300;
  color: #666;
  text-decoration: none;
}

.schedule--edit-buttons button:hover {
  background: #ed636300;
  color: #666;
  text-decoration: none;
}
.schedule--select-type .selected {
  background: var(--alt-color);
  color: #fff;
}
.schedule--select-type button:hover {
  background: var(--alt-color);
  color: #fff;
}

h1 {
  margin: 0;
  font-size: 1.5em;
  flex: 1;
}

header a {
  margin: 0.25em 0 0.25em 0.5em;
  font-size: 0.8em;
  text-decoration: none;
  line-height: 1.8;
  cursor: pointer;
  color: #000;
}
header a:hover {
  color: var(--highlight-color);
}

h2 {
  font-size: 1.2em;
  color: var(--highlight-color);
  margin: 0;
  font-weight: normal;
  font-family: meliorltpro, sans-serif;
}
h2 .fi,
h3 .fi {
  font-size: 0.75em;
  margin-right: 0.5em;
}
.section-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #000;
  padding: 0 2em;
}
.field-group {
  display: flex;
  gap: 4px;
}
.field-group .start-date {
  font-weight: bold;
  display: inline-block;
}

h3 {
  color: var(--alt-color);
  font-size: 1em;
  border-bottom: 1px solid #555;
  font-family: 'Source Sans Pro', sans-serif;
}

fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#contribution {
  margin-top: 1em;
}
#contribution h3,
#withdrawal h3 {
  margin-top: 0;
}
#investments > ul,
#shocks > ul,
#simulation-comparison-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, calc(50% - 0.25em));
  grid-gap: 0.5em;
}
#contribution,
#withdrawal,
#simulation-comparison-results > li,
#investments > ul > li,
#shocks > ul > li {
  position: relative;
  padding: 0.5em;
  border: 1px solid #888;
  grid-row: span 1;
  grid-column: span 1;
  background: #f8f8f8;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  margin-bottom: 1em;
}
#investments li .has-chart {
  height: 300px;
}
#shocks > ul > li {
  padding: 0 0 0.5em 0;
}
#shocks li .multi-field input {
  width: 5em;
}
#shocks h5 {
  margin-top: 1em;
  border-bottom: 1px solid #0da962;
}
.shock--effect {
  margin-bottom: 0.75em;
  position: relative;
}

.mono-shocks {
  font-size: 0.9em;
}
.mono-shocks li {
  padding: 0.5em 0.5em 0 0.5em;
  background: #ebeff2;
  border: 1px solid #aaa;
  margin-bottom: 0.5em;
  position: relative;
}
.mono-shocks li input {
  width: 2em;
}
.mono-shocks li .shock--effect input {
  width: 12em;
  margin-left: 0.25em;
}
.mono-shocks fieldset {
  display: flex;
  flex-wrap: wrap;
}
.mono-shocks fieldset .field {
  margin-right: 0.25em;
}

.object-form .has-chart {
  margin-bottom: 0.5em;
}
.object-form .has-chart.has-errors {
  margin-bottom: 0em;
}
.object-form h4 {
  font-size: 1em;
  font-weight: normal;
  border-bottom: 1px solid var(--alt-color);
  margin-bottom: 0.5em;
}
.error-messages,
.warning-messages {
  background: var(--error-color);
  padding: 0.25em;
  margin-bottom: 0.5em;
  font-size: 0.8em;
}
.error-messages {
  color: #fff;
  background: var(--error-color);
}
.warning-messages {
  color: #000;
  background: var(--warning-color);
}
.warning-messages img {
  height: 14px;
  vertical-align: middle;
}

.delete {
  position: absolute;
  right: 0.3em;
  top: 0.3em;
  cursor: pointer;
  color: #aaa;
}
.delete:hover {
  background: var(--error-color);
}

.chart-editor {
  height: 320px;
  background: #fafafa;
  overflow-y: scroll;
  border: 1px solid #aaa;
  margin-bottom: 0.5em;
}
.chart-editor--wrapper {
  display: flex;
}
.chart-editor--lines {
  flex: 1;
}
.chart-editor--lines li {
  font-size: 12px;
  font-family: monospace;
  margin-left: 2px;
}
.chart-editor--lines input {
  border: none;
  font-family: monospace;
  line-height: 1;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
  font-size: 12px;
}
.chart-editor--line-numbers {
  font-family: monospace;
  font-size: 12px;
  text-align: right;
  width: 5.5em;
  padding-right: 1px;
  color: #888;
  border-right: 1px solid #ccc;
}
.chart-editor--line-error {
  background: #ff4747;
  color: #fff;
}
.chart-editor--line-error input {
  background: #ff4747;
}

.has-chart {
  height: 320px;
  background: #fafafa;
  border: 1px solid #000;
}
.has-chart canvas {
  margin: 0;
  padding: 0;
  background: #ebeff2;
  cursor: pointer;

  /* prevent mousewheel event from scrolling rest of page */
  overscroll-behavior: contain;
}
.has-chart canvas.focused {
  box-shadow: 0 0 3px var(--highlight-color);
}

input[type='text'],
input[type='number'] {
  border: none;
  border-bottom: 1px solid var(--highlight-color);
  background: #eee;
  font-size: 1em;
  font-family: 'Arimo', sans-serif;
}

input.short {
  width: 48px;
}

button {
  font-family: 'Arimo', sans-serif;
  border: none;
  display: inline-block;
  color: #fff;
  background: var(--highlight-color);
  padding: 0.25em;
  margin: 0.1em;
  font-size: 0.9em;
  cursor: pointer;
  line-height: 1;
  border-radius: 0.2em;
}
button:hover {
  background: var(--highlight-hover-color);
}
button:disabled {
  background: #aeaeae !important;
  color: #686868;
}

.button-header {
  font-family: 'Arimo', sans-serif;
  border: none;
  display: inline-block;
  color: #fff;
  background: var(--highlight-color);
  padding: 0.5em;
  margin: 0.1em;
  font-size: 1em;
  cursor: pointer;
  line-height: 1;
  border-radius: 0.2em;
}
.button-header:hover {
  background: var(--highlight-hover-color);
}
.button-header:disabled {
  background: #aeaeae !important;
  color: #686868;
}

.command-strip {
  font-family: 'Arimo', sans-serif;
  border: none;
  display: inline-block;
  color: #fff;
  background: var(--highlight-color);
  padding: 0.5em;
  margin: 0.1em;
  font-size: 1em;
  cursor: pointer;
  line-height: 1;
  border-radius: 0.2em;
}
.command-strip:hover {
  background: var(--highlight-hover-color);
}
.command-strip:disabled {
  background: #aeaeae !important;
  color: #686868;
}

.command-field label {
  margin-right: 0.25em;
  line-height: 1.25;
  font-size: 1.1em;
}

#status {
  background: #777;
  color: #fff;
  padding: 0.4em;
  font-size: 1.1em;
  display: inline-block;
  margin: 0 0 0.1em 1;
  font-weight: normal;
  line-height: 1;
  border-radius: 0.2em;
}

#results {
  color: #000;
  background: #fff;
  padding-bottom: 5em;
}
#results h4 {
  margin-bottom: 0;
  font-weight: normal;
}
#results > div:first-child h4 {
  margin-top: 0;
}
#results canvas {
  border: 1px solid #09673c;
}
#results #boxplot-value--chart,
#results #boxplot-returns--chart,
#results #sample-value--chart {
  height: 550px;
}
#results #boxplot-value--chart,
#results #boxplot-returns--chart {
  margin-bottom: 1em;
}
#last-error {
  color: #fff;
  text-align: center;
  background: #e50000;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 2.75em;
  padding: 0.25em;
}

#messages {
  position: fixed;
  z-index: 2;
  top: 0;
  width: 100%;
  left: 0;
}
.message {
  display: flex;
  justify-content: space-between;
  font-size: 0.9em;
  background: #222;
  color: #fff;
  padding: 0.5em;
}
.message-tag {
  font-size: 0.9em;
  padding: 0 0.2em;
  font-weight: bold;
  border-radius: 0.2em;
}
.message-dismiss {
  cursor: pointer;
  font-weight: bold;
}
.message--error .message-tag {
  background: #d70022;
}

.error-placeholder {
  text-align: center;
  margin: 2em 0;
}
.error-placeholder b {
  display: block;
  font-size: 1.1em;
  text-decoration: underline;
  text-decoration-color: red;
}
.error-placeholder p {
  margin-top: 0;
}

#command--strip {
  display: flex;
  justify-content: space-between;
  padding: 0.9em 2em;
  background: rgb(68 68 68 / 83%);
  color: #fff;
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  z-index: 10;
  align-items: center;
}
#command--strip fieldset {
  display: flex;
}
#command--strip .field-group {
  display: flex;
  margin-right: 0.25em;
}
#command--strip fieldset .field {
  margin-left: 0.5em;
  text-align: right;
  font-size: 1.1em;
}
#command--strip input {
  font-size: 1.1em;
  border: none;
  max-width: 8em;
}
#command--strip input[type='month'] {
  max-width: 10em;
  padding: 0.2em;
  font-size: 1.1em;
}
.command--run-group {
  display: flex;
  align-items: center;
}

.condition-summary {
  font-family: monospace;
  margin: 0 0 0.5em 0;
  padding: 0.25em;
  border: 1px solid #888;
}
.condition--comparison {
  margin-left: 1em;
  position: relative;
  display: inline-block;
  padding-right: 1.5em;
}
.condition--comparison .delete {
  top: -0.1em;
}
.condition--comparison--values {
  display: flex;
}
.value {
  border: 1px solid #aaa;
  background: #fff;
}
.value select {
  display: block;
  width: 100%;
}
.value input,
.value select:last-child {
  border-bottom: none;
  border-top: 1px solid #aaa;
  max-width: none;
}
.value input {
  font-family: monospace;
}
.condition--comparison select {
  border: none;
}
.condition--comparison--values > select {
  padding: 0 0.5em;
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  font-size: 1.5em;
}
.condition--comparison input {
  text-align: center;
}
.condition--joint {
  padding: 0.5em;
  margin-bottom: 0.5em;
  background: rgba(100, 100, 100, 0.1);
  border: 1px solid #bbb;
}
.condition--joint > select {
  border: 1px solid #bbb;
  padding: 0.25em;
  margin: 0.5em 0;
  display: block;
}
h5,
.condition--frequency {
  font-weight: normal;
  font-style: italic;
  font-size: 1em;
  margin-bottom: 0.5em;
}
.condition--frequency {
  border: none;
  border-bottom: 1px solid black;
}

#policies li {
  position: relative;
  padding: 0 0 0.5em 0;
  border: 1px solid #888;
  margin-bottom: 0.5em;
  background: #f8f8f8;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.policy--action {
  position: relative;
  margin-bottom: 0.25em;
  max-width: 50%;
}
.policy--action .delete {
  position: absolute;
  display: inline-block;
  margin-left: 0.5em;
}
.policy--action select {
  border: 1px solid #aaa;
  margin-right: 0.25em;
}
.policy--action .value {
  display: flex;
}
.policy--action .value select {
  width: 10em;
}
.policy--action input {
  flex: 1;
}

.item-disabled {
  opacity: 0.5;
}
.item-controls {
  padding: 0.2em 0.5em;
  background: #eee;
}
.item-controls .delete {
  top: 0.3em;
}
.item > fieldset {
  padding: 0.25em 0.5em;
}

.upload {
  margin-top: 0.5em;
}

.section-description {
  font-size: 0.9em;
  margin-top: 0;
}

.chart-info {
  display: flex;
  justify-content: space-between;
  margin: 0.5em 0;
  font-size: 0.8em;
}
.chart-legend li {
  display: inline-block;
  margin-left: 0.5em;
}
.chart-legend-color {
  width: 12px;
  height: 12px;
  display: inline-block;
  border: 1px solid #333;
}

#results .has-chart,
#results .has-chart canvas {
  background: #fafafa;
  height: 600px;
}

#multi-charts .has-chart,
#multi-charts .has-chart canvas {
  background: #fafafa;
  height: 400px;
}

.action {
  color: var(--highlight-color);
  text-decoration: underline;
}
.chart-caption {
  font-size: 0.85em;
}

.h-with-config {
  display: flex;
  justify-content: space-between;
}
.h-with-config .field-group {
  display: inline-flex;
}
.h-with-config label {
  font-weight: normal;
  color: #000;
  margin-right: 0.25em;
}
.h-with-config input {
  background: #f8f8f8;
  width: 90px;
}

.toggle-advanced-config {
  line-height: 0.5;
}

.workspace-mgm {
  font-size: 0.8em;
  font-weight: normal;
  margin-left: 0.5em;
  margin-top: 0;
}
.workspace-mgm:hover {
  cursor: pointer;
  color: #fff;
}

.hide-advanced-config {
  color: #fff;
  background: #089253;
}

.grouped-params {
  display: flex;
  margin-bottom: 0.25em;
}
.grouped-params-name {
  font-weight: bold;
  margin-right: 0.25em;
}
.grouped-params input {
  width: 2.5em;
  margin-right: 0.5em;
}

.currency-unit-note,
.fee-note {
  text-align: center;
  font-size: 0.75em;
  color: #043e24;
}
.summaries {
  margin-top: 1em;
  font-size: 1.25em;
  text-align: center;
}
.summaries b {
  color: #dc5e1b;
  text-decoration: underline #fe8748;
}

.multi-field {
  display: flex;
  justify-content: space-between;
}

#admin {
  background: #eeeeee;
  min-height: 100vh;
}
#flashes {
  padding: 0.5em;
  text-align: center;
  color: #fff;
  background: var(--highlight-color);
  margin-bottom: 0.5em;
}
.users,
.orgs {
  margin: 1em;
}
.users li,
.orgs li {
  display: flex;
  margin-bottom: 0.5em;
  align-items: center;
}
.user-org {
  border: 1px solid;
  border-radius: 2px;
  padding: 1px 2px;
}
.user-org input[type='submit'] {
  font-size: 0.8em;
}
.user--actions {
  display: flex;
  align-items: center;
}
.role {
  font-size: 0.8em;
  background: #222;
  color: #fff;
  padding: 0.1em 0.2em;
  border-radius: 0.2em;
  margin-right: 0.25em;
}
input[type='submit'] {
  cursor: pointer;
  font-size: 0.9em;
  border-radius: 0.2em;
  background: #fff;
  color: #000;
  border: 1px solid #888;
  font-family: 'Arimo', sans-serif;
}
input[type='submit']:hover {
  background: #d8d8d8;
}
.user--actions input[type='submit'] {
  margin-left: 0.5em;
}
#admin input[type='text'] {
  background: #fff;
}
#admin section {
  max-width: 760px;
  margin: 0 auto;
}

#jobs {
  padding: 1em;
}
#jobs #current {
  margin-bottom: 1em;
}
#jobs main {
  max-width: 720px;
  margin: 0 auto;
}

#security {
  max-width: 480px;
  margin: 2em auto;
}

#disclaimer {
  padding: 0 1em;
  font-size: 1em;
  overflow: hidden;
  position: relative;
  background: #eeee;
  margin: 1.5em 2em;
  border: 1px solid #bbb;
}

#bench-disclaimer,
#content-text {
  padding: 0 1em;
  margin-bottom: 1em;
  font-size: 1em;
  max-height: 62px;
  overflow: hidden;
  position: relative;
  max-height: none;
  color: #444;
}

.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.input-date {
  min-width: 148px !important;
}

@media (max-width: 480px) {
  main {
    overflow-x: hidden;
  }
  .multi,
  .multi-charts {
    display: block;
  }
  .multi > div,
  .multi-charts > div {
    width: 100%;
  }
  #investments > ul,
  #shocks > ul {
    grid-template-columns: repeat(auto-fit, 100%);
  }
  .h-with-config {
    display: block;
  }
  #command--strip {
    overflow-x: scroll;
  }
  #command--strip fieldset .field {
    text-align: left;
  }
  #command--strip fieldset .field label {
    font-size: 0.75em;
  }
}

/* MODAL */

.modal {
  font-size: 12px;
  background: #d9d9d9;
  max-height: calc(90vh - 45px);
  display: flex;
  flex-direction: column;
  border-radius: 3px;
}
.modal-content {
  position: relative;
}
.modal > .header {
  font-size: 18px;
  text-align: center;
  padding: 0.75em 0.25em 0.5em;
  font-family: meliorltpro, sans-serif;
}
.modal > .content {
  width: 100%;
  padding: 1.5em;
  overflow-y: auto;
}
.modal > .actions {
  width: 100%;
  padding: 10px 5px;
  margin: auto;
  text-align: center;
}
.modal > .close {
  cursor: pointer;
  position: absolute;
  display: block;
  padding: 2px 5px;
  line-height: 20px;
  right: -10px;
  top: -10px;
  font-size: 24px;
  background: var(--highlight-color);
  border-radius: 18px;
  border: 1px solid #000000;
}

.modal-button {
  font-family: 'Source Sans Pro', sans-serif;
  border: none;
  display: inline-block;
  color: #fff;
  background: var(--highlight-color);
  padding: 0.25em;
  margin: 0.1em;
  font-size: 1.3em;
  cursor: pointer;
  line-height: 1;
  border-radius: 0.2em;
}
.modal-button:hover {
  background: var(--highlight-hover-color);
}
.modal-button:disabled {
  background: #aeaeae;
  color: #686868;
}
.modal-content input {
  width: 100%;
}

.popup-content {
  margin: auto;
  width: 80%;
  padding: 5px;
}

table {
  border-collapse: collapse;
  width: 100%;
  white-space: pre-line;
}

td {
  padding: 8px;
  text-align: center;
  border-bottom: 1px solid rgb(0, 0, 0);
}

th {
  padding: 8px;
  text-align: center;
  border-bottom: 1px solid rgb(0, 0, 0);
  border-top: 1px solid rgb(0, 0, 0);
  font-weight: normal;
}

#table-wrapper {
  position: relative;
}
#table-wrapper table {
  width: 100%;
}
#table-wrapper table thead th .text {
  position: absolute;
  top: -20px;
  z-index: 2;
  height: 20px;
  border: 1px solid red;
}

.metrics-board-metrics,
.sensitivities-table {
  text-align: center;
  margin-top: 1em;
}
.metrics-board-metrics table,
.sensitivities-table table {
  border-collapse: collapse;
  width: 100%;
  font-size: 1em;
  column-width: 200px;
}

.metrics-board-metrics tr:nth-child(even),
.sensitivities-table tr:nth-child(even) {
  background-color: #f2f2f2;
}

.metrics-board-metrics tr:hover,
.sensitivities-table tr:hover {
  background-color: #ddd;
}

.metrics-board-metrics th,
.sensitivities-table th {
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: center;
  background-color: #b6b6b6;
  color: black;
}

/* Simulation Results in this workspace */
#simulations-summaries {
  margin-top: 1em;
  font-size: 0.9em;
  text-align: center;
}
#simulations-summaries b {
  color: #dc5e1b;
  text-decoration: underline #fe8748;
}

.react-grid-layout {
  display: grid;
  position: relative;
  transition: height 200ms ease;
  grid-template-columns: repeat(auto-fit, calc(50% - 0.25em));
  grid-gap: 0.5em;
  border: 1px solid #888;
}

.react-grid-item {
  transition: all 200ms ease;
  transition-property: left, top;
  cursor: grabbing;
  border: 1px solid #ddd;
  padding: 1em;
  position: relative;
}

.react-grid-item.cssTransforms {
  transition-property: transform;
}

.react-grid-item.resizing {
  z-index: 1;
  will-change: width, height;
}

.react-grid-item.react-draggable-dragging {
  transition: none;
  z-index: 3;
  will-change: transform;
}

.react-grid-item.dropping {
  visibility: hidden;
}

.react-grid-item.react-grid-placeholder {
  background: var(--alt-color);
  opacity: 0.2;
  transition-duration: 100ms;
  z-index: 2;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.react-grid-item > .react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
}

.react-grid-item > .react-resizable-handle::after {
  content: '';
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-right: 2px solid rgba(0, 0, 0, 0.4);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
}

.react-resizable-hide > .react-resizable-handle {
  display: none;
}

.icon-button {
  font-family: 'founders-regular', sans-serif;
  border: none;
  display: inline-block;
  color: #2e2d33;
  background: #ffffff00;
  padding: 0.25em;
  margin: 0.1em;
  font-size: 0.8em;
  cursor: pointer;
  line-height: 1;
  border-radius: 0.2em;
}

.icon-button:hover {
  background: #2d61fc00;
}

.icon-button:disabled {
  background: #aeaeae;
  color: #686868;
}

.new-workspace-button {
  font-family: 'founders-regular', sans-serif;
  border: none;
  display: inline-block;
  color: #fff;
  background: var(--highlight-color);
  padding: 0.25em;
  margin: 0.1em;
  font-size: 0.9em;
  cursor: pointer;
  line-height: 1;
  border-radius: 0.4em;
}

.overlay {
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
}

#simulation-comparison-results > li {
  margin-top: 1em;
}
#simulation-comparison-results .summaries {
  font-size: 0.8em;
}
#simulation-comparison-results .summary-group {
  border-top: 1px solid #aaa;
  margin-top: 0.75em;
}
#simulation-comparison-results .tooltip-icon {
  position: absolute;
  right: 0.5em;
  top: 0.5em;
}
.simulation-result-description {
  margin-right: 1.5em;
  font-size: 0.75em;
}
.simulation-result-description h3 {
  font-size: 1.75em;
  color: #000;
  border-bottom: none;
  margin-top: 0;
  cursor: pointer;
}
.simulation-result-description h3:hover {
  text-decoration: underline;
}
.simulation-result-description p {
  margin-top: 0;
}
.simulation-result-updated-at {
  color: #555;
}

#config {
  background: none;
}

#tabs {
  display: flex;
  padding: 0 2em;
}
#tabs .tab {
  padding: 0.1em 0.5em;
  background: #eee;
  border: 1px solid #000;
  border-left: 0;
  border-bottom: 0;
  cursor: pointer;
  border-radius: 3px 3px 0 0;
}
#tabs .tab:first-child {
  border-left: 1px solid #000;
}
#tabs .tab:hover {
  background: #ddd;
}
#tabs .tab.selected {
  color: #fff;
  background: var(--highlight-color);
}
#tabs .tab.selected .tab-close {
  color: #fff;
}
.tab-close {
  font-size: 0.65em;
  padding: 0 0 0 0.75em;
  background: none;
  color: #999;
}
.tab-close:hover {
  background: none;
}

#current-tab {
  border: 1px solid #000;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
  overflow: auto;
  background-color: #eeeeee;
}

.sub-tabs {
  display: flex;
  padding: 0 2em;
}
.sub-tabs .tab {
  padding: 0.35em;
  background: #eee;
  border: 1px solid #000;
  border-left: 0;
  border-bottom: 0;
  cursor: pointer;
  border-radius: 3px 3px 0 0;
  display: flex;
  align-items: center;
}
.sub-tabs .tab:first-child {
  border-left: 1px solid #000;
}
.sub-tabs .tab:hover {
  background: #ddd;
}
.sub-tabs .tab.selected {
  color: #fff;
  background: var(--alt-color);
}
#save-config,
#save-as-config,
#delete-config,
.show-advanced-config {
  background: var(--alt-color);
}

#save-config:hover,
#save-as-config:hover,
#delete-config:hover,
.show-advanced-config:hover {
  background: var(--alt-hover-color);
}

#home-results {
  background-color: #eeeeee;
}
#current-sub-tab {
  border: 1px solid #000;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
}

#no-workspace-content-left {
  width: 50%;
  display: inline-block;
  height: 4 00px;
  float: left;
}

#no-sim-content-left {
  width: 50%;
  display: inline-block;
  padding-top: 5%;
  padding-bottom: 5%;
  float: left;
}

#no-workspace-content-right {
  width: 50%;
  display: inline-block;
  height: 400px;
  float: left;
  text-align: center;
}

#no-sim-content-right {
  width: 50%;
  display: inline-block;
  float: left;
  text-align: center;
}

div.no-workspace-content {
  height: 10em;
  position: relative;
}

div.no-workspace-content p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

#processing-simulation-title,
#no-workspace-title {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  margin-top: 30px;
}

#processing-simulation-description {
  text-align: center;
}

#no-workspace-description {
  margin-top: 35px;
  font-size: 20px;
  text-align: center;
}

#no-sim-description {
  margin-top: 30px;
  font-size: 20px;
  text-align: center;
}

#no-workspace-button-new {
  margin-top: 35px;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
}

#no-workspace-back-color {
  background-color: #fafafa;
}

.loading-image,
.create-workspace-image {
  display: block;
  max-width: 389px;
  max-height: 389px;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.create-sim-image {
  display: block;
  max-width: 389px;
  max-height: 389px;
  width: 50%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

#new-workspace-button-right {
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  margin-left: 4.8%;
  width: 95%;
}

#loading-section {
  width: 100%;
  display: inline-block;
  height: 400px;
}

.custom-table {
  margin: auto;
  width: 95%;
  min-width: 900px;
  border-collapse: separate;
  border-spacing: 0 15px;
}
.custom-table thead tr,
.custom-table thead th {
  border-top: none;
  border-bottom: none !important;
}
.custom-table thead {
  font-size: 0.8em;
}

.custom-table tbody th,
.custom-table tbody td {
  color: #777;
  font-weight: 400;
  padding-bottom: 20px;
  padding-top: 20px;
  font-weight: 300;
}

.custom-table tbody th small,
.custom-table tbody td small {
  color: #b3b3b3;
  font-weight: 300;
}

.custom-table tbody tr:not(.spacer) {
  border-radius: 7px;
  overflow: hidden;
  background: rgb(236, 235, 235);
  -webkit-transition: 0.3s all ease;
  -o-transition: 0.3s all ease;
  transition: 0.3s all ease;
}

.custom-table tbody tr:not(.spacer):hover {
  background: rgb(220, 220, 220);
  cursor: pointer;
}

.custom-table tbody tr th,
.custom-table tbody tr td {
  border: none;
}

.custom-table thead tr th,
.custom-table thead tr td {
  background: rgb(46, 45, 51);
  color: rgb(255, 255, 255);
  border: none;
}

.custom-table tbody tr th:first-child,
.custom-table tbody tr td:first-child {
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

.custom-table tbody tr th:last-child,
.custom-table tbody tr td:last-child {
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
}

.custom-table tbody tr.spacer td {
  padding: 0 !important;
  height: 10px;
  border-radius: 0 !important;
  background: transparent !important;
}

.pagination {
  display: flex;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
}

.pagination a {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid rgb(22, 22, 22);
  color: rgb(59, 59, 59);
  font-weight: normal;
}

.pagination__link {
  font-weight: bold;
}

.pagination__link--active a {
  color: #fff;
  background: rgb(59, 59, 59);
}

.pagination__link--disabled a {
  color: rgb(198, 197, 202);
  border: 1px solid rgb(198, 197, 202);
}

.pagination__li_tag {
  margin: 0;
  padding: 0 3px 0 0;
}

.pagination__previous_tag {
  margin: 0;
  list-style-type: none;
  padding: 0 3px 0 0;
}

.items-pagination {
  padding: 0 2em;
}

.simulation {
  padding: 1em 0 8em 0;
}
.sim-manage-controls {
  position: absolute;
  right: 1em;
  display: flex;
}

.svg-top {
  position: fixed;
  top: -900px;
  right: -400px;
}
.svg-bottom {
  position: fixed;
  bottom: -500px;
  left: -200px;
}

.container_login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #ecefff00;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.login_button {
  text-align: center;
  font-size: 18px;
}

.login_screen {
  background: #ecefff;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  height: 100%;
  overflow: hidden;
  background-image: url('https://jainfamilyinstitute.org/wp-content/uploads/2022/08/jfi-highered.webp');
  border-right: 4px solid transparent;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(3px);
}

.wrapper_login {
  padding: 0px 40px;
  background-color: #fff;
  border-radius: 20px;
  width: 254px;
  height: 375px;
  z-index: 1;
  box-shadow: 0 0 25px #b5a2ff;
  position: fixed;
}

.wrapper_login_reset {
  padding: 0px 40px;
  background-color: #fff;
  border-radius: 20px;
  width: 310px;
  height: 315px;
  z-index: 1;
  box-shadow: 0 0 2px #566ba5;
  position: fixed;
}

.main-content-login {
  border: none;
  display: block;
  width: 100%;
  height: 50px;
  margin: 15px 0;
  font-size: 14px;
  background-color: #ffffff;
  padding: 1px;
}

.main-content-forgot_pass {
  border: none;
  display: block;
  width: 100%;
  height: 50px;
  margin: 15px 0;
  font-size: 14px;
  background-color: #ffffff;
  padding: 1px;
  text-align: center;
  color: black;
}

.title_login {
  color: #222;
  font-size: 35px;
  font-weight: bold;
  margin-bottom: 0;
  margin-top: 40px;
  text-align: center;
}

.title_login_info {
  color: #333;
  font-size: 14.5px;
  font-weight: 300;
  margin: 5px 0 0 0;
  text-align: center;
}

.title_login_info2 {
  color: #222;
  font-size: 13.5px;
  font-weight: 300;
  margin: 5px 0 0 0;
  font-style: italic;
}

.title_footer_info {
  color: #6065d9;
  font-size: 13px;
  font-weight: 300;
  margin: 5px 0 0 0;
  text-align: center;
}

.button-return {
  background: url(assets/back.png) no-repeat;
  float: left;
  width: 10px;
  height: 40px;
}

.button-example {
  background: url(assets/question.png) no-repeat;
  float: left;
  width: 10px;
  height: 40px;
}

.workspaces-header {
  display: flex;
  justify-content: space-between;
}
.workspace-listing .icon-button {
  font-size: 1.7em;
}
.workspace-listing .icon-button:hover {
  color: var(--highlight-color);
}

.landing {
  margin: 2em 0;
}
.landing .section-header {
  border-bottom: none;
}

.new-modal {
  min-width: 360px;
  margin: 0 auto;
}
textarea {
  resize: none;
  font-family: 'Source Sans Pro', sans-serif;
}

#config-menu {
  background: #fafafa;
  padding-top: 0px;
}
#config-menu .section-header {
  border: none;
  padding: 0;
}
.config-save-load {
  display: flex;
}

.scenario-listing tr {
  cursor: pointer;
}
.scenario-listing tr:hover {
  background: #bfbfbf;
}

.refresh-forecasts {
  position: absolute;
  top: 26.95em;
  right: 16.4em;
}

.metrics-board-controls {
  display: flex;
  justify-content: space-between;
  padding: 0 0 0.25em 0;
}
.metrics-board-controls select {
  margin: 0 0.5em 0 0.25em;
}
.metrics-board-controls select:last-child {
  margin-right: 0;
}
.metrics-chart {
  text-align: center;
}
.metrics-chart > * {
  background: #f8f8f8;
  border: 1px solid #888;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
.metrics-chart-loading {
  opacity: 0.5;
  pointer-events: none;
}
.time-buttons .selected {
  background: #18975d;
}

.run-warning {
  color: var(--error-color);
  margin: 4px 0 0 2px;
}
.save-warning {
  color: var(--warning-color);
  margin: 5px 2px 0 0;
}
.sim-save-controls {
  display: flex;
}
.dirty-results-warning {
  color: var(--warning-color);
  margin: 0px 0 0 4px;
  line-height: 0.75;
}

.workspaces-footer {
  float: right;
}

.fee-input-line input[name='value'] {
  width: 100px;
}
.fee-input-line input[name='interval'] {
  width: 48px;
}

.header-button {
  width: 90px;
  height: 110px;
  background-color: #1a82db;
  display: inline-block;
  border-radius: 18px;
  padding-bottom: 0px;
}

.header-button-icon {
  font-size: 30px;
  background: #ffffff66;
  border-radius: 50%;
  color: #fcfdff;
  padding: 9px;
  padding-left: 12px;
  padding-top: 11px;
}

.header-button-text {
  margin-top: 15px;
}

.header-current-workspace {
  height: 60px;
  padding-left: 8px;
  /*display: inline-table;
  border-color: #222;
  background-color: #eeeeee;
  color: #686868d1;
  border: 2px;
  border-style: solid;
  border-radius: 10px;
  height: 105px;
  margin-top: 0px;
  padding-left: 8px;
  min-width: 250px;
  max-width: 400px;
  */
}

.header-label-current {
  display: block;
  text-align: left;
  color: #333;
  font-weight: 500;
  font-style: initial;
  font-size: 14px;
  margin-top: 30px;
}

.header-workspace-name {
  height: 50%;
  text-align: left;
  font-weight: bold;
  font-size: 20px;
  margin-top: 5px;
  color: #ed6363;
  vertical-align: middle;
}

.home-content-header {
  display: flex;
  justify-content: space-between;
}

.js-plotly-plot .plotly .modebar {
  left: 50%;
  transform: translateX(-100%);
}

.pdf-report-config-modal {
  max-width: 280px;
  margin: 0 auto;
}

.pdf-report-config-section {
  padding: 1em;
  padding-bottom: 0.5em;
  padding-top: 0.5em;
}

.pdf-report-config-toggle {
  display: flow-root;
  padding: 0.1em 0.2em;
  border-radius: 2px;
  border: 1px solid #93939399;
  cursor: pointer;
  user-select: none;
  margin-right: 0.5em;
  margin-bottom: 0.25em;
  font-size: 12px;
}
.pdf-report-config-toggle label {
  cursor: pointer;
}
.pdf-report-config-toggle:hover {
  background: #ccc;
}
.pdf-report-config-toggle input {
  vertical-align: middle;
  margin: 0 0.1em 0 0;
}
.pdf-report-config-modal button {
  font-size: 1.2em;
}

.tag-warning,
.tag-warning:hover {
  background-color: #ffefef;
  color: #d62525;
  text-align: center;
  margin-bottom: 4px;
  border-radius: 100px;
  cursor: default;
  padding: 2px 10px;
  line-height: 22px;
}

.sensitivities-charts {
  display: flex;
  justify-content: center;
  margin: 1rem;
  gap: 1rem;
}

.sensitivities-charts > div > *:first-child {
  height: 500px;
  width: 800px;
}

.sensitivities-charts > img {
  max-width: clamp(140px, 16vw, 200px);
  height: auto;
  object-fit: contain;
}

.investment-search-result-item {
  margin-bottom: 10px;
  border: 1px solid black;
  padding: 10px;
  cursor: pointer;
}

.investment-search-result-item:hover {
  background-color: #f0f0f0;
  transition: background-color 0.3s ease;
}

.missing-fee {
  border: 1px solid red !important;
  border-top: 2px solid red !important;
  border-bottom: 4px solid red !important;
}

.missing-fee-alert {
  color: red;
  font-size: 13px;
  display: block;
}

.fees-summary > span > b {
  background-color: #ff000040;
}