/* sensorer.css mats@klarare.se */
:root {
    --outerbox-color:  rgb(200,220,200);
    --tehum-color:  rgb(210,230,210);
    --box-color:  rgb(100,150,200);
    --server-color: rgb(200,100,100);
    --services-color:  rgb(210,230,210);
    --outerbox-label-font:'Comic Sans MS', cursive, sans-serif;
}

body {
    font-family: serif;
    font-size: 16px;
}
svg {position:relative; z-index:6;}
div.outerbox {position:relative; z-index:5;}

/* begin gauges */
.label {
    font-size: 12px;
    fill: #ffffff;
    text-anchor: middle;
}

.face {
    stroke: #c8c8c8;
    stroke-width: 2;
}

.minorTicks {
    stroke-width: .5;
    stroke: white;
}

.majorTicks {
    stroke: white;
    stroke-width: 1;
}

.temp text,
.hum text {
    font-size: 12px;
}
/* - end gauges */

.services button {height:3em;}

.bigbtn {
    margin: 2px;
    width: auto;
    height: 50px;
    border-radius:0.5em;
}

.grafbtn {
    float:left;
    clear:left;
    display: inline;
    border-radius:0.2em;
}

.box2 {
    float:left;
    background-color: var(--box-color);
    padding:4px;
    margin:4px;
    border-radius: 10px 10px 10px 10px;
}

.box2 h3{
    padding:4px;
    font-family: var(--outerbox-label-font);
    font-weight: bold;
    font-size: 12px;
    height:18px;
    background-color: inherit;
    border-radius: 0 10px 10px 0;
    text-align: center;
}

.server {
    float:left;
    background-color: var(--server-color);
    border: 3px solid inset;
}

.outerbox {
    position:relative;
    clear:both;
    float:left;
    height:auto;
    background-color: var(--outerbox-color);
    background-color: rgb(200,220,200);
    padding:4px;
    margin:4px;
    margin-top:37px;
    border-radius: 0 10px 10px 10px;
}

.outerbox:before {
    content: attr(label);
    position: absolute;
    top: -31px;
    left: 0;
    padding:4px;
    font-family: var(--outerbox-label-font);
    font-weight: bold;
    background-color: inherit;
    border-radius: 0 10px 0 0;
}

.outerbox > text:first-of-type  {
    float:left;
    font-family: var(--outerbox-label-font);
    font-weight: bolder;
    background-color: inherit;
    padding:2px;
    width:calc(100% - 20px);
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}


.outerbox > text:first-of-type:before,
.outerbox > text:first-of-type:after {
  content:"";
  float:left;
  display:block;
  clear:both;
}


.tehum {
    float:left;
    background-color: var(--tehum-color);
    margin:4px;
    padding:4px;
    width:200px;
}

.temp {
    float:left;
    background-color: var(--tehum-color);
    margin:4px;
    padding:4px;
    width:100px;
}

.services {
    background-color: var(--services-color);
    padding:3px;
    margin:3px;
    border-radius: .3em;
}

.service {
    border:3px silver inset;
}

.bad {background-color: rgb(255,0,0)}
.good {background-color: rgb(0,255,0)}

/* popup notes down right */
.notes {
    position:absolute;
    bottom: 3px;
    right: 4px;
    height: auto;
    width: 25%;
    padding: 0px;
    margin: 5px;
    border-radius: 5px;
    background-color: rgb(180,120,120);
    transition:ease-in-out;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.noteNode {
    position:relative;
    float:left;
    font-size: 12px;
    font-family: monospace;
    padding:0px;
    margin-top:3px;
    margin-right:3px;
    width:100%;
    height:auto;
    border-radius: 5px;
    border: 2px black solid;
    background-color: rgb(200,220,180);
    transition:ease-in-out;
    transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
}

.fullText {
    border: 0px solid black;
    background-color: white;
}
.fullText .noteHdr {
}
.fullText .noteNode {
    top:0;
    height:auto;
    left:0;
    width:auto;
}

.noteHdr {
    width: 100%;
    height: 1.5em;
    font-family: cursive;
    font-weight: bold;
    padding-left:5px;
}

.noteClose {
    float:right;
    font-size: 8px;
    text-align: left;
    vertical-align: top;
    margin-left:1px;
    margin-right: 5px;
    width:10px;
    height:auto;
}

.noteText {
    position:relative;
    float:left;
    clear:both;
    width:90%;
    padding:6px;
    margin:0px;
    background-color: rgb(210,200,180);
}