/* The code bellow is an original addition 
    to he data-viz template */

/* Attributes to enhance the header */
header { 
    color: rgb(245, 245, 245);
    padding-left: 10px;
    max-width: 1224px;
    font-size: 14px;    
}

header a {
    font-size: 3rem;
    text-decoration: none;
    color: whitesmoke;
}

header img {
    vertical-align: middle;
    border-radius: 5px;
    margin-right: 10px;
    height: 50px;
    width: 50px;
}
/* End of the header attributes*/

/* End of my original work */

/* This code is part of the data-viz template */
body {
    font-family: sans-serif;
    background: rgb(34, 34, 34); 
}

.menu-item {
    width: 310px;
    height: 31px;
    list-style-type: none;
    padding-top: 10px;

    /* The code bellow is an original addition 
    to he data-viz template */
    /* Attributes to enhance the menu */
    color: rgb(200, 200, 200);
    margin-bottom: 20px;
    margin-right: 15px;
    text-align: center;
    border-radius: 5px;
    font-size: 18px;
    /* End of my original work */
}

.container {
    display: flex;
}

.hover {
    background: #1E90FF;

    /* The code bellow is an original addition 
    to he data-viz template*/
    /* Change the text to bold wen the 
    mouse pointer is inside the box */
    color:rgb(245, 245, 245);
    font-weight: bold;
    /* End of my original work */
}

.selected {
    background: #a5126f;

    /* The code bellow is an original addition 
    to he data-viz template*/
    /* Attributes to enhance the menu */
    color: rgb(112, 162, 227);
    color: rgb(245, 245, 245);
    font-weight: bold;
    /* End of my original work */
}
/* End of the code of the data-viz template */

/*The code below from line 48 to 80 is bean added following 
the leaflet tutorial for the choropleth map*/

/* Displays the map at 100% of the data visualization window */
#map {
    background: rgb(34, 34, 34);
    height: 100%;
}

/* Define the visual parameters for the information 
window while displaying the map */
.info {
    font: 20px/16px Arial, Helvetica, sans-serif;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    background: rgba(34,34,60,0.9);
    padding: 15px 20px;
    border-radius: 5px;
    color: #F5F5F5;
}

.title {
    font: 25px/20px Arial, Helvetica, sans-serif;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    background: rgba(34,34,60,0.9);
    transform: translate(-330px);
    border-radius: 5px;
    padding: 10px 50px;
    color: #F5F5F5;
}

.title h4 {
    color: #F5F5F5;
    margin: 0 0 5px;
}
/* End of the information window display parameters */

/* Define the parameters for the legend window 
while displaying the map */
.legend {
    line-height: 18px;
    color: #F5F5F5;
}

.legend i {
    margin-right: 8px;
    height: 15px;
    opacity: 0.9;
    width: 15px;
    float: left;
}
/* End of the legend window display parameters */