/* ============================
   BASE
   ============================ */
body {
    font-family:
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
    color: #474d56;
}

select {
    background-color: #f0f0f0;
    border-color: #e0e0e0;
    font-family: inherit;
    font-size: 11px;
    padding: 2px 6px;
    color: grey;
}

input[type="number"] {
    font-family: inherit;
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px solid #bdc1c9;
    border-radius: 4px;
    font-size: 22px;
    font-weight: bold;
    color: #262626;
    text-align: center;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

select:focus,
input:focus,
textarea:focus {
    outline: none;
    border-color: #00a6dc;
    box-shadow: 0 0 0 1px #00a6dc inset;
}

.big-label {
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6f7379;
}
.big-number {
    background-color: white;
    font-size: 22px;
    color: #474d56;
    font-weight: bold;
    text-align: center;
    padding-top: 15px;
}
.info {
    font-size: 18px;
    color: #474d56;
    font-weight: bold;
    text-align: center;
    padding-top: 4px;
}
.border-only {
    border: 1px solid black;
}

/* *-------- --------------------------------------*/
/* *--------                 SVG                 --*/
/* *-------- --------------------------------------*/
.timeline-handle {
    stroke: #474d56;
    stroke-width: 1px;
    fill: #ffff3060;
}
.timeline-handle:hover {
    stroke-width: 2px;
}