/* globe_trotter.css: Page-specific styles for Globe trotter */
#canvas {
    cursor: grab;
}

#canvas:active {
    cursor: grabbing;
}

.ocean {
    fill: var(--blue);
}

.graticule {
    fill: none;
    stroke: #fff;
    stroke-opacity: 0.25;
    stroke-width: 0.5px;
}

.country {
    fill: var(--green);
    stroke: none;
}

/* Where the trip starts and ends */
.country.selected {
    fill: var(--orange);
}

.border {
    fill: none;
    stroke: #fff;
    stroke-opacity: 0.6;
    stroke-width: 0.5px;
}

.route {
    fill: none;
    stroke: var(--yellow);
    stroke-width: 2.5px;
    stroke-linecap: round;
}

.airport {
    fill: var(--yellow);
    stroke: #fff;
    stroke-width: 1.5px;
}

.aircraft {
    fill: #fff;
    stroke: var(--dark);
    stroke-width: 2px;
}

/* Long menus: keep the width sane, and country headings in gold on the blue */
control select {
    max-width: 14rem;
}

control select optgroup {
    color: var(--yellow);
    background: var(--blue);
}