body {
    background-color: rgba(0,0,0,0);
    margin:0;
    padding:0;
	overflow:hidden;  /* mettre hidden pour cacher la barre de défilement*/
    font-family: Arial;
}
#page {
    background-color: rgba(0,0,0,0.0);
}

#expired {
    position: absolute;
    background-color:rgba(200,0,0,0.9);
    color: #ffffff;
    height: 100%;
    width: 100%;
    z-index: 9999999;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    display: None;
}

#drag {
    position: absolute;
    background-color:rgba(255,255,0,0);
    z-index:10;
    width:50%;
    height:50%;
    top: 25%;
    left: 25%;
    /*-webkit-user-select: none;*/
    -webkit-app-region: drag;
}
#drag:hover {
    cursor: move;
}

#drag_overlays_cont {
    position: absolute;
    background-color:rgba(128,128,255,0.5);
    z-index:999;
    width:100%;
    height:100%;
    top: 0;
    left: 0;
    border: 3px solid #ffff00;
    box-sizing: border-box;
    display: none;
}
#drag_overlays {
    position: relative;
    width:94%;
    height:94%;
    top: 3%;
    left: 3%;
    -webkit-app-region: drag;
    pointer-events: auto;
}

#rpm_canvas {
    position: absolute;
    z-index: 1;
}
#rpm_bg_canvas {
    position: absolute;
    z-index: 2;
    background-color: rgba(128,0,128,0.0);
}
#rpm_bg2_canvas {
    position: absolute;
    z-index: 0;
    background-color: rgba(128,0,128,0.0);
}


#rpm { z-index: 3; display:inline-block; position: absolute; background-color: #cccccc; text-align: center; font-weight: bold; }

/*#gear { z-index: 3; display:inline-block; position: absolute; background-color: rgba(0,255,0,0.0); color: #ffffff; text-align: center; font-weight: bold; }*/

#gearR, #gearN, #gear1, #gear2, #gear3, #gear4, #gear5, #gear6, #gear7, #gear8 {
    z-index: 4; left:0px;top:0px;display:inline-block; position: absolute; background-color: rgba(0,255,0,0.0); color: #ffffff; text-align: center; font-weight: bold;
    opacity: 0;
}

#speed { z-index: 3; display:inline-block; position: absolute; background-color: rgba(0,0,0,0); color: #ffff00; text-align: center; font-weight: normal; }
#speed_unit { z-index: 3; display:inline-block; position: absolute; background-color: rgba(0,0,0,0); color: #ffffff; text-align: center; font-weight: normal; }

#b_cont { display:inline-block; position: absolute; background-color: rgba(0,0,0,0.2); }
#t_cont { display:inline-block; text-align: center; color: #ffffff; position: absolute; background-color: rgba(0,0,0,0.2); }
#clutch_cont { display:inline-block; text-align: center; color: #ffffff; position: absolute; background-color: rgba(0,0,0,0.2); }

#b { display:inline-block; position: absolute; left:0px; background-color: #ff0000; width: auto; top: 0px; height: 100%; }
#t { display:inline-block; position: absolute; left:0px; background-color: #00cc00; width: auto; top: 0px; height: 100%; }
#clutch { display:inline-block; position: absolute; left:0px; background-color: #0088ff; width: auto; top: 0px; height: 100%; }

#b_text { position: absolute; text-align: center; color: #ffffff; font-weight: bold }
#t_text { position: absolute; text-align: center; color: #ffffff; font-weight: bold}
#clutch_text { position: absolute; text-align: center; color: #ffffff; font-weight: bold}

#ers { z-index:1; display:inline-block; position: absolute; background-color: #ff0000; color: #ffffff; text-align: center; font-weight: bold; }
#ers_bg { z-index:0; display:inline-block; position: absolute; background-color: rgba(0,0,255,0.4); color: #ffffff; text-align: center; font-weight: bold;  }
#drs { display:inline-block; position: absolute; background-color: rgba(0,0,0,1); opacity: 0.5; color: #888888; text-align: center; font-weight: bold;  }

#fullscreen {
    position: absolute;
    background-color: #004422;
    opacity: 0.3;
    width: 6em;
    height: 3.5em;
    padding-top: 0.5em;
    line-height: 1.5em;
    z-index: 99999;
    right: 0px;
    bottom: 0px;
    color: #ff8800;
    text-align: center;
    font-size: 1em;
    vertical-align: middle;
}
#fullscreen:hover {
    opacity: 1;
}