/* Dark theme for dcc.Dropdown (react-select) to match the rest of the dashboard. */

.Select-control {
    background-color: #161b22 !important;
    border: 1px solid #30363d !important;
    border-radius: 4px !important;
    font-family: monospace !important;
    font-size: 12px !important;
    color: #c9d1d9 !important;
    min-height: 34px !important;
}
.Select-control:hover {
    box-shadow: none !important;
    border-color: #00d4aa !important;
}
.is-focused:not(.is-open) > .Select-control {
    border-color: #00d4aa !important;
    box-shadow: none !important;
}
.Select-placeholder,
.Select--single > .Select-control .Select-value {
    color: #8b949e !important;
    font-family: monospace !important;
    font-size: 12px !important;
}
.Select-input > input {
    color: #c9d1d9 !important;
    font-family: monospace !important;
}
.Select-menu-outer {
    background-color: #161b22 !important;
    border: 1px solid #30363d !important;
    font-family: monospace !important;
    font-size: 12px !important;
    z-index: 20 !important;
}
.Select-option {
    background-color: #161b22 !important;
    color: #c9d1d9 !important;
}
.Select-option.is-focused {
    background-color: #21262d !important;
    color: #00d4aa !important;
}
.Select-option.is-selected {
    background-color: #1a2e29 !important;
    color: #00d4aa !important;
}
.Select-noresults {
    background-color: #161b22 !important;
    color: #8b949e !important;
}
.Select-arrow {
    border-color: #8b949e transparent transparent !important;
}
.is-open > .Select-control .Select-arrow {
    border-color: transparent transparent #8b949e !important;
}
.Select-clear-zone,
.Select-arrow-zone {
    color: #8b949e !important;
}
.Select--multi .Select-value {
    background-color: rgba(0, 212, 170, 0.14) !important;
    border: 1px solid rgba(0, 212, 170, 0.4) !important;
    color: #00d4aa !important;
    border-radius: 3px !important;
}
.Select--multi .Select-value-icon {
    border-right: 1px solid rgba(0, 212, 170, 0.4) !important;
}
.Select--multi .Select-value-icon:hover {
    background-color: rgba(0, 212, 170, 0.25) !important;
    color: #00d4aa !important;
}