/* 
*  =============================================================================================================================================
*  Project : Hand Monitor Data visualisation e-Nable France
*  Author  : Xavier Grosjean
* 
*  ---------------------------------------------------------------------------------------------------------------------------------------------
*  Description : main stylesheet
* 
* =============================================================================================================================================
*/

svg {
    font: 10px sans-serif;
}

.area {
    fill: #0088ce;
    clip-path: url(#clip);
}

.bar {
    fill: #0088ce;
}
body {
    background-image: url("../img/logo.png");
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 250px;
    background-color: lightgray;
}
.axis path,
.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.brush .extent {
    stroke: #fff;
    fill-opacity: .125;
    shape-rendering: crispEdges;
    clip-path: url(#clip);
}

rect.pane {
    cursor: move;
    fill: none;
    pointer-events: all;
}

#onOffGraph g.x.axis .tick text {
    transform: translateY(15px) translateX(-15px) rotate(-45deg);
}

#dropzone {
    border: 2px solid blue;
    position: fixed;
    top:2px;
    left:2px;
    right:2px;
    bottom:2px;
    text-align: center;
    vertical-align: center;
}
body.init #dropzone {
    display: none;
}

#download {
    position:absolute;
    bottom:10px;
    left:0;
    right:0;
    text-align: center;
}
#dragndrop {
    padding-top: calc(25%);
}

h1 {
    display:none;
    text-align: center;
}
h2 {
    display:none;
}
body.init .showAfter {
    display: block;
}

.actions {
    display:none;
    text-align: center;
}