* {
    box-sizing: border-box;
}

strong {
    font-weight: 600;
}

body {
    padding: 0;
    margin: 0;
    font-family: "Source Sans Pro", sans-serif;
    color: #2f4053;
}

.countrySelect {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    box-shadow: 0 0 5px 1px black;
    color: #0750f5;
}

#app {
    margin: 0 auto;
    padding: 20px;
    max-width: 600px;
}

.random {
    width: 100%;
}

    .random .vtc {
        height: 250px;
        font-size: 12px;
    }

    .random .labels {
        stroke: rgba(0, 0, 0, 0.05);
    }

    .random .active-line {
        stroke: rgba(0, 0, 0, 0.2);
    }

    .random .point {
        stroke-width: 2;
        transition: stroke-width 0.2s;
    }

        .random .point.is-active {
            stroke-width: 5;
        }

    .random .curve1 .stroke {
        stroke: #bd3939;
        stroke-width: 2;
    }

    .random .curve1 .fill {
        fill: #fbe1b6;
        opacity: 0.05;
    }

    .random .curve1 .point {
        fill: #8f243b;
        stroke: #8f243b;
    }

    .random .curve2 .stroke {
        stroke: #593115;
        stroke-width: 2;
    }

    .random .curve2 .point {
        fill: #120c07;
        stroke: #120c07;
    }

    .random .curve3 .stroke {
        stroke: #7fdfd4;
        stroke-width: 2;
    }

    .random .curve3 .point {
        fill: #7fdfd4;
        stroke: #7fdfd4;
    }

    .random .tooltip {
        padding: 10px;
        background: #fff;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        pointer-events: none;
    }

        .random .tooltip:not(.is-active) {
            display: none;
        }

    .random .tooltip-data {
        display: flex;
    }

    .random .tooltip-data-item {
        display: flex;
        align-items: center;
    }

        .random .tooltip-data-item:not(:first-child) {
            margin-left: 20px;
        }

        .random .tooltip-data-item:before {
            content: "";
            display: block;
            width: 15px;
            height: 15px;
            margin-right: 5px;
        }

    .random .tooltip-data-item--1:before {
        background: #fbac91;
    }

    .random .tooltip-data-item--2:before {
        background: #fbe1b6;
    }

    .random .tooltip-data-item--3:before {
        background: #7fdfd4;
    }

.datachart {
    border-bottom: black 1px solid;
    margin-bottom: 5px;
}

    .datachart h5 {
        background-color: #dddddd;
        margin-top:5px;
    }