.input-container-navbar {
  padding: 12px 24px;
  gap: 8px;
  background: #17191B;
  border-bottom: 1px solid #363A3F;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.input-container-navbar-align-normal {
  padding: 12px 24px;
  gap: 8px;
  background: #17191B;
  border-bottom: 1px solid #363A3F;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: normal;
}

.input-container {
  padding: 12px;
  /*gap: 12px;*/
  gap: 8px;
  border: 1px solid #363A3F;
  box-shadow: 0px 6px 24px rgba(0, 0, 0, 0.32);
  border-radius: 10px;
  -moz-border-radius: 10px;
  background-color: #191B1E;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}

.input-container-child {
  background-color: #0E1012;
  /*color: #D9DBDF;*/
  color: #67707B;
  border: 1px solid #25282B;
  border-radius: 10px;
  -moz-border-radius: 10px;
  padding: 9px 12px;
  gap: 8px;
}

.input-container-heading {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 12px;
}

.output-container {
  padding: 8px;
  gap: 10px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  background: linear-gradient(117.87deg, #1F2124 0%, #141618 100%);
  display: flex;
  /*flex-direction: column;*/
  flex-direction: row;
  align-items: flex-start;
}

.output-container-flex-dir-column {
  padding: 8px;
  gap: 10px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  background: linear-gradient(117.87deg, #1F2124 0%, #141618 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.output-container-center {
  padding: 8px;
  /*ap: 10px;*/
  border-radius: 10px;
  -moz-border-radius: 10px;
  background: linear-gradient(117.87deg, #1F2124 0%, #141618 100%);
  display: flex;
  flex-direction: column;
  /*flex-direction: row;*/
  align-items: center;
  justify-content: center;
}

.output-text-wrapper-center {
  width: 100%;
  height: 100%;
  background-color: #0E1012;
  padding: 0px 12px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.output-chart-wrapper {
  width: 100%;
  height: 100%;
  background-color: #0E1012;
  padding: 0px 12px 12px 12px;
}

.output-table-wrapper {
  width: 100%;
  height: 100%;
  background-color: #0E1012;
  padding: 12px 12px 12px 12px;
}

.pretty_container {
  border-radius: 15px;
  -moz-border-radius: 15px;
  padding: 50px;
  border: 3px solid #FFF;
  /*background-color: #000000;*/
  background-color: #0E1012;
  box-shadow: 5px 5px 5px slategray;
}

.container-basic-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* The following is for a Dash Core Components Dropdown input (dcc.Dropdown()). We set to a midnight theme. */
/*#date_list_selector_beta_backtest .Select, .Select div, .Select input, .Select span, .Select-value, .Select-value-label, .has-value.Select--single>.Select-control {
  background-color: rgb(14,16,18);
  color: #D9DBDF!important;
}*/

.symbol-with-info {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 12px;
}

.required_input {
  border: 3px solid #FF1493;
}

.bg-dark {
  /*background-color: #0A0C12!important;*/
  background-color: rgba(0,0,0,0)!important;
}

.bg-dark-900 {
  background-color: rgb(14,16,18);
}

.app-structure-menu {
  /*background-color: #AADE87;*/
  flex: 1;
}

.app-container {
  /*background-color: #AAFFCC;*/
  flex: 5;
}

.navbar-div-beta-version {
  flex: 20%;
  background-color: #17191B;
}

.navbar-dmc-beta-version {
  background-color: #17191B;
  border-left: 1px solid #2A2E32;
  border-right: 0px;
}

.menu-category-price-action {
  margin: 0px;
  background-image: linear-gradient(rgba(40,120,246,0.4), rgba(10,12,18,0));
}

.menu-category-ddi {
  margin: 0px;
  background-image: linear-gradient(rgba(46,122,90,0.4), rgba(10,12,18,0));
}

.menu-category-ocm {
  margin: 0px;
  background-image: linear-gradient(rgba(222,176,81,0.4), rgba(10,12,18,0));
}

.menu-category-defi {
  margin: 0px;
  background-image: linear-gradient(rgba(220,76,108,0.4), rgba(10,12,18,0));
}

.menu-category-nfts {
  margin: 0px;
  background-image: linear-gradient(rgba(42,20,145,0.4), rgba(10,12,18,0));
}

.menu-category-daos {
  margin: 0px;
  background-image: linear-gradient(rgba(143,152,162,0.4), rgba(10,12,18,0));
}

.app-button {
  text-transform: none;
  text-align: left!important;
  /*font-family: montserrat-medium, "Montserrat Medium";*/
  font-family: neurialGrotesk-regular, "NeurialGrotesk-Regular";
  font-size: 1.1rem!important;
  padding-left: 8%;
  width: 100%;
}

.btn-primary {
  color: #FFFFFF;
  background-color: rgba(0,0,0,0);
  border-color: rgba(0,0,0,0);
}

.btn-primary.disabled, .btn-primary:disabled {
  color: #FFFFFF;
  background-color: rgba(0,0,0,0);
  border-color: rgba(0,0,0,0);
}

.small-screen-warning {
  background-color: #F97066;
  color: #FFFFFF;
  font-family: neurialGrotesk-regular, "NeurialGrotesk-Regular" !important;
  font-size: 14px;
  width: 100%;
  text-align: center;
}

@media only screen and (min-width:800px){
  .small-screen-warning { display: none !important; }
}

/* Remove the legend from Plotly Graphs on small width screens */
@media (max-width:768px) {
  .legend { display: none !important; }
}

.responsive-height .plot-container .svg-container {
  height: 10000px !important;
  max-height: 70vh !important;
}

.responsive-height-full .plot-container .svg-container {
  height: 10000px !important;
  max-height: 90vh !important;
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {
  /*font-family: 'Montserrat-Medium';*/
  /*src: url('Montserrat-Medium.ttf');*/
  font-family: 'NeurialGrotesk-Regular';
  src: url('NeurialGrotesk-Regular.otf');
}

@font-face {
  font-family: 'NeurialGrotesk-Medium';
  src: url('NeurialGrotesk-Medium.otf');
  font-weight: 500;
  font-style: normal;
}

.medium {
  font-weight: 500;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 300;
  text-transform: none;
}
/*h1 { font-family: montserrat-medium, "Montserrat Medium"; font-size: 4.5rem; line-height: 1.2;  letter-spacing: -.1rem; margin-bottom: 2rem; color: #FFFFFF;}*/
/*h2 { font-family: montserrat-medium, "Montserrat Medium"; font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; margin-bottom: 1.8rem; margin-top: 0rem; color: #FFFFFF;}*/
/*h3 { font-family: montserrat-medium, "Montserrat Medium"; font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; margin-bottom: 1.5rem; margin-top: 0rem; color: #FFFFFF;}*/
/*h4 { font-family: montserrat-medium, "Montserrat Medium"; font-size: 2.6rem; line-height: 1.35; letter-spacing: -.08rem; margin-bottom: 1.2rem; margin-top: 1.2rem; color: #FFFFFF;}*/
/*h5 { font-family: montserrat-medium, "Montserrat Medium"; font-size: 2.2rem; line-height: 1.5;  letter-spacing: -.05rem; margin-bottom: 0.6rem; margin-top: 0.6rem; color: #FFFFFF;}*/
/*h6 { font-family: montserrat-medium, "Montserrat Medium"; font-size: 2.0rem; line-height: 1.6;  letter-spacing: 0; margin-bottom: 0.75rem; margin-top: 0.75rem; color: #FFFFFF;}*/
h1 { font-family: neurialGrotesk-regular, "NeurialGrotesk-Regular"; font-size: 4.5rem; line-height: 1.2;  letter-spacing: -.1rem; margin-bottom: 2rem; color: #FFFFFF;}
h2 { font-family: neurialGrotesk-regular, "NeurialGrotesk-Regular"; font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; margin-bottom: 1.8rem; margin-top: 0rem; color: #FFFFFF;}
h3 { font-family: neurialGrotesk-regular, "NeurialGrotesk-Regular"; font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; margin-bottom: 1.5rem; margin-top: 0rem; color: #FFFFFF;}
h4 { font-family: neurialGrotesk-regular, "NeurialGrotesk-Regular"; font-size: 2.6rem; line-height: 1.35; letter-spacing: -.08rem; margin-bottom: 1.2rem; margin-top: 1.2rem; color: #FFFFFF;}
h5 { font-family: neurialGrotesk-regular, "NeurialGrotesk-Regular"; font-size: 2.2rem; line-height: 1.5;  letter-spacing: -.05rem; margin-bottom: 0.6rem; margin-top: 0.6rem; color: #FFFFFF;}
h6 { font-family: neurialGrotesk-regular, "NeurialGrotesk-Regular"; font-size: 2.0rem; line-height: 1.6;  letter-spacing: 0; margin-bottom: 0.75rem; margin-top: 0.75rem; color: #FFFFFF;}

h5.app-title-and-headings-font {
  color: #E9EBED;
}

h6.app-title-and-headings-font {
  color: #E9EBED;
}

p {
  margin-top: 0;
  color: #FFFFFF;
  /*font-family: montserrat-medium, "Montserrat Medium";*/
  font-family: neurialGrotesk-regular, "NeurialGrotesk-Regular";
  font-size: 14px;
}

p.heading {
  /*font-family: montserrat-medium, "Montserrat Medium";*/
  font-family: neurialGrotesk-regular, "NeurialGrotesk-Regular";
  font-size: 1.25rem;
  line-height: 1.6;
  letter-spacing: 0;
  margin-bottom: 0.75rem;
  padding-top: 0.75rem;
  padding-left: 0.75rem;
  color: #FFFFFF;
  text-transform: uppercase;
}

p.tab-content-font {
  /*font-family: montserrat-medium, "Montserrat Medium";*/
  font-family: neurialGrotesk-regular, "NeurialGrotesk-Regular";
  font-size: 1.25rem;
}

p.tab-content-major-divider-font {
  /*font-family: montserrat-medium, "Montserrat Medium";*/
  font-family: neurialGrotesk-regular, "NeurialGrotesk-Regular";
  font-size: 1.5rem;
}

p.input-container-heading-text {
  color: #979FA7;
}

p.input-container-helper-text {
  margin-top: 1rem;
  color: #979FA7;
}

p.app-description-font {
  color: #979FA7;
}

p.input-label-font {
  color: #D9DBDF;
  font-family: neurialGrotesk-regular, "NeurialGrotesk-Regular";
}

span {
  margin-top: 0;
  color: #FFFFFF;
  /*font-family: montserrat-medium, "Montserrat Medium";*/
  font-family: neurialGrotesk-regular, "NeurialGrotesk-Regular";
  font-size: 14px;
}

span.input-label-font {
  color: #D9DBDF;
  font-family: neurialGrotesk-regular, "NeurialGrotesk-Regular" !important;
  font-size: 14px;
}

span.input-label-font-required {
  color: #F97066;
  font-family: neurialGrotesk-regular, "NeurialGrotesk-Regular" !important;
  font-size: 14px;
}

span.input-label-font-hint {
  color: #67707B;
  font-family: neurialGrotesk-regular, "NeurialGrotesk-Regular" !important;
  font-size: 12px;
}

label {
  font-family: neurialGrotesk-regular, "NeurialGrotesk-Regular";
  font-size: 14px;
}

label.input-label-font {
  color: #D9DBDF;
  font-family: neurialGrotesk-regular, "NeurialGrotesk-Regular" !important;
  font-size: 14px;
}

label.input-container-heading-text {
  color: #979FA7;
  margin-bottom: 1rem;
}

body {
  color: #FFFFFF;
  /*font-family: montserrat-medium, "Montserrat Medium";*/
  font-family: neurialGrotesk-regular, "NeurialGrotesk-Regular";
  background-color: #0E1012;
}

th, td {
  /*color: #D9DBDF !important;*/ /*NOTE: Disabling this on 2023-09-13. This was set for a reason some time ago, so I'm not sure what effects this is going to have...*/
  font-family: neurialGrotesk-regular, "NeurialGrotesk-Regular" !important;
  font-size: 14px !important;
}

p.text-dark-200 {
  color: #D9DBDF;
}

p.text-dark-400 {
  color: #67707B;
  font-style: normal;
  font-size: 12px;
  line-height: 18px;
}

footer {
  color: #979FA7;
  font-style: italic;
  margin-bottom: 20px;
}

input {
  font-size: 14px;
}

.flows_table th, td, tr {
  font-family: neurialGrotesk-regular, "NeurialGrotesk-Regular" !important;
  font-size: 18px !important;
  color: #FFFFFF !important;
  border-bottom: 0px !important;
}

.card {
  background-color: #000000;
}

.btn {
  font-size: 1.5rem;
  text-transform: none;
  /*font-family: montserrat-medium, "Montserrat Medium";*/
  font-family: neurialGrotesk-regular, "NeurialGrotesk-Regular";
}

.download_btn {
  text-transform: none;
  /*font-family: montserrat-medium, "Montserrat Medium";*/
  font-family: neurialGrotesk-regular, "NeurialGrotesk-Regular";
  background-color: #DDFF55;
}
.download_csv_btn_div {
  width: '100%';
  /*background-color: #0E1012;*/
}

.hovercard_btn {
  text-transform: none;
  /*font-family: montserrat-medium, "Montserrat Medium";*/
  font-family: neurialGrotesk-regular, "NeurialGrotesk-Regular";
  background-color: #DDFF55;
  color: #000000;
}

/* Tabs
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.custom-tabs-container {
  width: 100%;
}
.custom-tabs {
  border-top-left-radius: 3px;
  /*background-color: #f9f9f9;*/
  background-color: #0E1012;
  padding: 0px 24px;
  border-bottom: 0px solid #d6d6d6;
}

.custom-tab {
  color:#586069;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-top: 3px solid transparent !important;
  border-left: 0px !important;
  border-right: 0px !important;
  border-bottom: 0px !important;
  /*background-color: #fafbfc;*/
  background-color: #0E1012 !important;
  padding: 12px !important;
  /*font-family: montserrat-medium, "Montserrat Medium";*/
  font-family: neurialGrotesk-medium, "NeurialGrotesk-Regular";
  /*font-size: 1.5rem;*/
  font-size: 1.25rem;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.custom-tab--selected {
  color: white !important;
  box-shadow: 0px 0px 0px white;
  border-left: 0px solid lightgrey !important;
  border-right: 0px solid lightgrey !important;
  /*border-top: 3px solid #e36209 !important;*/
  /*border-top: 3px solid #DDFF55 !important;*/
  border-bottom: 3px solid #DDFF55 !important;
}

/* Use Delphi's new animated spiiner in place of the Dash loader */
.stream-loading-spinner {
  background: url(loading_spinner.png) no-repeat;
  animation: spin 1s steps(89) infinite;
  width: 64px;
  height: 64px;
  padding-top: 50px;
  margin: 0 auto;
}

@keyframes spin {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 100% 0;
  }
}

.sector-grid-container{
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal-width columns */
  gap: 12px; /* Space between columns */
  padding: 20px;
  height: 85vh;
  /*border-radius: 10px;
  -moz-border-radius: 10px;
  background: linear-gradient(117.87deg, #1F2124 0%, #141618 100%);*/
}

.sector-column {
  display: flex;
  flex-direction: column;
  gap: 12px; /* Space between child divs */
}

.sector-child {
  /*padding: 20px;*/
  /*border-radius: 8px;*/
  overflow: auto; /* Ensure the content can scroll if it exceeds the div height */
  box-sizing: border-box;
}

.center-aligned-cell {
  text-align: center;
}
.center-aligned-header .ag-header-cell-label {
  justify-content: center;
}

.ag-theme-alpine-dark.sector-table {
  --ag-header-foreground-color: #979FA7 !important;
  --ag-header-background-color: #1F2124;
  --ag-foreground-color: #D9DBDF;
  --ag-background-color: #17191B;
  --ag-odd-row-background-color: #141618;
  --ag-data-color: #D9DBDF;
  --ag-border-color: #2A2E32;
  --ag-border-radius: 10px;
  --ag-row-border-color: #1F2124;
  /*--ag-font-size: 16px;*/
  --ag-font-size: 20px;
  --ag-font-weight: 500;
  --ag-font-family: neurialGrotesk-regular;
}

.ag-theme-alpine-dark.sector-table span {
  /*color: #979FA7 !important;*/
  color: #FFFFFF !important;
  font-family: neurialGrotesk-regular, "NeurialGrotesk-Regular";
  /*font-size: 14px;*/
  font-size: 20px;
  font-weight: 500;
  font-style: normal;
}