#dashboard {
  height:100%; 
  position:relative;
  height:100%;
  width:100%;
  min-height:550px;
  box-sizing: border-box;
}
#dashboard * {
  font-family:ptsans;
  text-align:center;
  white-space:nowrap;
}
#dashboard section {
  position:relative;
  display:inline-block;
  vertical-align:top;
  box-sizing: border-box;
  padding:5px 5px 0 0;
  height:100%;
}
#dashboard section>* {
  display:block;
  box-sizing: border-box;
  border:1px solid;
}
#dashboard section h1 {
  font-size:1.55rem;
  height:35px;
  line-height:35px;
}
#dashboard section header,
#dashboard section footer {
  padding:5px;
}
#dashboard section header {
  margin-top:5px;
  height:105px;
}
#dashboard section article {
  position:absolute;
  left:0px;
  right:5px;
  top:155px;
  bottom:120px;
}
#dashboard section footer {
  position:absolute;
  height:75px;
  left:0px;
  right:5px;
  bottom:40px;
}
#dashboard section big {
  display:block;
  font-size:1.9rem;
  line-height:1.9rem; 
  margin-bottom:0.4rem;
}
#dashboard section small {
  display:block;
  font-size:1rem;  
  line-height:1rem; 
}
#dashboard section big sup,
#dashboard section small sup {
  font-size:50%;
  line-height:50%; 
  vertical-align:super;
}
#dashboard section small sup {
  font-size:70%;
  line-height:70%; 
}
#dashboard section big b,
#dashboard section small b,
#dashboard section big span,
#dashboard section small span {
  opacity:0.6;
}

#dashboard article.graph div {
  position:relative;
  width:100%;
  height:100%;
  box-sizing:border-box;
  padding:10px 40px 10px 0;
}
#dashboard article.graph div sup {
  position:absolute;
  display:block;
  width:60px;
  right:5px;
  text-align:right;
  font-size:12px;
  opacity:0.6;
}
#dashboard article.graph svg.grid {
  position:absolute;
  top:10px;
  right:35px;
  bottom:10px;
  left:0;
}
#dashboard article.graph svg.grid path {
  fill:transparent;
  stroke-width:0.5;
  stroke-opacity:0.2;
}
#dashboard article.graph svg.grid path.record {
  stroke-width:2 !important;
  stroke-opacity:1 !important;
}


#performances {
}
#performances,
#record {
  width:-moz-calc(50% - 175px);
  width:-webkit-calc(50% - 175px);
  width:calc(50% - 175px);
}
#record,
#legend {
  padding-right:0px !important;
}
#record article,
#record footer {
  right:0 !important;
}

#situation {
  width:350px;
}
#record header big.clock {
  display:none;
  margin-bottom:7px;
}
#record header small.clock {
  margin-top:7px;
}
#situation article {
  overflow:hidden;
}
#compas {
  position:relative;
  display:inline-block;
  width:250px;
  height:250px;
  margin-top:10px;
  background-repeat:no-repeat;
}
#compas b {
  position:absolute;
  display:block;
  width:100px;
  height:100px;
  left:50%;
  top:50%;
  margin-left:-50px;
  margin-top:-50px;
  background-repeat:no-repeat;
}
#compas b:after {
  position:absolute;
  top:-6px;
  left:44px;
  content:'';
  width:0;
  height:0;
  border-left:6px solid transparent; 
  border-right:6px solid transparent;
  border-bottom:12px solid #FFFFFF;
}
#compas b svg {
  position:absolute;
  width:60px;
  height:84px;
  left:20px;
}
#compas b svg.hull1 {
  top:0px;
}
#compas b svg.hull2 {
  top:9px;
}
#compas b svg.hull3 {
  top:9px;
}

#compas sup,
#compas sub {
  position:absolute;
  display:block;
  width:250px;
  height:250px;
}
#compas sup path {
  fill:transparent;
}
#compas sub path {
  fill:transparent;
}
#compas sup:after,
#compas sub:after {
  position:absolute;
  bottom:0px;
  left:119px;
  content:'';
  width:0;
  height:0;
  border-left:6px solid transparent; 
  border-right:6px solid transparent;
  border-bottom:12px solid transparent;
}
#compas sup:after {
  bottom:14px;
}
#compas sub:after {
  bottom:7px;
}

#situation footer small * {
}
section#legend {
  position:absolute;
  left:0px;
  right:0px;
  height:35px;
  top:auto !important;
  bottom:5px;
}

#legend>div {
  height:100%;
}
#legend span {
  font-size:0.8rem;  
}
#legend span b {
  opacity:0.6;
  white-space:normal;
}
#legend span sup {
  opacity:0.8;
  font-size:70%;
  line-height:70%; 
  vertical-align:super;
}


#graph24h path {
  fill:transparent;
  stroke-width:2;
}
#graphAdvancePos,
#graphAdvanceNeg {
  display:block;
  position:relative;
  left:0;
  right:0;
  height:50%;
}
#graphAdvancePos {
  top:0;
  bottom:50%;
}
#graphAdvanceNeg {
  top:0;
  bottom:50%;
}

#graphAdvancePos path {
  stroke-width:2;
}
#graphAdvanceNeg path {
  stroke-width:2;
}

#record article.graph div {
  padding-right:50px;
}

#unicolumn {
  display:none;
}


#performances>header>small:first-of-type,
#performances>header>small:last-of-type>span,
#performances path.record {
  display:none !important;
}



@media screen and (max-width:1100px) {
  html, body {
    font-size:13px;
  }
}  

@media screen and (max-width:910px) {
  #unicolumn {
    display:block;
  }
  html, body {
    font-size:18px;
  }
  #performances,
  #situation,
  #record,
  #legend {
    width:100%;
    padding:0 !important;
  }
  #legend {
    position:relative;
    left:auto;
    right:auto;
    height:auto;
    bottom:auto;
  }
  #dashboard section {
    position:relative;
    display:block;
    height:auto;
  }
  #dashboard section h1 {
    margin-top:5px;
  }
  
  #dashboard section article,
  #dashboard section footer {
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
  }
  #dashboard section article {
    margin-top:5px;
    margin-bottom:5px;
  }
  
  article.graph div {
    min-height:250px;
  }
  #legend div>span {
    display:block;
  }
  #legend div>i {
    display:none;
  }
}  
@media screen and (max-width:380px) {
  html, body {
    font-size:15px;
  }
}