/* GENERAL */
@-webkit-keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @-moz-keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  * {
    font-family: "Roboto", sans-serif;
  }

  /* MAIN CONTENT */
.main-container {
  justify-content: center;
  align-items: center;
  width: 90vw;
  margin: 0 auto;
}

/* CARDS */
.content-card {
  margin-top: 10px;
  margin-bottom: 5px;
}

.card-header {
  display: flex;
  gap: 10px;
}

.content-cards-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}


/* CONTROLS */
.controls-container {
    display: flex;
    padding: 10px;
    margin: 20px 0;
    border: 1px solid grey;
    border-radius: 5px;
    background-color: #ffffff;
}

.slider-container {
    width: 100%;
}

.trial-dropdown-container {
    width: 100%;
}

.trial-comparison-dropdown-container {
  display: flex;
  gap: 20px;
  width: 500px
}

.trial-comparison-dropdown {
  width: 100%;
}

.single-trial-dropdown-container {
  display: flex;
  gap: 20px;
  align-items: center;
}

.single-trial-dropdown {
  width: 100px;
}

.select-trial-label{
  margin-bottom: 0;
}

/* Trial Picker */
.optuna-summary-row {
  margin-bottom: 10px;
}

/* Market data */
.chart-styler-slider {
  padding: 0 !important;
  padding-right: 25px !important;
}

#top-level-controls-container {
margin-top: 0px !important
}

.dropdown-menu.show {
height: 600px !important;
overflow-y: auto;
min-width: 534px !important;

}

.dropdown-divider {
border-top: 1px solid #797979; /* Adjust the thickness and color as needed */
}


/* Deployment summary */
/* Light theme styles (default) */
[data-bs-theme="light"] .metric-box {
    background-color: #f8f9fa;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
    border-color: #dee2e6;
}

[data-bs-theme="light"] .summary-box {
    background: #f8f9fa;
    background-color: #f8f9fa;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
    border-color: #dee2e6;
}


[data-bs-theme="light"] .metric-title {
    color: #6c757d;
}

[data-bs-theme="light"] .section-header {
    color: #495057;
}

[data-bs-theme="light"] .deployment-summary-chart-div {
  background-color: #f8f9fa;
}



/* Dark theme styles */
[data-bs-theme="dark"] .metric-box {
    background-color: #2d3748;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.3);
    border-color: #4a5568;
}

[data-bs-theme="dark"] .summary-box {
    background: #2d3748;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.3);
    border-color: #4a5568;
}


[data-bs-theme="dark"] .metric-title {
    color: #e2e8f0;
}

[data-bs-theme="dark"] .section-header {
    color: #e2e8f0;
}

[data-bs-theme="dark"] .deployment-summary-chart-div {
  background-color: #2d3748;
}


/* Optional: Smooth transitions between themes */
.metric-box,
.metric-title,
.metric-summary-box,
.section-header {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Charts */
.plotly .cursor-ew-resize {
  cursor: crosshair !important;
}
.plotly .cursor-w-resize {
  cursor: crosshair !important;
}
.plotly .cursor-e-resize {
  cursor: crosshair !important;
}


/* Metric box title and value */
.metric-title {
    font-size: 0.8rem;
    font-weight: 500;
}

.metric-value {
    font-size: 1.1rem;
    font-weight: 600;
}

@media (max-width: 1400px) {
    .metric-title {
        font-size: 0.75rem !important;
    }
    .metric-value {
        font-size: 0.75rem !important;
    }
}

.tooltip-inner {
    max-width: 100% !important;
}