/* LAYOUT */
 
body {
  /*margin: 40px;*/
  background: #222;
  font-family: monospace;
}

.wrapper {
        display: grid;
        /*grid-gap: 10px;*/
        grid-template-columns: 100px 500px 100px;
        /*grid-template-columns: auto auto auto;*/
        /*grid-template-rows: auto auto;*/
        /*background-color: #fff;*/
        color: #222;

        width: 700px;
        margin: auto;
}

.box {
    background-color: #222;
    color: #fff;
    /*border-radius: 5px;*/
    padding: 10px;
    font-size: 150%;

}

.a {
    grid-column: 1 ;
}
.b {
    grid-column: 2 ;
    grid-row: 1 / span 2;
    text-align: center;
    padding: 0;
}
.c {
    grid-column: 1 ;
    grid-row: 2 ;
    text-align: right;
    align-self: end;
}
.d {
    grid-column: 2 ;
    grid-row: 3 ;
    /*text-align: right;*/
}
.e {
    grid-column: 3 ;
    grid-row: 1 / span 2 ;
}

/***************
	LEVEL VIEW
****************/

.control-point {
  stroke-width : 6;
  stroke-dasharray : 8 4;
  fill-opacity:0;
}

.background {
	opacity: 1;
}

#outside-container .background {
	fill : white;
}
#outside-container .link {
	stroke : black;
}
#outside-container .control-point {
	stroke : black;
}


#ground-container .background {
	fill : black;
}
#ground-container .link {
	stroke : white;
}
#ground-container .control-point {
	stroke : white;
}

.control-point.full {
	stroke : red!important;
}

.pulse-area {
  /*stroke-width : 2;*/
  fill : none;
  /*fill-opacity : 0.2;*/
}

.pulse-area .pulsor {
  fill-opacity : 0;
  stroke : blue;
  stroke-width : 5;

  animation-name: pulse;
  animation-duration: 2s;
  animation-iteration-count: infinite;

}

@keyframes pulse {
    from {transform: scale(1); stroke-opacity:0;}
    to {transform: scale(0); stroke-opacity:2;}
}

/*.leaf {
	stroke : black;
	stroke-width : 2;
}*/


#water-map {
	fill : blue;
}

#graph-mask-root .link {
	stroke-width : 30;
	stroke-linecap : round;
	stroke:white!important;
}

/**************
	LEVEL HUD 
***************/

/* Weather hud */

.outer-circle {
	fill-opacity:0;
	stroke:white;
	stroke-width:3;
}

.axis-line {
	stroke:white;
	stroke-width:3;
}

.cycle-mark {
	fill : white;
}

#luminosity-view  {
	stroke : none;
	fill : yellow;
}

#humidity-view {
	stroke : none;
	fill : blue;
}

/* Respiration hud */

.key path {
  fill-opacity : 0;
}
.key text {
  display: none;
}
.key line {
  stroke: white;
  shape-rendering: crispEdges;
}

.resource-gauge {
	stroke : black;
	stroke-width : 2;
}

#energy-gauge {
	fill : yellow; /*orange*/
}
#water-gauge {
	fill : blue; /*steelblue*/
}

#respiration-view {
  pointer-events : none;
}

#respiration-view .background {
	stroke : grey;
    fill : darkslategray;
    opacity : 0;
}

.resp-arrow {
    stroke : white;
    stroke-width : 1;
}
.resp-arrow line {
    stroke-width : 2;
}

/* Reserve hud */

#reserve-view {
  pointer-events: none;
}

#reserve-view #capacity-bar {
	fill : white;
	fill-opacity : 0;
    stroke : white;
    stroke-width : 4;
}

#reserve-view #gauge-background {
    fill : white;
    fill-opacity : 0.2;
}

#reserve-view #quantity-bar {
      fill : #324F17; /* darkslateblue, #61210B, mediumvioletred */ 
      stroke : white;
      stroke-width : 0;
}

#reserve-view text {
	display : none;
}

/* Action info */

.donut-indicator .inner-text {
	display: none;
}

.donut-indicator .gauge-path {
	fill : green;
}


/* Tips */

#root-tip .tip-gauge {
	fill : grey;
}

#root-tip .tip-value{
	fill : blue;
} 

/* MENU */

#menu-action-view .item {
    fill-opacity : 0;
    stroke : white;
    stroke-width : 3;
}

#menu-action-view:hover .item {
    stroke-width : 5;
    cursor: pointer;
}

#menu-action-view:active .item {
    stroke-width : 7;
}

#menu-action-view .item ellipse {
    fill-opacity : 1;
    stroke : none;
    fill : white;
}

#menu-action-view .item .center {
    fill-opacity : 1;
    stroke : none;
    fill : yellow;
}

#menu-view #seed-counter {
  fill: white;
  font-family: monospace;
  font-size: 15px;
  pointer-events: none;
}

#menu-view #time-view {
  pointer-events: none;
}

#menu-view #time-view text {
  fill: white;
  font-size: 20px;
  text-anchor: middle;
  font-weight: bold;
}