/* button */

Button { 
    -fx-background-color: rgba(0, 0, 0, 0.5); 
    -fx-text-fill: white;
    /* -fx-padding: .5em; */
    -fx-border-color: transparent;
    -fx-border-width: 3;
    -fx-border-radius: 5;
    -fx-font-size: 25;
    -fx-background-radius: 5;
}

Button:hover {
    -fx-background-color: rgb(50, 50, 50, 0.5);
}

Button:focused {
    /* -fx-background-color: rgb(255, 255, 255);   */
    -fx-background-color: rgb(50, 50, 50, 0.5);
    -fx-border-color: rgb(255, 255, 255);
    /* -fx-text-fill: rgb(0, 0, 0);  */
}

Button:pressed {
    -fx-background-color: rgb(231, 231, 231);
    -fx-border-color: transparent;
    -fx-text-fill: rgb(0, 0, 0);
}

/* list */

ListView {
    -fx-background-color: rgba(0, 0, 0, 0.5);
    -fx-background-radius: 5;
    -fx-padding: 5;
    -fx-effect: none;
}

.list-cell {
    -fx-padding: .5em;
    -fx-background-color: transparent;
    -fx-background-radius: 5;
    -fx-text-fill: rgb(255, 255, 255);
    -fx-border-width: 3;
    -fx-border-radius: 5;
    -fx-border-color: transparent;
}

.list-cell:hover {
    -fx-background-color: rgba(100, 100, 100, 0.5);
    
}

.list-cell:focused {
    -fx-background-color: rgb(50, 50, 50, 0.5);
    -fx-border-color: rgb(255, 255, 255);
}

.list-cell:selected {
    -fx-background-color: rgb(255, 255, 255);
    -fx-text-fill: rgb(0, 0, 0);
}

/* slider */

Slider {
    -fx-padding: 1em;
}

.track {
    
    -fx-padding: 3;
    -fx-background-color: rgba(0, 0, 0, 0.5);
    -fx-background-radius: 5;
}

.thumb {
    -fx-pref-height: 30;
    -fx-prefer-width: 30;
    -fx-background-color: rgba(0, 0, 0, 0.5);
    -fx-size: 25;
    -fx-border-radius: 5;
    -fx-border-color: rgb(231, 231, 231);
    -fx-border-width: 3;
}

.thumb:hover {
    -fx-background-color: rgb(50, 50, 50, 0.5);
}

Slider:focused .thumb{
    -fx-background-color: rgb(255,255,255);
    -fx-border-color: white;
}

.thumb:pressed {
    -fx-background-color: rgb(231, 231, 231);
    -fx-border-color: rgb(231, 231, 231);
}

/* text box */

.textBox {
    -fx-background-radius: 5;    
    -fx-background-color: rgba(0, 0, 0, 0.5); 
    -fx-text-fill: white;
}

.debug {
    -fx-background-radius: 5;    
    -fx-background-color: rgba(255, 0, 0, 0.281); 
    -fx-border-color: red;
    -fx-text-fill: white;
    -fx-border-width: 20;
}

/* toggle button */

ToggleButton { 
    -fx-background-color: rgba(0, 0, 0, 0.5); 
    -fx-text-fill: white;
    -fx-border-color: transparent;
    -fx-border-width: 3;
    -fx-border-radius: 5;
    -fx-font-size: 25;
    -fx-background-radius: 5;
}

ToggleButton:hover {
    -fx-background-color: rgb(50, 50, 50, 0.5);
}

ToggleButton:focused {
    -fx-background-color: rgb(50, 50, 50, 0.5);
    -fx-border-color: rgb(255, 255, 255);
}

ToggleButton:selected {
    -fx-background-color: rgb(255, 255, 255);
    -fx-text-fill: rgb(0, 0, 0);

}

ToggleButton:pressed {
    -fx-background-color: rgb(231, 231, 231);
    -fx-border-color: transparent;
    -fx-text-fill: rgb(0, 0, 0);
}