:root {
    font-family: Arial, sans-serif;
    --bg: #010409;
    --bg-secondary: #0d1117;
    --fg: #e4e8ec;
    --border-color: #30363d;
}

body {
    background-color: var(--bg);
}

#vis {
    margin-left: 16rem;
}

#vis svg {
    border-style: solid;
    border-color: var(--border-color);
    border-width: 1px;
    border-radius: 8px;
    margin: 5px;
    background: var(--bg-secondary);
}

#vis svg text {
    fill: var(--fg);
}

#vis svg .tick text {
    font-size: 12px;
}

.tick line {
    color: var(--border-color);
}

#choropleth-map .state {
    stroke: var(--border-color);
    stroke-width: 0.5;
    opacity: 0.8
}

#choropleth-map .state:hover {
    opacity: 1
}

#choropleth-map .state.active {
    stroke: #e89f03;
    stroke-width: 4;
    opacity: 1;
}

#bar-chart .bar {
    fill: #ffcf58;
    opacity: 0.6;
}

#bar-chart .bar:hover {
    stroke-width: 1px;
    opacity: 0.8;
}

#bar-chart .bar.active {
    stroke-width: 1px;
    opacity: 0.9;
}

/* Sidebar */
#sidebar {
    position: fixed;
    background: var(--bg-secondary);
    width: 16rem;
    height: 100%;
    top: 0;
    left: 0;
    border-right: 1px solid;
    border-right-color: var(--border-color);
}

.title {
    color: #e4e8ec;
}

#sidebar-content {
    color: grey;
    margin-left: 1.2rem;
}

#map-info-selector {
    margin-bottom: 1rem;
}

#job-legend {
    color: #e9e9e9;
    font-size: 14px;
    padding-left: 0.5rem;
}

.legend-btn {
    margin: 1.4rem 0;
    cursor: pointer;
    transition: all ease-in-out 200ms;
    list-style: none;
    color: grey;
    /* make text unselectable */
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.legend-btn:is(.active) {
    color: white;
}

.legend-symbol {
    width: 12px;
    height: 12px;
    margin-right: 3px;
    display: inline-block;
    border-radius: 50%;
}

.legend-btn[data-category="Software Engineer"] .legend-symbol {
    background: #F35461;
}
.legend-btn[data-category="Product Manager"] .legend-symbol {
    background: #FFBE72;
}
.legend-btn[data-category="Software Engineering Manager"] .legend-symbol {
    background: #FFF372;
}
.legend-btn[data-category="Data Scientist"] .legend-symbol {
    background: #A4EB41;
}
.legend-btn[data-category="Hardware Engineer"] .legend-symbol {
    background: #10942D;
}
.legend-btn[data-category="Solution Architect"] .legend-symbol {
    background: #81E1FF;
}
.legend-btn[data-category="Product Designer"] .legend-symbol {
    background: #3D6EEF;
}
.legend-btn[data-category="Technical Program Manager"] .legend-symbol {
    background: #7B40E0;
}
.legend-btn[data-category="Management Consultant"] .legend-symbol {
    background: #D14FEB;
}
.legend-btn[data-category="Business Analyst"] .legend-symbol {
    background: #FFA0F4;
}

/* Tooltip */
#tooltip {
    display: none;
    position: absolute;
    background: #fff;
    box-shadow: 2px 2px 3px 0 rgb(92 92 92 / 0.5);
    border: 1px solid #ddd;
    font-size: 12px;
    padding: 8px 8px;
}

#tooltip ul {
    padding-left: 1rem;
}

.tooltip-title {
    font-weight: bold;
    font-size: 14px;
}