@import 'https://fonts.googleapis.com/css?family=Lato:300,400,700';


/* reset */
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

body{
    font-family: 'Lato', sans-serif;
    background: #000;
    overflow: hidden;
}

svg { margin:0; padding:0; font-size:100%; line-height:1; }

#toggleView {
    border: 1px solid #f3fefe;
    border-radius:7px;
    padding:5px;
    position: fixed;
    top:25px;
    left: 55px;

    font-size: 13px;

    color:#e3eeee;
    cursor:pointer;
}
/* */
.axis g text {
    fill: #e1e1e1;   
}

.axis g line {
    stroke:#e1e1e1; 
}
.domain {
    stroke: #e1e1e1; 
}
#yTag {
    cursor:pointer;
}


.line {
    fill: none;
    stroke: steelblue;
    stroke-width: 2px;
}

#opciones { 
    display:block;
    color: #e1e1e1; 
    margin-top:20px;
    padding-top: 10px

} 

.opsContainer {
    display:block;
    list-style-type: none;
    overflow:visible;

}

.opsContainer .opsLi {
    display:inline-block;
    list-style-type: none;
    cursor:pointer;
    margin:6px;
    color:  #e1e1e1; 
}

#main {
    position: relative;
    width: 100%;
    max-width: 840px;
    margin-top: 20px;
	  margin-bottom: 20px;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.viz-container {
    width: 100%;
    height: 100%;
}
.viz-container .viz{
    display: block;
    float: left;
    height: 400px;
    width: 840px;
}
.viz-container .options{
    display: block;
    height: 200px;
    width: 840px;
}
.viz-container .options ul li{
    display: inline-block;
    padding: 5px 5px;

    font-size: 14px;
    font-weight: 300;

    cursor: pointer;
}

.viz-container .options ul li.selected{
    font-weight: 700;
}

.tooltip {
    display:none;
    position:absolute;
    border:1px solid #333;
    background-color:#161616;
    border-radius:5px;
    padding:10px;
    color:#fff;
    font-size:12px Arial;
}