html, body {
            padding:0;
            margin:0;
            font-family: "Arial", sans-serif;
        }
        
        header {
            background-color: #424242;
            width: 100%;
            text-align: center;
            padding: 10px;
            margin: 0;
            color: white;
        }
        
        .sidebar {
            float: left;
/*            border: 1px solid #ccc;*/
            padding: 0 20px;
            padding-bottom: 20px;
            width: 200px;
        }
        
        h3 {text-decoration: underline;}
        
        input[type=radio] {
            margin: 10px;
            cursor: pointer;
        }
        
        label {
            cursor: pointer;
        }
        
        table {
            
            display: table;
            margin: auto;
            text-align: center;
            /*text-align: center;*/
            /*float: left;*/
            /*border: 1px solid black;*/
/*            padding-left: 100px;*/
        }
        
        table td h2 span {
            font-size: .7em;
        }
        
        .map-row {
            text-align: center;
            
        }
        
        .map-row td {
            padding-left: 100px;
/*            border: 1px solid black;*/
        }
        
        .map-row h3 {
            text-decoration: none;
        }
        
        .map-row h3 span {
            color: #2aed93;
            color: #22c177ff;
            color: #2051a0;
            font-weight: normal;
        }
        
        .bar-row td {
/*            border: 1px solid black;*/
        }
        
        .bar-row td div {
/*            border: 1px solid aqua; */
        }
        
        .bar-row td .h2 {
            width: 50%;
            height: 70px;
            text-align: center;
            display: inline-block;
        }
        
        .bar-row td div h2 {
/*            float: right;*/
        }
        
        .bar-row td .h2 span {
            color: gray;
            font-weight: normal;
        }

        .bar-row td .percentage {
            width: 39%;
            display: inline-block;
        }

        .percentage p {
            font-weight: bold;
            color: #333;
        }

        .percentage span {
            color: #2051a0;
            font-size: 2em;
            font-weight: bold;
            margin-left: 5px;
        }
        
        #form_start, #form_complete {
            width: 30%;
            height: 50px;
            float: left;
            clear: both;
            margin-top: 5px;
            border-right: 4px solid #ddd;
        }
        
        #form_start h3, #form_complete h3 {
            float: right;
            margin:15px;
            margin-right: 10px;
            text-decoration: none;
        }
        
        .bar-row td .barchart {
            float: left;
            margin-top:5px;
            width: 66%;
            height: 40px;
        }
        
        .overview {
            float: right;
/*            width: 400px;*/
/*            height: 450px;*/
            margin: 30px 30px 0 0;
            padding: 20px 30px;
            border: 1px solid #ccc;
            box-shadow: 5px 10px 18px #888888;
        }
        
        .overview h3 {
            margin: 25px 0 0 20px;
        }
        
        .overview p {
            margin: 10px;
            margin-left: 20px;
            color: gray;
        }

        p span {
            color: #2aed93;
            color: #2051a0;
        }

        #reset {
            cursor: pointer;
            color: #2051a0;
            text-decoration: underline;
        }

        .motivation {
            clear:both;
            padding: 100px;
            width: 40vw;
            margin: auto;
            text-align: justify;
        }

        .motivation h1 {
            text-align: center;
        }

        .motivation #names {
            margin-top:0px; 
            /*margin-bottom:50px; */
            text-align: center;
        }

        .motivation h3 {
            margin-top: 50px;
        }

        .blue {
            color: #2051a0;
        }


 .states :hover {
        fill: red;
    }

    .state-borders {
        fill: none;
        stroke: #fff;
        stroke-width: 0.5px;
        stroke-linejoin: round;
        stroke-linecap: round;
        pointer-events: none;
    }


    .states :hover {
        fill: red;
    }

    .state-borders {
        fill: none;
        stroke: #fff;
        stroke-width: 0.5px;
        stroke-linejoin: round;
        stroke-linecap: round;
        pointer-events: none;
    }

    .categories {
        fill: none;
        stroke: #fff;
        stroke-linejoin: round;
    }

    .categories-choropleth {
        fill: #ccc;
    }

    #tooltip-container {
        position: absolute;
        background-color: #fff;
        color: #000;
        padding: 10px;
        border: 1px solid;
        display: none;
    }

    #canvas svg {
        border: 0px;
    }

    .tooltip_key {
        font-weight: bold;
    }

    .tooltip_value {
        margin-left: 20px;
        float: right;
    }

    .x-axis {
        fill: #000;
    }

    .axis path,
    .axis line {
        fill: none;
        stroke: #D4D8DA;
        stroke-width: 1px;
        shape-rendering: crispEdges;
    }

    .x path {
        display: none;
    }

    .toolTip {
        position: absolute;
        display: none;
        min-width: 80px;
        height: auto;
        background: none repeat scroll 0 0 #ffffff;
        border: 1px solid #6F257F;
        padding: 14px;
        text-align: center;
    }