html, body, #map {
    height: 100%;
    padding: 0;
    margin: 0;
}

/** legende**/
ul {
    width: 100%;
    height:100%;
    padding: 5px 5px;
    background: rgba(195, 195, 195, 0.8);


}
html *
{
    font-family: Palatino Linotype !important;
}


#titleWrapper{
    position: absolute;
    top: 10px;
    left: 10px;
    padding-left: 5px;
    padding-right: 5px;
    background: rgba(100,100,100,0.8);
    z-index: 98;
}


#selectwrapper{
    background: rgba(195, 195, 195, 0.8);
    width: 160px;
    top: 110px ;
    left: 10px;
    z-index: 99;
    position: absolute;
}


#wrapper {
    opacity: 0;
    width: 150px;
    height: 350px;
    position: absolute;
    top: 260px;
    left: 10px;
    z-index: 98;
}

#destCountry, #origCountry{
    text-align: left;
}

.leaflet-top {
    left: 96%;

}

#title{
    color: white;
    margin-right: 5px;
    z-index: 98;
}
#subtitile{
    color: white;
}

h4{
    color: white;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;

}
.choose{
    margin-right: 5px;
    margin-top: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
    text-align: left;
    color: black;
}
.destHov{
    text-decoration: underline;
}

.result{
    font-size: 120%;
}
h5{
    color: white;
    margin-left: 5px ;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;

}
.middle{
    text-align: center;
    margin-bottom: 5px;
}

#button {
    width: 70px;
    font-weight: bold;
    z-index: 99;
    right: 1%;
    bottom: 3%;
    cursor: pointer;

    position: absolute;
}


#wrapcountry{
    margin: 5px;

}

#wrapyear{
    margin: 5px;

 }

form{
    margin-bottom: 15px;
    font-size: 80%;
}


/* legend positioning */
.legend { list-style: none; }
.legend li { float: bottom; margin-right: 10px; }
.legend span { border: 1px solid #ccc; float: left; width: 12px; height: 12px; margin: 2px; }

/* colors */
legend .white { background-color: #ffffff; }
.legend .b1 { background-color: #e2e2ff; }
.legend .b2 { background-color: #aaaaff; }
.legend .b3 { background-color: #4c4cee; }
.legend .b4 { background-color: #030389; }
.legend .b5 { background-color: #010142; }

.legend .r1 { background-color: #fcbba1; }
.legend .r2 { background-color: #fb6a4a; }
.legend .r3 { background-color: #ef3b2c; }
.legend .r4 { background-color: #cb181d; }
.legend .r5 { background-color: #99000d; }




.cartodb-tooltip{
    width: 200px;
    max-width: none!important;
    border-radius: 25px;
}

div.cartodb-tooltip-content-wrapper-dest{
    padding: 5px;
    color: #fff;
    max-width:none;
    background-color: #4e55ff;

}
div.cartodb-tooltip-content-wrapper-orig{
    padding: 5px;
    color: #fff;
    max-width:none;
    background-color: #fc816a;

}

div.cartodb-tooltip-content-wrapper img{
    width: 100px;
    position: relative;
    left: 70px;
}

/* infowindow */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    z-index: 100;
}

/* Modal Content/Box */
.modal-content {
    top: 100px;
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 50%; /* Could be more or less, depending on screen size */
    height: 50%;
    word-wrap: break-word;
    overflow-y: scroll;



}
.text{
    color:black;
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#buttonDiagram {
    width: 160px;
    opacity: 0;
    height: 30px;

    font-weight: bold;
    z-index: 99;
    padding: 5px;
    top: 638px;
    left: 10px;
    position: absolute;
    cursor: pointer;
}
#timer_div {
    opacity: 0;
    font-size: 200%;
    color: darkred;
    font-weight: bold;
    background-color:rgba(254, 255, 49, 0.9);
    z-index: 70;
    padding: 5px;
    top: 20%;
    left: 30%;
    position: absolute;
}

#chartView {
    opacity: 0;
    font-size: 200%;
    color: darkred;
    font-weight: bold;
    background-color: rgba(254, 255, 49, 0.9);
    z-index: 70;
    padding: 5px;
    top: 620px;
    left: 180px;
    position: absolute;
}