* {
    scrollbar-background: #161e31;
    scrollbar-background-hover: #161e31;
    scrollbar-background-active: #161e31;

    scrollbar-color: #33405d;
    scrollbar-color-hover: #404f71;
    scrollbar-color-active: #4f608a;

    color: #e9e9e9;
}

#_default, CommandScreen, EventLog { # screens
    background: #0a0e1b;
}

RichLog {
    background: #0a0e1b;
}
Graph {
    height: 16;
}
Horizontal {
    height: auto;
}
Rule {
    color: #32416a;
    margin: 0;
}
DataTable {
    overflow-x: hidden;
}
DataTable > .datatable--odd-row {
    background: #131a2c;
}
DataTable > .datatable--even-row {
    background: #0f1525;
}
LoadingIndicator {
    color: #8fb0ee;
    height: auto;
    content-align: center middle;
}
ModalScreen {
    background: #0d1015 70%;
    align: center middle;
    height: 40;
    color: #4d5a85;
}

Sparkline {
    margin-top: 1;
    margin-bottom: 1;
}

SpinnerWidget {
    color: #8fb0ee;
    height: auto;
    content-align: center middle;
}

TopBar {
    dock: top;
    background: #192036;
    height: 1;
    layout: horizontal;
}
#topbar_title {
    width: 15%;
    content-align: left middle;
}
#topbar_host {
    color: #bbc8e8;
    width: 70%;
    content-align: center middle;
    text-style: bold;
}
#topbar_help {
    width: 15%;
    content-align: right middle;
    color: #8f9fc1;
}

.connection_loading_indicator {
    margin-top: 3;
}
.dashboard {
    padding-top: 1;
}
.dashboard > Center {
    layout: horizontal;
    content-align: center middle;
}
.dashboard > Center > * {
    content-align: center top;
    background: #0f1525;
    border: tall #1b233a;
    height: 11;
    width: auto;
}

.innodb_trx_locks {
    height: auto;
    background: #0f1525;
    border: tall #1b233a;
    margin-bottom: 1;
}
.innodb_trx_locks > Label {
    width: 100%;
    text-style: bold;
    color: #bbc8e8;
    content-align: center middle;
    margin-bottom: 1;
}

.metadata_locks {
    height: auto;
    background: #0f1525;
    border: tall #1b233a;
    margin-bottom: 1;
}
.metadata_locks > Label {
    width: 100%;
    text-style: bold;
    color: #bbc8e8;
    content-align: center middle;
    margin-bottom: 1;
}

.processlist {
    height: auto;
    background: #0f1525;
    border: tall #1b233a;
}
.processlist > Label {
    width: 100%;
    color: #bbc8e8;
    text-style: bold;
    content-align: center middle;
    margin-bottom: 1;
}


.replication {
    height: auto;
    width: auto;
    margin-bottom: 1;
}
.replication > Label {
    width: 100%;
    content-align: center middle;
}
.replication > Center {
    layout: horizontal;
    width: auto;
    content-align: center middle;
}
.replication > Center > ScrollableContainer {
    content-align: center top;
    background: #0f1525;
    border: tall #1b233a;
    height: auto;
    max-height: 18;
}
.replication > Center > ScrollableContainer > Static {
    width: auto;
}
.replication > Center > .replication_status {
    max-width: 85;
}
.replication > Center > .replication_thread_applier {
    max-width: 60;
}

.replicas {
    height: auto;
    margin-bottom: 1;
}
.replicas > Container {
    height: auto;
    layout: grid;
    grid-size: 2;
    grid-gutter: 1 0;
}
.replicas > Container > ScrollableContainer  {
    background: #0f1525;
    border: tall #1b233a;
    height: auto;
    max-height: 18;
}
.replicas > Label {
    width: 100%;
    content-align: center middle;
}

.group_replication {
    height: auto;
    margin-bottom: 1;
}
.group_replication > Container {
    height: auto;
    layout: grid;
    grid-size: 3;
    grid-gutter: 1 0;
}
.group_replication > Container > ScrollableContainer  {
    background: #0f1525;
    border: tall #1b233a;
    height: auto;
    max-height: 18;
}
.group_replication > Label {
    width: 100%;
    content-align: center middle;
}

.ddl {
    height: auto;
    background: #0f1525;
    border: tall #1b233a;
    margin-bottom: 1;
}
.ddl > Container {
    height: auto;
    width: auto;
}
.ddl > Label {
    width: 100%;
    color: #bbc8e8;
    text-style: bold;
    content-align: center middle;
}

.pad_bottom_1 {
    padding-bottom: 1;
}


TabPane {
    padding: 0;
}
Tab.-active:focus {
    text-style: bold underline;
}
Tabs:focus .underline--bar {
    color: #caddfe;
}
Underline > .underline--bar {
    background: #283357;
    color: #82a5e1;
}
AutoComplete {
    width: auto;
    height: auto;
}
Dropdown {
    width: 60;
    background: #151926;
}
Dropdown .autocomplete--highlight-match {
    background: #777500;
}
Dropdown .autocomplete--selection-cursor {
    background: #283048;
}
Input {
    width: 40;
    margin: 0 2;
    margin-bottom: 1;
    background: #111322;
    border: tall #252e49;
}
Input:focus {
    background: #111322;
    border: tall #384673;
}
Input>.input--placeholder {
    color: #5e6b87;
}

.datatable--header {
    background: #00000000;
    color: #c5c7d2;
    text-style: bold;
}

.panel_container {
    height: auto;
}
.button_container {
    width: 100%;
    align-horizontal: center;
}
.switch_container {
    align: center top;
    margin: 1 0 1 0;
    height: auto;
}
.switch_container > Label {
    color: #bbc8e8;
    padding-left: 1;
    text-style: bold;
}
.stats_data {
    width: 100%;
    content-align: center middle;
}
Sparkline > .sparkline--max-color {
    color: #869fd9;
}
Sparkline > .sparkline--min-color {
    color: #384c7a;
}


.pad_top_0 {
    padding-top: 0;
}
.top_pad_1 {
    padding-top: 1;
}


Button.-primary {
    background: #192c5b;
    border-top: tall #425894;
    border-bottom: tall #151b2b;
}
Button.-primary:hover {
    background: #203875;
    border-top: tall #4a62a4;
    border-bottom: tall #151b2b;
}
Button.-primary:focus {
    background: #203875;
    border-top: tall #4a62a4;
    border-bottom: tall #151b2b;
    text-style: bold;
}
Button {
    background: #282c42;
    border-top: tall #54597b;
    border-bottom: tall #171922;
}
Button:hover {
    background: #383e5c;
    border-top: tall #69709a;
    border-bottom: tall #171922;
}
Button:focus {
    background: #383e5c;
    border-top: tall #69709a;
    border-bottom: tall #171922;
    text-style: bold;
}

Switch {
    background: #0a0e1b;
    border: none #364774;
}
Switch > .switch--slider {
    color: #424d6f;
    background: #192132;
}
Switch:focus > .switch--slider {
    color: #fd8383;
}
Switch:hover > .switch--slider {
    color: #fd8383;
}
Switch.-on > .switch--slider {
    color: #5c81d7;
}
Switch.-on:focus > .switch--slider {
    color: #54efae;
}
Switch.-on:hover > .switch--slider {
    color: #54efae;
}

RadioSet {
    background: #121626;
    border: none;
    align: center middle;
    width: 100%;
}
RadioButton .toggle--button {
    background: #343d56;
}
RadioSet ToggleButton:hover {
    background: #121626;
    text-style: none;
}
RadioSet ToggleButton:hover .toggle--label {
    text-style: underline;
    color: #a5b8e7;
}
RadioSet:focus > RadioButton.-selected > .toggle--label {
    text-style: underline;
}
RadioSet:focus RadioButton.-selected .toggle--label {
    color: #a5b8e7;
}
RadioSet > RadioButton.-selected > .toggle--label {
    color: #9bb2eb;
}


Checkbox {
    background: #131626;
    border: none;
    padding-left: 2;
    padding-bottom: 1;
    content-align: left middle;
}
Checkbox .toggle--button {
    background: #343d56;
}
RadioSet:focus > .toggle--label {
    text-style: underline;
}
ToggleButton:focus > .toggle--label {
    text-style: underline;
    color: #a5b8e7;
}
ToggleButton:hover > .toggle--label {
    text-style: underline;
    color: #a5b8e7;
}
ToggleButton.-on > .toggle--button {
    color: #62c39a;
    text-style: bold;
}

Toast {
    width: auto;
    max-width: 50%;
    background: #171d32;
}
Toast.-information {
    border-left: wide #788bc9;
    border-right: wide #192036;
}
Toast.-warning {
    border-left: wide #f0e357;
    border-right: wide #192036;
}
Toast.-success {
    border-left: wide #5bd088;
    border-right: wide #192036;
}
Toast.-success .toast--title {
    color: #6ae398;
}
Toast.-error {
    border-left: wide #f05757;
    border-right: wide #192036;
}
Toast.-error .toast--title {
    color: #ed6363;
}