.Select-control {
/*background-color: rgb(25, 25, 25) !important;*/
background-color: lightskyblue
/*background-color: blue*/
}

.Select-menu-outer {
  /*background-color: rgb(25, 25, 25);*/
background-color: cornsilk
}


.Select-menu-outer {
    background-color: #2f3445;
    border: 1px solid gray;
}

.Select div {
    background-color: #2f3445;
}

.Select-menu-outer div:hover {
    background-color: rgba(255, 255, 255, 0.01);
}

.Select-value-label {
    color: #a5b1cd !important;
}

/* Range-Slider in Dash anpassen */
/*
.rc-slider-track { Dies ist der aktive Bereich zwischen dem Minimum und dem aktuellen Wert. 
  background-color: red;

}


.rc-slider-dot-active {  
  border-color: red;
  border: solid 5px red;
}


.rc-slider-dot-disabled {  
  border-color: red;
  border: solid 5px red;
}

.rc-slider-handle {
  background-color: red;
  border-color: red;
  font-size: 32px !important; 
}

.rc-slider-handle:hover {
  border-color: red;
  font-size: 32px !important; 
}

.rc-slider-handle-active:active {
  border-color: red;
  font-size: 32px !important; 
}


Ändert die Farbe der gesamten Schiene (inaktiv) 
Dies ist der Hintergrund bzw. der inaktive Teil des Sliders.
#my-range-slider .rc-slider-rail {   
	background-color: yellow;
	font-size: 32px;	
}

 Optional: Nur die aktive Markierung ändern 
.rc-slider-mark-text {
	font-size: 24px !important; 

}

*/
/*------------------------------------------------------------------------------------------------------*/
/* Wenn die ID spezifiziert werden soll (z.B.: #my-range-slider), dann kein !important anhängen

/* Spezifisch: Schriftgröße und Farbe des INAKTIVEN Punktes/Labels */
#my-range-slider .rc-slider-mark-text {
    font-size: 18px; 
    color: white; 
    font-weight: bold;
}

/* Dies ist der Hintergrund bzw. der inaktive Teil des Sliders.*/
.my-slider .rc-slider-rail {
   	background-color: LightSteelBlue;

}
/*
#my-range-slider .rc-slider-tooltip-inner {
	placement: top
	color: white;
	border-radius: 4px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	font-size: 24px;
	background-color: red
*/

.dbc .rc-slider-handle {
    background-color: green !important; /* !important nur zum Testen */
    border: 2px solid black !important;
}


/* Optional: Ändert die Farbe des Handlers (Griff) */
.dbc  .rc-slider-handle {
    border-color: #ff0000 !important;
    background-color: #ff0000 !important;
}


/* Optional: Ändert die Farbe des aktuellen Punktes beim Drüberfahren (Hover) */
.dbc .rc-slider-handle:hover {
    border-color: #0000ff !important;
}

/* Ändert die Farbe der Linie (Track) */
.dbc .rc-slider-track {
    background-color: #ff0000; !important;
}


/*---------------------------------------------------------------------------------------------------------------------*/
/*
Die wichtigsten Klassen für das Styling des Dash-Sliders sind: 

    .rc-slider-track: Der Teil der Linie, der den ausgewählten Bereich darstellt.
    .rc-slider-rail: Der Hintergrund der Linie (nicht ausgewählter Bereich).
    .rc-slider-handle: Der Regler/Knopf zum Ziehen.
    .rc-slider-dot: Die Markierungspunkte (falls dots=True).

*/

/* Dropbox: Jahreszahl auswählen 


/* Ändert den Hintergrund des geschlossenen Dropdowns */
#DropdownJahreszahlID .Select-control {
    background-color: #333 !important; /* Hintergrundfarbe */
    background-color: red !important; /* Hintergrundfarbe */
    color: white !important; /* Textfarbe */
}

/* Ändert den Hintergrund der Optionsliste (Dropdown offen) */
#DropdownJahreszahlID .Select-menu-outer {
    background-color: #333 !important;
    color: white !important;
}

/* Ändert die Hintergrundfarbe einzelner Optionen */
#DropdownJahreszahlID .VirtualizedSelectOption {
    background-color: #333 !important;
    color: white !important;
}

/* Ändert die Hintergrundfarbe der fokussierten/ausgewählten Option */
#DropdownJahreszahlID .VirtualizedSelectFocusedOption {
    background-color: #555 !important;
    color: white !important;
}

/* Ändert die Farbe der ausgewählten Werte */
#DropdownJahreszahlID .Select-value-label {
    color: white !important;
}

/* Verhindert den Farbwechsel beim Hovern der Optionen */
#DropdownJahreszahlID .VirtualizedSelectOption:hover {
    background-color: white !important; /* Hintergrundfarbe bei Hover */
    color: black !important; /* Textfarbe bei Hover */
}

/* Verhindert den Farbwechsel der fokussierten Option (optional) */
.VirtualizedSelectFocusedOption {
    background-color: white !important;
    color: black !important;
}


/* Verhindert Textfarbwechsel in Cloudscape Dropdown */
#DropdownJahreszahlID .awsui-select-dropdown-item:hover {
  background-color: transparent !important; /* Oder eine feste Farbe */
}
*/

/* Standard für Desktop */
.js-plotly-plot .plotly .main-svg {
    font-size: 16px;
}

/* Für Smartphones */
@media (max-width: 600px) {
    .js-plotly-plot .plotly .main-svg {
        font-size: 5px; /* Kleinere Schrift auf Handys */
    }
}