/* CSS RELATED TO MAPS AND SVGS */

.countries {
    fill: none;
    stroke: #000;
    stroke-linejoin: round;
}

.track,
.track-inset,
.track-overlay {
    stroke-linecap: round;
}

.track {
    stroke: #000;
    stroke-opacity: 0.3;
    stroke-width: 10px;
}

.track-inset {
    stroke: #dcdcdc;
    stroke-width: 8px;
}

.track-overlay {
    pointer-events: stroke;
    stroke-width: 50px;
    stroke: transparent;
    cursor: crosshair;
}

.handle {
    fill: #fff;
    stroke: #000;
    stroke-opacity: 0.5;
    stroke-width: 1.25px;
}

.svgBtns {
    background-color: #000;
    cursor: pointer;
}

svg text {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

svg text::selection {
    background: none;
}

/* CSS RELATED TO THE HTML AND PAGE STRUCTURE */

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

html, body {
    padding: 0;
    margin: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    min-width: 1000px;
}

h1 {
    padding-left: 25px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: 'CircularStd', sans-serif;
}

hr {
    border-top: 1px solid #fafafa;
}

svg {
    display: block;
    margin: auto;
}

label {
    color: black;
}

#map-vis {
    margin-bottom: 10px;
}

#chart-vis {
    padding: 20px;
    margin-right: 20px !important;
}

#button-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

#radios {
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

.header-wrapper {
    display: grid;
    grid-template-columns: 5fr 1fr;
    border-bottom: solid #e0e0e0 1px;
    cursor: default;
}

.language-a {
    color: blue;
    cursor: pointer;
    text-decoration: underline blue;
}

.text-section {
    font-size: large;
    padding: 0px 20vw;
}

.radio-all {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    border-radius: 10px;
    padding: 10px 10px;
    cursor: pointer;
}

.radio-all.active {
    color: white;
    fill: white;
}

div.radio-all > h2, div.radio-all > p {
    margin: 0;
    font-family: 'CircularStd', sans-serif;
}

.radio-1 {
    grid-column-start: 3;
    grid-column-end: 5;
    color: #4292c6;
    fill: #4292c6;
    border: solid #4292c6 2px;
}

.radio-1.active {
    background-color: #4292c6;
}

.radio-2 {
    grid-column-start: 6;
    grid-column-end: 8;
    color: #fb6a4a;
    fill: #fb6a4a;
    border: solid #fb6a4a 2px;
}

.radio-2.active {
    background-color: #fb6a4a;
}

.radio-3 {
    grid-column-start: 9;
    grid-column-end: 11;
    color: #41ab5d;
    fill: #41ab5d;
    border: solid #41ab5d 2px;
}

.radio-3.active {
    background-color: #41ab5d;
}

.tooltip {
    position: absolute;
    text-align: center;
    width: 100px;
    padding: 5px;
    margin-top: -20px;
    font: 12px sans-serif;
    background: #ddd;
    pointer-events: none;
    border-radius: 5px;
}

.contact-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
}

/*  GENERATED BY www.bestcssbuttongenerator.com */
#start-button {
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background-color:#f9f9f9;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    cursor:pointer;
    color:#666666;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffffff;

    grid-column: 10;
}

#start-button:hover {
    background-color:#e9e9e9;
}

#start-button:active {
    position:relative;
    top:1px;
}

/* ====================================== */