/* CSS file custom_style.css */

body {
  background-color: rgba(4, 5, 5, 1);
  color: white;
}

.annotation-text {
  pointer-events: auto;
  color: white;
}

#app {
  background-color: rgba(4, 5, 5, 1);
}

.plot-container.plotly .modebar {
  background-color: rgba(7, 20, 15, 1);
}

.plot-container.plotly .modebar .modebar-group .modebar-btn .icon path {
  stroke: rgba(31, 255, 165, 1);
}

.plot-container.plotly .modebar .modebar-group .modebar-btn .icon polygon,
.plot-container.plotly .modebar .modebar-group .modebar-btn .icon line,
.plot-container.plotly .modebar .modebar-group .modebar-btn .icon rect {
  fill: rgba(31, 255, 165, 1);
}

.plot-container.plotly .plotlywidget {
  background-color: rgba(202, 224, 215, 1);
}

/* Dropdowns */
.dash-dropdown {
  color: rgba(202, 224, 215, 1);
}

.Select-control {
  background-color: rgba(7, 20, 15, 1) !important;
  color: rgba(202, 224, 215, 1);
  font: PxGroteskRegular;
}

.Select-menu-outer {
  background-color: rgb(25, 25, 25);
  color: rgba(202, 224, 215, 1);
  font: PxGroteskRegular;
}

.Select-value-label {
  color: rgba(202, 224, 215, 1) !important;
  font: PxGroteskRegular;
}

/* MOBILE */

/* On screens that are 768px wide or less, set the width to 100% */
@media screen and (max-width: 768px) {
  .graph-style {
    width: 100% !important;
    display: block !important;
  }
  .dropdown-style {
    top: 23em !important;
    left: 160% !important;
  }
  .multi-dropdown-style {
    top: 29em !important;
    padding-bottom: 1em !important;
  }
}

/* FONTS */

@font-face {
  font-family: PxGroteskBoldItalic;
  src: url("fonts/Px-Grotesk-Bold-Italic.woff");
}

@font-face {
  font-family: PxGroteskBold;
  src: url("fonts/Px-Grotesk-Bold.woff");
}

@font-face {
  font-family: PxGroteskLight;
  src: url("fonts/Px-Grotesk-Light.woff");
}

@font-face {
  font-family: PxGroteskRegularItalic;
  src: url("fonts/Px-Grotesk-Regular-Italic.woff");
}

@font-face {
  font-family: PxGroteskRegular;
  src: url("fonts/Px-Grotesk-Regular.woff");
}

@font-face {
  font-family: TimesNowBold;
  src: url("fonts/TimesNow-Bold.woff");
}

@font-face {
  font-family: TimesNowBoldItalic;
  src: url("fonts/TimesNow-BoldItalic.woff");
}

@font-face {
  font-family: TimesNowExtraBold;
  src: url("fonts/TimesNow-ExtraBold.woff");
}

@font-face {
  font-family: TimesNowExtraBoldItalic;
  src: url("fonts/TimesNow-ExtraBoldItalic.woff");
}

@font-face {
  font-family: TimesNowExtraLight;
  src: url("fonts/TimesNow-ExtraLight.woff");
}

@font-face {
  font-family: TimesNowExtraLightItalic;
  src: url("fonts/TimesNow-ExtraLightItalic.woff");
}

@font-face {
  font-family: TimesNowLight;
  src: url("fonts/TimesNow-Light.woff");
}

@font-face {
  font-family: TimesNowSemiBold;
  src: url("fonts/TimesNow-SemiBold.woff");
}

@font-face {
  font-family: TimesNowLight;
  src: url("fonts/TimesNow-Light.woff");
}

@font-face {
  font-family: TimesNowLightItalic;
  src: url("fonts/TimesNow-LightItalic.woff");
}

@font-face {
  font-family: PxGroteskCustom;
  src: url("fonts/PxGrotesk-OIL.woff");
}

/* Desktop style */
.graph-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start; /*Aligns children to the top*/
  width: 100%;
  justify-content: space-between;
}

.graph-item {
  width: 48%; /* Keep existing width for desktop */
  overflow: hidden;
  margin: 0;
  padding: 0;
  border-radius: 1.5em;
  border-style: solid;
  flex-direction: column;
  align-items: center;
}

/* Tables */
.dash-spreadsheet td.cell--selected,
.dash-spreadsheet td.focused {
  background-color: rgba(33, 163, 111, 1) !important;
  color: white !important;
}

/* green links aligned center */
.dash-spreadsheet a {
  color: rgba(33, 163, 111, 1);
}

.dash-spreadsheet td.cell--selected,
.dash-spreadsheet td.focused {
  background-color: rgba(33, 163, 111, 1) !important;
  color: white !important;
}

/* Links inside selected cells */
.dash-spreadsheet td.cell--selected a,
.dash-spreadsheet td.focused a {
  color: white !important; /* This will ensure links are white when the cell is selected */
}

/* Green links aligned center for unselected cells */
.dash-spreadsheet td.cell a {
  color: rgba(33, 163, 111, 1);
  text-align: center;
  display: block; /* This will help with center alignment */
}

/* Additional styling for hover state if needed */
.dash-spreadsheet td.cell a:hover {
  color: white; /* Or any hover color you prefer */
}




.dash-table-container
  .dash-spreadsheet-container
  .dash-spreadsheet-inner
  td
  div.dash-cell-value.cell-markdown,
.dash-table-container
  .dash-spreadsheet-container
  .dash-spreadsheet-inner
  th
  div.dash-cell-value.cell-markdown {
    text-align: center;
}

/* Mobile style */
@media (max-width: 768px) {
  .graph-item {
    width: 96% !important; /* Adjusted width for mobile */
    margin: 0 2% 3em 2% !important; /* Adds bottom margin for spacing, and horizontal margins for centering */
    display: block !important; /* Stacks items vertically */
  }

  .graph-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    flex-wrap: wrap;
  }

  .dash-spreadsheet {
    overflow: scroll !important;
  }
}